CSS3 Gradients, TutorialsPoint, CSS3 Gradients Tutorial

CSS3 Gradients

CSS3 gradients let you display smooth transitions between two or more specified colors.

CSS3 defines two types of gradients:

1. Linear Gradients (goes down/up/left/right/diagonally)

2. Radial Gradients (defined by their center)

Linear Gradients

Linear gradient you must define at least two color stops. However to create more complex gradient effects you can define more color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along which the gradient effect is applied.

<!DOCTYPE html>
<head>
<title>Linear Gradients</title>

<style type="text/css">      

.top_to_bottom { width: 250px; 
height: 100px; 
background:#F60; 
background: -webkit-linear-gradient(#F60, #FFC); 
background: -ms-linear-gradient(#F60, #FFC); 
background: linear-gradient(#F60, #FFC); 
margin:0px 0px 30px;
}
 
.left_to_right { 
width: 250px; 
height: 100px; 
background:#F60; 
background: -webkit-linear-gradient(left, #F60, #FFC); 
background: -ms-linear-gradient(left, #F60, #FFC); 
background: linear-gradient(left, #F60, #FFC); 
margin:0px 0px 30px;
}
 
.diagonal{ 
width: 250px; 
height: 100px; 
background:#F60; 
background: -webkit-linear-gradient(bottom left, #F60, #FFC); 
background: -ms-linear-gradient(bottom left, #F60, #FFC); 
background: linear-gradient(to top right, #F60, #FFC); 
margin:0px 0px 30px;
}
 
.multiple_colors{ 
width: 250px; 
height: 100px; 
background:#F60; 
background: -webkit-linear-gradient(#F60, #0099da, #F60); 
background: -ms-linear-gradient(#F60, #0099da, #F60); 
background: linear-gradient(#F60, #0099da, #F60); 
margin:0px 0px 30px;
}
 
.multiple_colors_2{ 
width: 250px; 
height: 100px; 
background:#F60; 
background: -webkit-linear-gradient(#F60 30%, #0099da 70%, #F60 40%); 
background: -ms-linear-gradient(#F60 30%, #0099da 70%, #F60 40%); 
background: linear-gradient(#F60 30%, #0099da 70%, #F60 40%); 
}
 
 
</style>

</head>
<body>

    <h4>Linear Gradient -Top to Bottom</h4>
    <div class="top_to_bottom"></div>
    
    <h4>Linear Gradient -Left to Right</h4>
    <div class="left_to_right"></div>
    
    <h4>Linear Gradient - Diagonal</h4>
    <div class="diagonal"></div>
    
    <h4>Linear Gradient - Multiple Colors</h4>
    <div class="multiple_colors"></div>
    
    <div class="multiple_colors_2"></div>
    
    
</body>
</html>

Output :

Linear Gradient -Top to Bottom

Linear Gradient -Left to Right

Linear Gradient - Diagonal

Linear Gradient - Multiple Colors

Radial Gradients

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.

<!DOCTYPE html>
<head>
<title>Radial Gradients</title>

<style type="text/css">      
.radial_gradient {
height: 150px;
width: 300px;
background: -webkit-radial-gradient(#F60 10%, #FC0 25%, #0099da 60%); 
background: -o-radial-gradient(#F60 10%, #FC0 25%, #0099da 60%); 
background: -moz-radial-gradient(#F60 10%, #FC0 15%, #0099da 60%); 
background: radial-gradient(#F60 10%, #FC0 25%, #0099da 60%); 
 }
</style>
 
</head>
<body>
 
      <div class="radial_gradient"></div>
      
</body>
</html>

Output :

CSS3 Tutorial