CSS3 Gradient

CSS3 gradient is use to display smooth transitions between two or more specified colors. Before this property, we have to use images for these kind of effects.

The main advantage of using CSS3 gradients is that: you can reduce the downloading time and bandwidth usage. In addition, elements with gradients look better when zoomed.

CSS3 Gradient is of two types:

1. Linear Gradient
2. Radial Gradient

To create a linear gradient you must define at least two colors. You can also set a starting point and a direction (angle) along with the gradient effect.

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

background:linear-gradient(red, #FFC);

Example 2: Linear Gradient Directions

Example: Linear Gradient Diogonal Directions.

Linear Gradient using Angle - You can also define an angle, instead of the predefined directions. The angle is specified between -360deg to 360deg.

We can repeat the gradient effect using repeating-linear-gradient() function.

Exercise 1: Underline using Linear Gradient

download

Exercise 2: Background using Linear Gradient

download