Gradients helps to create a smooth texture by combining multiple colors in such a way that the element becomes uniformly smooth as you transition between nearest points.
There are 2 types of Gradients.
- Linear Gradient
- Radial Gradient
Let us understand both of these in detail.
1. CSS Linear Gradient
Linear Gradient is those that contain the gradient direction in straight lines and at least 2 colors which will blend together in a particular pattern. All those colors are required. The colors who participate in this are called Color Stops.
The default direction is Top to Bottom
The Syntax of Linear Gradient:
background-image: linear-gradient(direction, comma separated color stops) ;
-webkit-linear-gradient(...); /*chrome, safari */
-moz-linear-gradient(....); /* Mozilla */
-ms-linear-gradient(...); /* Internet Explorer */
-o-linear-gradient(...); /* opera */
An Example is shown for this at the end of this page.
Example of Linear Gradients
CSS Linear Gradients To Bottom Right
You can set the gradient to Bottom right using the direction as – to bottom right.
The Syntax gradients to bottom right:
background: linear-gradient(to bottom right, comma separated color stops) ;
Example of Linear Gradients To Bottom Right
CSS Linear Gradients To Left
You can set the gradient to Left using the direction as – to left.
The Syntax gradients to left:
background: linear-gradient(to left, comma separated color stops) ;
Example of Linear Gradients To Left
Linear Gradients To Top Left
You can set the gradient to Top Left using the direction as – to top left.
The Syntax gradients to top left:
background: linear-gradient(to top left, comma separated color stops) ;
Example of Linear Gradients To Top Left
CSS Linear Gradients RGBA Values
We can define the color stops using rgba values as well.
Example of Linear Gradients RGBA Values
Repeating Linear Gradients
Sometimes, you might prefer to repeat the linear gradients. In that case, you can use the repeating-linear-gradient function.
The Syntax of Repeating Linear Gradients:
background-image: repeating-linear-gradient(direction, comma separated color stops) ;
Example of Repeating Linear Gradients
Linear Gradients Repeating Border
To create a repeated pattern border around the element, you can simply use the repeating-linear-gradient function to create a repeating pattern of the linear gradient.
Example of Gradients Repeating Border
Set degree values for Linear Gradients
As linear Gradients are always straight so you can set this at a particular angle as well. To achieve this, you can simply use the direction value in angle like 20deg, -30deg etc.
Example of degree values for Linear Gradients
Linear Gradient Text Color
The background:-webkit-linear-gradient(blue,red) sets the background image as linear gradient from Top to Bottom.
After this, you need to code -webkit-background-clip: text to set the background clip as text.
And at last, you need to code -webkit-text-fill-color: transparent to fill the text color as transparent so that it takes the linear background image as the color of the text.
Example of Linear Gradient Text Color
Linear Gradients Multi Colors
We have already seen that we can use multiple colors for Linear Gradients.
Let us create a beautiful background image using multiple colors.
Example of Linear Gradients Multi Colors
Diagonal Linear Gradients
To create a diagonal Linear Gradient, we need to set the starting side in X-axis(horizontal) and the starting side in Y-axis(vertical).
to top left
to bottom right
Example of Diagonal Linear Gradients
Similarly, for the 2nd div, the direction starts from top right and ends at the bottom left.
Linear Gradients Background Image
Along with a list of colors, you can also set a background image using the url(“path”) for the image.
Example of Gradients Background Image
Linear Gradients Border Bottom
Suppose, you have a heading and you want to apply a linear gradient to the border at the bottom.
In that case, you can simply use the border-image-slice property to controls how to slice the image in order to create a border. If you use this property, the image is sliced into nine parts – 4 corners, 4 edges, and the center.
border-image-slice:1 /*It is 1px */
border-image-slice:4 /*It is 4px */
border-image-slice:20% /*20% relative to the width and height of the image */
border-image-slice:10% /*10% relative to the width and height of the image */
Example of Linear Gradients Border Bottom
2. Radial Gradients
The Radial Gradient is based on a central position. The direction of the gradient is not straight. It depends on the shape which it uses. The Radial Gradient must have at least 2 colors.
The Syntax of Radial Gradients:
background-image: radial-gradient(shape size position , comma separated colors) ;
The default shape is ellipse. The default size is farthest-corner and the default position is center.
Example of Radial Gradients
Radial Gradients Farthest And Closest Sides
The farthest-side and closest-side controls the size of the shape of the radial gradient from each sides.
Radial Gradients Farthest And Closest Sides
Radial Gradients Farthest And Closest Corners
The farthest-corner and closest-corner controls the size of the shape of the radial gradient from each corner.
Example of Radial Gradients Farthest And Closest Corners
Radial Gradients Circle And Ellipse
Let us use the shape as Circle and Ellipse and see how it looks.
Example of Radial Gradients Circle And Ellipse
Repeating Radial Gradients
The repeating-radial-gradient function repeats the Radial Gradients.
The Syntax of Radial Gradients Repeating:
background-image: repeating-radial-gradient(shape size position , comma separated colors) ;
Example of Repeating Radial Gradients
Radial Gradients Text Color
The background:-webkit-radial-gradient(black 25%, deepskyblue 75%) sets the background image as Radial gradient as Ellipse, farthest corner and at the center. After this, you need to code -webkit-background-clip: text to set the background clip as text and at last, you need to code -webkit-text-fill-color: transparent to fill the text color as transparent so that it takes the linear background image as the color of the text.
This code is tested on Chrome browser. If you are using other browsers, then change the code accordingly. In production, you need to use -Moz-, -o-, -ms- for mozilla, opera or Internet Explorer respectively in place of -webkit-
Example of Radial Gradients Text Color
Radial Gradients Border
You can also apply the border-image-slice property for Radial Gradient Border as well.
You can first set a border like –
border: 10px solid and then use the border-image-property with border-image-slice.
Example of Radial Gradients Border
Gradients Cross Browser Compatibility
Gradients might not work in the older version of Internet Explorer like I.E 10 or prior. Similarly, you need to include browser specific code for Gradients. This code should work in Google Chrome, Safari, Opera, Mozilla Firefox and Internet Explorer.