programplug Logo




CSS Gradient

CSS gradient give us an easy way to display transition between two or more than specified colors.


Types of gradient

In CSS3 there are two types of gradient which are given below:
  • Linear gradients(up/own/digonal/left/right)
  • Radical gradients(used in the center)
Linear gradients:

Linear gradient are allow two or more colors to arrange in a linear format like top to bottom.

Here is the Example of Top to bottom:
<html> 
 <head>  
<style>  
#gradi1 
{
height: 80px;
background: -webkit-linear-gradient(red,blue);
background: -o-linear-gradient(red,blue);
background: -moz-linear-gradient(red,blue); 
background: linear-gradient(red,blue); 
}
</style>  
</head>   
<body> 
</div id="gradi1"></div>       
</body> 
</html> 

Left to right Example in Linear gradient

To change the background-color if we want the window width is less than 500 pixels.

<html> 
<head>  
<style>  
#gradi1
{
height: 80px;
background: -webkit-linear-gradient(left, red,blue);
background: -o-linear-gradient(red,blue);
background: -moz-linear-gradient(red,blue); 
background: linear-gradient(to right,red,blue); 
}
</style>  
</head>   
<body> 
</div id="gardi1"></div>       
</body> 
 </html> 
  

Diagonal:
The Diagonal linear gradient starts at top left and to bottom right.

Example:
<html> 
<head>  
<style>  
#gradi1
{
height: 80px;
background: -webkit-linear-gradient(left top, red,blue);
background: -o-linear-gradient(red,blue);
background: -moz-linear-gradient(red,blue); 
background: linear-gradient(to bottom right,red,blue); 
}
</style>  
</head>   
<body> 
</div id="gradi1"></div>       
</body> 
 </html> 

Angular Linear gradient:
You can also set an angle by defining linear gradient. Example:

Example:
<html> 
<head>  
<style>  
#gradi1 
{
height: 80px;
background: -webkit-linear-gradient(360deg, red,blue);
background: -o-linear-gradient(360deg,red,blue);
background: -moz-linear-gradient(360deg,red,blue); 
background: linear-gradient(360deg,red,blue); 
}
</style>  
</head>   
<body> 
</div id="gradi1"></div>       
</body> 
 </html> 


Radial gradients:
The radical gradient property is defined by the center and to create the radial gradient there should be atleast two color stops. Let's take a example to demonstrate the redial gradients.

<html> 
  <head>  
<style>  
#gradi1 
{
height: 100px;
width: 200px
background: -webkit-linear-gradient(yellow, red,blue);
background: -o-linear-gradient(yellow,red,blue);
background: -moz-linear-gradient(yellow,red,blue); 
background: linear-gradient(yellow,red,blue); 
}
</style>  
</head>   
<body> 
</div id="gradi1"></div>       
</body> 
 </html> 






Our Services

Developing Cheapest Websites
Offer Digital Marketing
Provide College Projects
Attractive Website Developing
Summer Training,Industrial Training
SCO,SMO

Contact Us

Dehradun Uttarakhand India
www.programplug.com
info@programplug.com
08534019974
Designed By : Mridul Gupta

Other Link

About Us

Contact Us

Disclaimer

Privacy Policy