CSS3 gradient is use to display smooth transitions between two or more specified colors. Earlier, you had to use images for these effects. However, by using CSS3 gradients you can reduce download time and bandwidth usage. In addition, elements with gradients look better when zoomed.
CSS3 defines two types of gradients:
1. Linear Gradients
2. Radial Gradients
CSS3 Linear Gradient
To create a linear gradient you must define at least two colors. You can also set a starting point and a direction (or an angle) along with the gradient effect.
Linear Gradient DirectionsExample: Linear Gradient Directions
Linear Gradient direction - DiagonalExample: Linear Gradient Diogonal Directions.
Linear Gradient using Angle
Linear Gradient using Angle - You can also define an angle, instead of the predefined directions. The angle is specified between -360deg to 360deg.
Repeating a Linear Gradient
We can repeat the gradient effect using repeating-linear-gradient() function.
Exercise 1: Underline using Linear Gradient
Exercise 2: Background using Linear Gradient