Reader Level:
Article

Gradient in CSS

By Sudhir Choudhary on Apr 04, 2013
In this article you will learn about linear and radial gradients in CSS.

Introduction

In this article you will learn about linear and radial gradients in CSS.
 

Support by all the latest browsers:

brawser.jpg

Linear Gradients

Lineargradient is a function like <-Linear-gradient ();> through this function we can add multiple color in div from left, right, Bottom, top,top left, top right, bottom left, bottom right etc and we can also makeimage.

<!DOCTYPE html>
<
html>
<
head>
   
<title>gradient</title>
   
<style>
       
#main {
           
height: 200px;
           
width: 300px;
           
margin: 0px auto;
           
border: 1px solid #FF9933;
           
background: -webkit-linear-gradient(top, red 0%, blue 50%,lightpink 100%);
           
background: -moz-linear-gradient(top, red 0%, blue 50%,lightpink 100%);
           
background: -o-linear-gradient(top, red 0%, blue 50%,lightpink 100%);
           
background: -ms-linear-gradient(top, red 0%, blue 50%,lightpink 100%);
        }
   
</style>
</
head>
<
body>
   
<div id="main">
   
</div>
</
body>
</
html> 

Output

3.jpg

           background:-webkit-linear-gradient(left, #330066 0%, blue 50%, #663366 100%);
          
background:-moz-linear-gradient(left, #330066 0%, blue 50%, #663366 100%);
          
background:-ms-linear-gradient(left, #330066 0%, blue 50%, #663366 100%);
          
background:-o-linear-gradient(left, #330066 0%, blue 50%, #663366 100%); 

Output

4.jpg

background:-webkit-linear-gradient(topright,red8%,green30%,blue70%,lightpink90%);
background
:-moz-linear-gradient(topright,red8%,green30%,blue70%,lightpink90%);
background
:-o-linear-gradient(topright,red8%,green30%,blue70%,lightpink90%);
background
:-ms-linear-gradient(topright,red8%,green30%,blue70%,lightpink90%);


Output

2.jpg

Radial Gradient

Radialgradient is a function like <-Radial-gradient ();> through this function we can add multiple color in div and we can alsomake image. Radial gradient have multiple Shape setting as like closest-side,closest-corner,farthest-side, farthest-corner (cover) etc.

you can write :- background: -moz-radial-gradient(closest-corner, red, yellow 10%, #1E90FF 50%, white);

 background:-moz-radial-gradient(circle,blue50%,#663366100%);
background:-webkit-radial-gradient(circle,blue50%,#663366100%);
background:-o-radial-gradient(circle,blue50%,#663366100%);
background:-ms-radial-gradient(circle,blue50%,#663366100%);


Output

5.jpg

           background:-webkit-radial-gradient( gray 50%, #663366 100%);
          
background:-moz-radial-gradient( gray 50%, #663366 100%);
          
background:-o-radial-gradient( gray 50%, #663366 100%);
          
background:-ms-radial-gradient( gray 50%, #663366 100%); 

Output

6.jpg

          background:-webkit-radial-gradient(contain, #fff 0%, gray 50%, #663366 100%);
         
background:-moz-radial-gradient(contain, #fff 0%, gray 50%, #663366 100%);
         
background:-o-radial-gradient(contain, #fff 0%, gray 50%, #663366 100%);
         
background:-ms-radial-gradient(contain, #fff 0%, gray 50%, #663366 100%); 

Output

7.jpg

background:-webkit-radial-gradient(50%50%,circle,rgb(75,75,200),rgb(0,0,75))          
background
:-moz-radial-gradient(50%50%,circle,rgb(75,75,200),rgb(0,0,75));          
background
:-ms-radial-gradient(50%50%,circle,rgb(75,75,200),rgb(0,0,75));          
background
:-o-radial-gradient(50%50%,circle,rgb(75,75,200),rgb(0,0,75));          
background
:radial-gradient(circleat50%50%,rgb(75,75,200),rgb(0,0,75));


Output

image.jpg

background:-webkit-repeating-radial-gradient(circle,#6578345px,#fff10px,#FF993330px);
background
:-moz-repeating-radial-gradient(circle,#6578345px,#fff10px,#FF993330px);
background
:-o-repeating-radial-gradient(circle,#6578345px,#fff10px,#FF993330px);
background
:-ms-repeating-radial-gradient(circle,#6578345px,#fff10px,#FF993330px);


Output

1.jpg

COMMENT USING