CSS Gradient

CSS gradient is used to display smooth transition within two or more specified colors.

Why CSS Gradient

These are the following reasons to use CSS gradient.

• You don't have to use images to display transition effects.
• The download time and bandwidth usage can also be reduced.
• It provides better look to the element when zoomed, because the gradient is generated by the browser.

There are two types of gradient in CSS3.

1. Linear gradients
2. Radial gradients

1) CSS Linear Gradient

The CSS3 linear gradient goes up/down/left/right and diagonally. To create a CSS3 linear gradient, you must have to define two or more color stops. The color stops are the colors which are used to create a smooth transition. Starting point and direction can also be added along with the gradient effect.

(i) CSS Linear Gradient: (Top to Bottom)

Top to Bottom Linear Gradient is the default linear gradient. Let's take an example of linear gradient that starts from top. It starts red and transitions to green.

Output:

Linear Gradient - Top to Bottom

This linear gradient starts at the top. It starts red, transitioning to green:

(ii) CSS Linear Gradient: (Left to Right)

The following example shows the linear gradient that starts from left and goes to right. It starts red from left side and transitioning to green.

Output:

Linear Gradient - Left to Right

This linear gradient starts at the left. It starts red, transitioning to green:

(iii) CSS Linear Gradient: (Diagonal)

If you specify both the horizontal and vertical starting positions, you can make a linear gradient diagonal.

Output:

Linear Gradient - Diagonal

This linear gradient starts at top left. It starts red, transitioning to green:

2) CSS Radial Gradient

You must have to define at least two color stops to create a radial gradient. It is defined by its center.

(i) CSS Radial Gradient: (Evenly Spaced Color Stops)

Evenly spaced color stops is a by default radial gradient. Its by default shape is eclipse, size is farthest- carner, and position is center.

Output:

Radial Gradient - Evenly Spaced Color Stops

(ii) Radial Gradient: (Differently Spaced Color Stops)

Output:

Radial Gradient - Differently Spaced Color Stops

Supporting Browsers

This table specify the first browser version that fully supports the gradient property.