The CSS linear-gradient() function creates an image consisting of a progressive transition between two or more colors along a straight line. This function can be used to generate a wide variety of effects, from simple, smooth gradients to more complex patterns.
Example 1: Basic Two-Color Gradient
/* Creates a simple gradient from top to bottom */
.gradient-1 {
background: linear-gradient(to bottom, #ff7e5f, #feb47b);
height: 200px;
}
Explanation
This code creates a vertical gradient that starts with the color #ff7e5f at the top and smoothly transitions to #feb47b at the bottom. The to bottom keyword specifies the direction of the gradient line.
Example 2: Angled Gradient
/* Creates a gradient at a 45-degree angle */
.gradient-2 {
background: linear-gradient(45deg, #6a11cb, #2575fc);
height: 200px;
}
Explanation
By specifying an angle, 45deg, you can control the exact direction of the gradient. This example creates a diagonal gradient that flows from the bottom left to the top right.
Example 3: Gradient with Multiple Color Stops
/* A gradient with three distinct colors */
.gradient-3 {
background: linear-gradient(to right, #f7971e, #ffd200, #f7971e);
height: 200px;
}
Explanation
You can use more than two colors in a linear gradient. This example creates a horizontal gradient that starts with #f7971e, transitions to #ffd200 in the middle, and ends with #f7971e again.
Example 4: Using Color Stop Positions
/* Controlling the position of colors in the gradient */
.gradient-4 {
background: linear-gradient(to right, #00c6ff 0%, #0072ff 100%);
height: 200px;
}
Explanation
This code explicitly sets the starting and ending points for the colors. The first color, #00c6ff, starts at the 0% mark (the far left), and the second color, #0072ff, ends at the 100% mark (the far right).
Example 5: Creating Hard Lines with Gradients
/* Making sharp transitions instead of smooth ones */
.gradient-5 {
background: linear-gradient(to right, #e44d26 50%, #f16529 50%);
height: 200px;
}
Explanation
By placing two color stops at the same position (50%), you can create a hard line instead of a smooth gradient. This results in a solid split of two colors down the middle of the element.
Example 6: Gradient with Transparency
/* Using RGBA to create a transparent gradient overlay */
.gradient-6 {
background-image: url('your-image.jpg'); /* A background image */
background-size: cover;
position: relative;
height: 200px;
}
.gradient-6::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
}
Explanation
This example uses a pseudo-element (::before) to create a gradient overlay on top of a background image. The gradient transitions from a semi-transparent black (rgba(0,0,0,0.8)) at the bottom to fully transparent (rgba(0,0,0,0)) at the top, which can improve text readability over an image.
Example 7: Repeating a Linear Gradient
/* Creates a repeating stripe pattern */
.gradient-7 {
background: repeating-linear-gradient(
-45deg,
#3498db,
#3498db 10px,
#2980b9 10px,
#2980b9 20px
);
height: 200px;
}
Explanation
The repeating-linear-gradient() function creates a pattern of stripes that repeats itself. In this case, it generates diagonal stripes of two different shades of blue, each 10 pixels wide.