CSS3 Gradient

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.

Example 1: Linear Gradient - Top to Bottom (Default)

Output:

Linear Gradient Directions

Example: Linear Gradient Directions

Linear Gradient direction - Diagonal

Example: 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