CSS GRADIENTS : HOW TO USE CSS GRADIENT FOR BACKGROUND ?
If you are a web developer and want to design your website with some beautiful gradient colors to make it look awesome but having a problem in implementing the CSS gradients, then this article is for you.
Now, let's talk about what gradient is. You can use a solid color in the background, but it will not look that good. Instead of using a solid color, you can use gradient color so that the background looks great. The gradient is typically a color that fades into another color and in CSS, you have total control over customizing the gradient like the percentage of each color, number of colors, etc.
Now, let's discuss the types of CSS gradients and how to implement them. CSS gradients has two types. One, Linear gradient and second, Radial gradient. Perhaps, the Linear-gradient is the most common and widely used CSS gradients, we will discuss both of them.
While applying a solid color to the background, you use the background-color property of CSS but for applying the gradients, you have to use the background-image property.
Linear-gradient:
It is the most commonly used gradient. The gradient axis can go from top to bottom, left to right or at any angle you want. You must choose a minimum of two color stops.
Syntax:
background-image: linear-gradient ( direction, color 1, color 2,.......) ;
Direction:
You can use any direction. From top to bottom is the default direction. If you don't mention the direction, it will show from top to bottom. So, to get a specific direction, you have to mention it. I am adding some examples of how to use the direction to have a specific gradient.
Left to right :
background-image: linear-gradient( to right ,#62BF37, #0F4E5C);
If you apply the above code for a div with some height, you will get the color like the following example where the linear gradient starts from left with #62BF37 color and transits into #0F4E5C color at right.
Diagonal:
background-image: linear-gradient( to right bottom ,#62BF37, #0F4E5C);
You can also create a diagonal gradient color by mentioning the vertical and horizontal both. If you apply the code given above to a div with some height, you will get a gradient like the following example where it starts at the top left and finishes at the right bottom.
background-image: linear-gradient( 60deg ,#62BF37, #0F4E5C);
Not only left-right, top-bottom, and diagonal direction but you can also create a linear gradient at any angle you want. You can compare the following examples where the first one is a gradient of 60 degrees and the other is 120 degrees.
 |
| 60 degrees |
 |
| 120 degrees |
Multiple colors:
background-image: linear-gradient( to right , green, yellow, red);
You can also create a linear-gradient with multiple colors. The syntax is the same here also. If you use the above code, you will get a gradient like the following example where I am using three colors. They are green, yellow and red ( from left to right).
Repeating linear-gradient:
background-image: repeating-linear-gradient(to left top, blue, red 20px);
If you use the above code, you will find a repeating linear gradient like the following example where the gradient starts from the bottom right and finishes at the top left with blue-red color at every 20px.
background-image: repeating-linear-gradient( red, yellow 30%, blue);
In the above code, you can find that I am using 30%. It creates a gradient from top to bottom, starting with red, turning into yellow after 30%, and finishing with red color. It does not repeat because it takes the last color blue as default 100%. It looks like the following example.
background-image: repeating-linear-gradient(to right, red 0%, yellow 10%, blue 20%);
If you apply the above code, you will find a gradient with five repetitions where it starts from red, changes into yellow after 10% and again changes into blue after 20%. This thing repeats 5 times. It will look like the following example.
Radial-gradient:
You can create radial gradient where a transition between two or more colors radiates from the origin. It may be of a shape of a circle or an ellipse.
Syntax:
background-image: radial-gradient ( shape size at position, color 1, color 2,.......) ;
Shape:
It specifies the shape of the gradient. The gradient can have a shape of a circle or an ellipse. If nothing is specified, it will show the default ellipse shape.
Size:
It defines the size of the gradient. It can have four values. The values are farthest-corner (default), closest-side, closest-corner and farthest-side.
Position:
It specifies the position of the gradient. It has a default value to the center.
Example:
Simple radial gradient with two differently spaced colors:
background-image: radial-gradient (red, blue 60%);
If you apply the above code, you will find an elliptical gradient like the following example.
Circular radial gradient:
background-image:radial-gradient (circle, red, yellow);
On applying the code given above, you will find a circular radial gradient that radiates from red to yellow.
Radial gradient with different size keywords:
Farthest-corner:
background-image: radial-gradient(farthest-corner at 60% 60%,blue,red,yellow);
This piece of code will create a radial gradient like the example given below.
Closest-side:
background-image: radial-gradient(closest-side at 60% 60%,blue,red,yellow);
This code will create a radial gradient like the example given below.
Closest-corner:
background-image: radial-gradient(closest-side at 60% 60%,blue,red,yellow);
This code will create a radial gradient like the example given below.
Farthest-side:
background-image: radial-gradient(farthest-side at 60% 60%,blue,red,yellow);
This code will create a radial gradient like the following example.
Repeating radial gradient :
background-image: repeating-radial-gradient(red, yellow 10%, blue 20%);
You can create a repeating radial gradient also. If you use the code given above, you will find a gradient like the following example.
.
Till now, you have been learning how to apply CSS gradients. Now, you can create some awesome web pages with a gradient background color. If you have any doubts regarding this topic, you can comment below but if it is clear to you start coding now.
Happy coding 😄.
No comments:
Post a Comment