CSS Gradient

This gradient feature provides a flexible solution to generate smooth transitions between two or more colors. Earlier, to achieve such effect we had to use the images.

Using CSS3 gradients we can reduce the download time and saves the bandwidth usages. The elements with gradients can be scaled up or down to any extent without losing the quality, also the output will render much faster because it is generated by the browser.

There are majorly two types of gradient – linear and radial gradient.

The CSS3 linear gradient goes up/down/left/right and diagonally. To create a CSS3 linear gradient, we 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.

In a radial gradient color emerge from a single point and smoothly spread outward in a circular or elliptical shape rather than fading from one color to another in a single direction as with linear gradients.


Linear Gradient – Top to Bottom

This is the basic type of linear gradient which directions from top to bottom.

Input:-

Index.html
	
<body>   
    <div id="linearGradient"></div> 
</body>
Style.css
#linearGradient {  
    height: 100px;  
    background: -webkit-linear-gradient(red, green);
    background: -o-linear-gradient(red, green); 
    background: -moz-linear-gradient(red, green); 
    background: linear-gradient(red, green); 
} 

Output:-


Linear Gradient – Left to Right

The following example shows the linear gradient that starts from left and goes to right.

Input:-

Index.html
	
<body>   
    <div id="linearGradient"></div> 
</body>
Style.css
#linearGradient {  
    height: 100px;  
    background: -webkit-linear-gradient(left, red, green); 
    background: -o-linear-gradient(right, red, green); 
    background: -moz-linear-gradient(right, red, green); 
    background: linear-gradient(to right, red , green);
} 

Output:-


Linear Gradient – Diagonal

We can also create a gradient along the diagonal direction. The following example will create a linear gradient from the bottom left corner to the top right corner of the element’s box.

Input:-

Index.html
	
<body>   
    <div id="linearGradient"></div> 
</body>
Style.css
#linearGradient {  
    height: 100px;  
    background: red;
    background: -webkit-linear-gradient(bottom left, red, yellow);
    background: -ms-linear-gradient(bottom left, red, yellow);
    background: linear-gradient(to top right, red, yellow);
} 

Output:-


Repeating the Linear Gradients

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

Input:-

Index.html
	
<body>   
    <div id="linearGradient"></div> 
</body>
Style.css
#linearGradient {  
    height: 100px;  
    background: white;
    background: -webkit-repeating-linear-gradient(black, white 10%, lime 20%);
    background: -ms-repeating-linear-gradient(black, white 10%, lime 20%);
    background: repeating-linear-gradient(black, white 10%, lime 20%);} 

Output:-


Setting the Shape of Radial Gradients

The shape argument of the radial-gradient() function is used to define the ending shape of the radial gradient. It can take the value circle or ellipse.

Input:-

Index.html
	
<body>   
    <div id="radialGradient"></div> 
</body>
Style.css
#radialGradient {  
    height: 100px;  
    background: red;
    background: -webkit-radial-gradient(circle, red, yellow, lime);
    background: -ms-radial-gradient(circle, red, yellow, lime);
    background: radial-gradient(circle, red, yellow, lime);
}

Output:-


Setting the Size of Radial Gradients

The size argument of the radial-gradient() function is used to define the size of the gradient’s ending shape. Size can be set using units or the keywords: closest-side, farthest-side, closest-corner, farthest-corner.

Input:-

Index.html
	
<body>   
    <div id="radialGradient"></div> 
</body>
Style.css
#radialGradient {  
    height: 100px;  
    background: red;
    background: -webkit-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
    background: -ms-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
    background: radial-gradient(circle farthest-side at left bottom, red, yellow, lime);
}

Output:-


Repeating the Radial Gradients

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

Input:-

Index.html
	
<body>   
    <div id="radialGradient"></div> 
</body>
Style.css
#radialGradient {  
    height: 100px;  
    background: white;
    background: -webkit-repeating-radial-gradient(black, white 10%, lime 20%);
    background: -ms-repeating-radial-gradient(black, white 10%, lime 20%);
    background: repeating-radial-gradient(black, white 10%, lime 20%);
}

Output:-