CSS3 Gradients

CSS3 Gradients
css3 opacity

CSS2 use backgrounds images to add gradients. These gradients are very much popular, but slow down webpage performance. But CSS3 includes both linear gradient and radial gradients. These gradients are used as background images and works on all latest browsers.

Type of Gradients

Type of gradients Explanation
Linear Gradient Gradient starting from one corner to another in straight line. Can have n number of colors and color stop.Linear Gradients
Radial Gradient Gradients starting from any corner or even center to outside in circular or elliptical direction. Radial Gradients
Repeating Linear Gradient Same like linear gradients but with repeating pattern. Repeating Linear Gradients
repeating radial gradient Same like radial gradients but with repeating pattern.Repeating Radial Gradients
Multiple Gradients Multiple gradients are combinations of both linear and radial gradients with RGBA Colors.Multiple Gradients


Linear Gradients

Linear Gradients are gradients with combinations of two or more colors in linear direction. These directions are top to bottom, left to right, top left corner to bottom right corner etc. Even direction can be controlled using angle( in degrees). These gradients are used in background only, not as font color.

Simple Linear Gradient

Linear Gradient 1, starting from bottom with gray and light gray colors.


            
<style>        
    .gradient-1{
    background:linear-gradient( #404040, #dddddd);
    }
</style> 

 <div class="gradient-1"> Linear Gradient 1, starting from left</div>
    

Linear Gradient with multi colors

Linear Gradient 2, starting from left top corner, with red, white and green colors.


            
<style>        
    .gradient-2{
    height:300px;
    background:linear-gradient(135deg, #ff0000, #ffffff, #0f0);text-shadow:1px 1px white";
    }
</style> 

 <div class="gradient-2"> Linear Gradient 2, starting from left top corner </div>
    

Linear Gradients with Six Colors

Linear Gradient 3, starting from bottom with multiple colors


            
<style>        
    
    .gradient-3{
    height:50px;
    background:linear-gradient(0deg, hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%));
    }
</style> 

<div class="gradient-3">Linear Gradient 3, starting from bottom with multiple colors </div>

How to create Linear Gradient with strips

Linear Gradient 4, starting from bottom left, black with 30% color stop, darkgray with 30% color stop, another darkgray with 60% color stop, lightgray with 60% color stop and another lightgray with 90% color stop.


            
<style>        
    .gradient-4{
    height:300px; 
    background:linear-gradient(45deg, #000000 30%, #666666 30%, #666666 60%, #CCCCCC 60%, #CCCCCC 90%);
    }
</style> 
    
    <div class="gradient-4">Linear Gradient 4, starting from bottom left, black with 30% color stop, darkgray with 30% color stop, another darkgray with 60% color stop, lightgray with 60% color stop and another lightgray with 90% color stop.</div>

          

For IE 8 and below


<style>    
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#COLOR', endColorstr='#COLOR);             /* IE6 and IE7 */ 
    
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType= 0,startColorstr='#COLOR', endColorstr='#COLOR')";          /* IE8 */
</style>    
        


Radial Gradients

Radial Gradients are gradients with circular or elliptical orbits. Radial Gradients can start from center spread in elliptical or circular path. If shape is rectangular, orbit will be elliptical, for square shapes, orbit will be circular.

Simple Radial Gradient


            
    <style>        
    .gradient-5{
    height:10px;
    background:radial-gradient( #404040, #dddddd);
    }
    </style>  
    
    <div class="gradient-5"> Radial Gradient</div>
 
          

Simple Radial Gradient with circular orbit


            
    <style>        
    .gradient-6{
    height:10px;
    background:radial-gradient(circle, #404040, #fff);
    }
    </style>  
    
    <div class="gradient-6"> Radial Gradient with circular orbit</div>
 
          

Create Rainbow using Radial Gradient


            
    <style>        
    .gradient-7{
    height:300px;
    background:-webkit-radial-gradient(bottom center, circle, violet 7%, indigo 7%, indigo 14%, blue 14%, blue 21%, green 21%, green 28%, yellow 28%, yellow 35%, orange 35%, orange 42%, red 42%, red 49%, white 49%, white 56%);
    }
    </style>  
    
    <div class="gradient-7"></div>
 
          

Repeating Linear Gradients

Repeating Linear Gradients are gradients with color stop less then 100%, so that gradient will repeat itself. If last color count is 20%, gradient will repeat 10 times and if last color count is 10%, gradient will repeat 20 times.

Repeating Linear Gradient


            
    <style>
    .gradient-8{
    height:10px;
    background:repeating-linear-gradient(45deg, #404040 5%, #ddd 10%);
    }
    <style>        
    <div class="gradient-8"></div>

          

Repeating Radial Gradients

Repeating Radial Gradients are same like linear repeating, but can start from center with circular or elliptical orbit.

Repeating Radial Gradient


            
    <style>
    .gradient-9{
    height:10px;
    background:-webkit-repeating-radial-gradient(center, circle, #404040 5%, #ddd 10%);
    }
    <style>        
    <div class="gradient-9"></div>

          

Multiple Gradients

CSS3 Gradients can be used multiple times in a combo if color code is RGBA or HSLA.

Multiple Gradient with two linear gradients.


            
    <style>
    .gradient-10{
    height:100px; 
    background:repeating-linear-gradient(45deg, rgba(64, 64, 64, 0.52) 5%, rgba(221, 221, 221, 0.49) 10%),repeating-linear-gradient(-45deg, rgba(64, 64, 64, 0.52) 5%, rgba(221, 221, 221, 0.49) 10%)
    }
    <style>        
    <div class="gradient-10"></div>

          

Multiple Gradient with one linear and one radial gradients.


            
    <style>
    .gradient-10{
    height:200px; background:-webkit-repeating-radial-gradient(top left, circle, rgba(48, 56, 255, 0.52) 5%, rgba(221, 221, 221, 0.49) 10%),repeating-linear-gradient(-45deg, rgba(253, 70, 70, 0.52) 5%, rgba(221, 221, 221, 0.49) 10%)
    }
    <style>        
    <div class="gradient-10"></div>

          

CSS3 Gradients are allowed in background only. For IE8 and below, use filters.