CSS3 Gradients, linear and radial gradients

CSS Gradients

CSS2 use backgrounds images to add gradients. These gradients were 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. By using pure code, this can improve webpage performance and also adds beautiful background gradients.

CSS Gradients Types

Type of gradients	Explanation	Example
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
conical gradient	conical gradients are new in css, it create a gradient with colors rotating around center. Conical 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.

Two color Linear Gradient

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

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

<div class="gradient-1"></div>

Linear Gradient with angle

The default linear gradient starts from top to bottom. To change direction, we can use degree from 0 to 359. The default degree in 90.

Degree in linear gradients
degree	direction
0deg	bottom to top
45deg	let-bottom to top-right
90deg	right to left
180deg	top to bottom
270deg	left to right

Linear Gradient with angle.

Change Degree : 0 deg

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

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

Linear Gradients using to

Linear Gradient using to

            
<style>            
.gradient-3{
    height:50px;
    background:linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f);
    }
</style> 

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

Linear Gradient with solid 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, #404040);
    }
    </style>  
    
    <div class="gradient-5"> Radial Gradient</div>

Simple Radial Gradient with Circle

            
    <style>        
    .gradient-6{
    height:10px;
    background:radial-gradient(circle, #404040, #fff, #404040);
    }
    </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>

Conical Gradients

Conical Gradients are gradients with colors rotating around center. The default angle is 0deg, i.e top. We can change start angle using from 90 deg in function.


.box{
  background: conic-gradient(red, orange, yellow, green, blue);
}


  .box{
    background: conic-gradient(from 135deg,red, orange, yellow, green, blue);
  }

Pie chart using conical Gradient


    .box{
      border-radius:50%;
      background: conic-gradient( red 120deg,yellow 120deg,yellow 240deg, blue 240deg);
    }

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.