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.
There are two types of gradient in CSS3.
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.Test it Now
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.Test it Now
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.Test it Now
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.Test it Now
Radial Gradient - Evenly Spaced Color Stops
(ii) Radial Gradient: (Differently Spaced Color Stops)Test it Now
Radial Gradient - Differently Spaced Color Stops
This table specify the first browser version that fully supports the gradient property.
Next TopicCSS z-index