Post
Ask Question

Gradient 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

 
Linear gradient is a function like <-Linear-gradient ();> through this the function we can add multiple colors in div from left, right, Bottom, top, top left, top right, bottom left, bottom right, etc and we can also make image.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>gradient</title>  
  5.     <style>  
  6.         #main {  
  7.             height: 200px;  
  8.             width: 300px;  
  9.             margin: 0px auto;  
  10.             border: 1px solid #FF9933;  
  11.             background: -webkit-linear-gradient(top, red 0%, blue 50%,lightpink 100%);  
  12.             background: -moz-linear-gradient(top, red 0%, blue 50%,lightpink 100%);  
  13.             background: -o-linear-gradient(top, red 0%, blue 50%,lightpink 100%);  
  14.             background: -ms-linear-gradient(top, red 0%, blue 50%,lightpink 100%);  
  15.         }  
  16.     </style>  
  17. </head>  
  18. <body>  
  19.     <div id="main">  
  20.     </div>  
  21. </body>  
  22. </html>  
Output
 
3.jpg
  1. background:-webkit-linear-gradient(left, #330066 0%, blue 50%, #663366 100%);    
  2. background:-moz-linear-gradient(left, #330066 0%, blue 50%, #663366 100%);    
  3. background:-ms-linear-gradient(left, #330066 0%, blue 50%, #663366 100%);    
  4. background:-o-linear-gradient(left, #330066 0%, blue 50%, #663366 100%); 
Output
 
4.jpg
  1. background:-webkit-linear-gradient(topright,red8%,green30%,blue70%,lightpink90%);    
  2. background:-moz-linear-gradient(topright,red8%,green30%,blue70%,lightpink90%);    
  3. background:-o-linear-gradient(topright,red8%,green30%,blue70%,lightpink90%);    
  4. background:-ms-linear-gradient(topright,red8%,green30%,blue70%,lightpink90%);  
    Output
     
    2.jpg
     

    Radial Gradient

     
    Radial gradient is a function like <-Radial-gradient ();> through this function we can add multiple colors in div and we can also make an 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);
    1. background:-moz-radial-gradient(circle,blue50%,#663366100%);    
    2. background:-webkit-radial-gradient(circle,blue50%,#663366100%);    
    3. background:-o-radial-gradient(circle,blue50%,#663366100%);    
    4. background:-ms-radial-gradient(circle,blue50%,#663366100%); 
    Output
     
    5.jpg
    1. background:-webkit-radial-gradient( gray 50%, #663366 100%);    
    2. background:-moz-radial-gradient( gray 50%, #663366 100%);    
    3. background:-o-radial-gradient( gray 50%, #663366 100%);    
    4. background:-ms-radial-gradient( gray 50%, #663366 100%);  
      Output
       
      6.jpg
      1. background:-webkit-radial-gradient(contain, #fff 0%, gray 50%, #663366 100%);    
      2. background:-moz-radial-gradient(contain, #fff 0%, gray 50%, #663366 100%);    
      3. background:-o-radial-gradient(contain, #fff 0%, gray 50%, #663366 100%);    
      4. background:-ms-radial-gradient(contain, #fff 0%, gray 50%, #663366 100%);  
        Output
         
        7.jpg
        1. background:-webkit-radial-gradient(50%50%,circle,#4b4bc8,#00004b)              
        2. background:-moz-radial-gradient(50%50%,circle,#4b4bc8,#00004b);              
        3. background:-ms-radial-gradient(50%50%,circle,#4b4bc8,#00004b);              
        4. background:-o-radial-gradient(50%50%,circle,#4b4bc8,#00004b);              
        5. background:radial-gradient(circleat50%50%,#4b4bc8,#00004b);  
          Output
           
          image.jpg
          1. background:-webkit-repeating-radial-gradient(circle,#6578345px,#fff10px,#FF993330px);    
          2. background:-moz-repeating-radial-gradient(circle,#6578345px,#fff10px,#FF993330px);    
          3. background:-o-repeating-radial-gradient(circle,#6578345px,#fff10px,#FF993330px);    
          4. background:-ms-repeating-radial-gradient(circle,#6578345px,#fff10px,#FF993330px);  
            Output
             
            1.jpg


            Similar Articles