CSS3 Gradients
CSS3 gradients allow you to display smooth transitions between two or more specified colors.
Previously, you had to use images to achieve these effects. However, by using CSS3 gradients, you can reduce download time and bandwidth usage. Also, elements with gradient effects look better when zoomed in because gradients are generated by the browser.
CSS3 defines two types of gradients:
Linear Gradients - Down/Up/Left/Right/Diagonal
Radial Gradients - Defined by their centers
Linear gradient related properties: background-image .
Browser support
The numbers in the table designate the first browser version that fully supports the property.
| Property |  |  |  |  |  |
|---|---|---|---|---|---|
| background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: IE8 and earlier versions of IE browsers do not support this property.
CSS3 Linear Gradient
In order to create a linear gradient, you must define at least two color nodes. The color node is the color you want to have a smooth transition. At the same time, you can also set a starting point and a direction (or an angle).
Examples of linear gradients:
Grammar
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Linear Gradient - top to bottom (by default)
The example below demonstrates a linear gradient from the top. The starting point is red and slowly transitions to blue:
Example
Linear gradient from top to bottom:
#grad {
background-image: linear-gradient(#e66465, #9198e5);
}Linear Gradient - Left to Right
The example below demonstrates a linear gradient starting from the left. The starting point is red and slowly transitions to yellow:
Example
Linear gradient from left to right:
#grad {
height: 200px;
background-image: linear-gradient(to right, red , yellow);
}Linear Gradient - Diagonal
You can make a diagonal gradient by specifying the horizontal and vertical starting positions.
The example below demonstrates a linear gradient starting from the upper left corner (to the lower right corner). The starting point is red and slowly transitions to yellow:
Example
Linear gradient from top left to bottom right:
#grad {
height: 200px;
background-image: linear-gradient(to bottom right, red, yellow);
}Use angle
If you want more control over the direction of the gradient, you can define an angle instead of a predefined direction (to bottom, to top, to right, to left, to bottom right, etc.).
Grammar
background-image: linear-gradient(angle, color-stop1, color-stop2);
Angle is the angle between the horizontal line and the gradient line, calculated counter-clockwise. In other words, 0deg will create a bottom-to-top gradient, and 90deg will create a left-to-right gradient.
However, be aware that many browsers (Chrome, Safari, firefox, etc.) use the old standard, ie 0deg will create a left-to-right gradient, and 90deg will create a bottom-to-top gradient. Conversion formula 90 - x = y where x is the standard angle and y is the non-standard angle.
The following example demonstrates how to use angles on linear gradients:
Example
Linear gradient with specified angle:
#grad {
background-image: linear-gradient(-90deg, red, yellow);
}Use multiple color nodes
The following example demonstrates how to set up multiple color nodes:
Example
Linear gradient from top to bottom with multiple color nodes:
#grad {
background-image: linear-gradient(red, yellow, green);
}The following example demonstrates how to create a linear gradient with rainbow colors and text:
Example
#grad {
/* Standard syntax */
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}Use transparency
CSS3 gradients also support transparency, which can be used to create faded effects.
To add transparency, we use the rgba() function to define color nodes. The last parameter in the rgba() function, which can be a value from 0 to 1, defines the transparency of the color: 0 is fully transparent, 1 is fully opaque.
The example below demonstrates a linear gradient starting from the left. The starting point is fully transparent and slowly transitions to fully opaque red:
Example
Linear gradient from left to right with transparency:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}Repeating Linear Gradient
The repeating-linear-gradient() function is used to repeat linear gradients:
Example
A repeating linear gradient:
#grad {
/* Standard syntax */
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}CSS3 radial gradient
A radial gradient is defined by its center.
In order to create a radial gradient, you must also define at least two color nodes. The color node is the color you want to have a smooth transition. At the same time, you can also specify the center, shape (circle or ellipse), and size of the gradient. By default, the center of the gradient is center (representing at the center point), the shape of the gradient is ellipse (representing an ellipse), and the size of the gradient is farthest-corner (representing the farthest corner).
Example of radial gradient:
Grammar
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Radial Gradient - Color nodes are evenly distributed (by default)
Example
Radial gradient with evenly distributed color nodes:
#grad {
background-image: radial-gradient(red, yellow, green);
}Radial Gradient - uneven distribution of color nodes
Example
Radial gradient with uneven distribution of color nodes:
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}Set shape
The shape parameter defines the shape. It can be the value circle or ellipse. where circle represents a circle and ellipse represents an ellipse. The default value is ellipse.
Example
Radial gradient with the shape of a circle:
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}Use of Different Size Keywords
The size parameter defines the size of the gradient. It can be the following four values:
closest-side
farthest-side
closest-corner
farthest-corner
Example
Radial Gradient with Different Size Size Keywords:
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}Repeating Radial Gradient
The repeating-radial-gradient() function is used to repeat radial gradients:
Example
A repeating radial gradient:
#grad {
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}