5.1 Linear Gradients
Gradients are a powerful tool in web design, letting you create smooth transitions between colors without
using images. CSS provides two main types of gradients: linear (linear-gradient)
and radial (radial-gradient). These gradients are used for backgrounds of elements,
creating buttons, and other visual effects.
Linear gradients (linear-gradient)
A linear gradient creates a smooth transition between two or more colors along a specified line (axis). The line can be horizontal, vertical, or at any angle.
Syntax
background: linear-gradient( direction, color-stop1, color-stop2, ...);
Values
direction: the direction of the gradient. Can be specified in degrees (e.g.,90deg), using keywords (e.g.,to right,to bottom left)color-stop: a color stop, which determines the color and its position in the gradient
Usage examples
Horizontal gradient:
.linear-gradient-horizontal {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow);
}
<body>
<div class="linear-gradient-horizontal">Horizontal Gradient</div>
</body>
Vertical gradient:
.linear-gradient-vertical {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, blue, green);
}
<body>
<div class="linear-gradient-vertical">Vertical Gradient</div>
</body>
Diagonal gradient:
.linear-gradient-diagonal {
width: 200px;
height: 200px;
background: linear-gradient(45deg, purple, pink);
}
<body>
<div class="linear-gradient-diagonal">Diagonal Gradient</div>
</body>
Multicolor gradient:
.linear-gradient-multi {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow, green, blue);
}
<body>
<div class="linear-gradient-multi">Multicolor Gradient</div>
</body>
Code Explanation:
to right: the gradient goes from left to rightto bottom: the gradient goes from top to bottom45deg: the gradient goes at a 45-degree anglered,yellow,green,blue: several color stops to create a multicolor gradient
5.2 Radial Gradients
radial-gradient creates a smooth transition between colors, starting from the center and spreading to the edges of a circle
or ellipse. Radial gradients can create interesting visual effects, like simulating 3D.
Syntax:
background: radial-gradient( direction, color-stop1, color-stop2, ...);
Values:
shape: shape of the gradient, can becircleorellipse(default)size: size of the gradient, can beclosest-side,closest-corner,farthest-side,farthest-cornerposition: position of the gradient's center, can be specified in percentages, pixels, or using keywords (e.g.,center,topleft)color-stop: a color stop, which determines the color and its position in the gradient
Usage examples
Circular gradient:
.radial-gradient-circle {
width: 200px;
height: 200px;
background: radial-gradient(circle, red, yellow);
}
<body>
<div class="radial-gradient-circle">Circular Gradient</div>
</body>
Elliptical gradient:
.radial-gradient-ellipse {
width: 200px;
height: 200px;
background: radial-gradient(ellipse, blue, green);
}
<body>
<div class="radial-gradient-ellipse">Elliptical Gradient</div>
</body>
Center gradient:
.radial-gradient-at-center {
width: 200px;
height: 200px;
background: radial-gradient(circle at center, purple, pink);
}
<body>
<div class="radial-gradient-at-center">Center Gradient</div>
</body>
Corner gradient:
.radial-gradient-at-corner {
width: 200px;
height: 200px;
background: radial-gradient(circle at top left, red, blue, green);
}
<body>
<div class="radial-gradient-at-corner">Corner Gradient</div>
</body>
Code Explanation:
circle: creates a circular gradientellipse: creates an elliptical gradientat center: the gradient starts from the centerat top left: the gradient starts from the top left cornerred,blue,green: several color stops to create a multicolor gradient
5.3 Additional Gradient Settings
Repeating Gradients
1. Repeating Linear Gradients (repeating-linear-gradient)
Repeating linear gradients create a repeating pattern with a linear gradient.
background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
2. Repeating Radial Gradients (repeating-radial-gradient)
background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);
3. Transparent Color Stops
Color stops can include transparency to create more complex visual effects.
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
4. Using Multiple Gradients
You can use multiple gradients to create complex backgrounds.
background: linear-gradient(to right, red, yellow), radial-gradient(circle, blue, green);
GO TO FULL VERSION