CSS3 Gradient Background

Left to Right Gradient

CSS Code:

.gradient-left-to-right{ 
width: 600px;
padding: 20px;
color: #FFF;
border:1px solid #aaa;
border-radius:15px;

background: #aaa;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', 
endColorstr='#aaaaaa',GradientType=1); 
background-image: -webkit-gradient(linear, left center, rigth center, 
from(#000), to(#aaa));
background-image: -webkit-linear-gradient(left, #111, #aaa);
background-image: -moz-linear-gradient(left, #111, #aaa);
background-image: -o-linear-gradient(left, #111, #aaa);
background-image: -ms-linear-gradient(left, #111, #aaa);
}
 

HTML

<div class="gradient-left-to-right">Your Text goes here.</div> 

Output:

Right to Left Gradient

CSS Code:

.gradient-right-to-left{ 
width: 600px;
padding: 20px;
color: #FFF;
border:1px solid #aaa;
border-radius:15px;

background: #aaa;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', 
endColorstr='#111111', GradientType=1);
background-image: -webkit-gradient(linear, right center, left center, 
from(#111), to(#aaa));
background-image: -webkit-linear-gradient(right, #111, #aaa);
background-image: -moz-linear-gradient(right, #111, #aaa);
background-image: -o-linear-gradient(right, #111, #aaa);
background-image: -ms-linear-gradient(right, #111, #aaa);
}
 

HTML

<div class="gradient-right-to-left">Your Text goes here.</div> 

Output:

Top to Bottom Gradient

CSS Code:

.gradient-top-to-bottom{ 
width: 600px;
padding: 20px;
color: #FFF;
border:1px solid #aaa;
border-radius:15px;

background: #aaa;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', 
endColorstr='#aaaaaa', GradientType=0);
background-image: -webkit-gradient(linear, center top, center bottom, 
from(#111), to(#aaa));
background-image: -webkit-linear-gradient(top, #111, #aaa);
background-image: -moz-linear-gradient(top, #111, #aaa);
background-image: -o-linear-gradient(top, #111, #aaa);
background-image: -ms-linear-gradient(top, #111, #aaa);
}
 

HTML

<div class="gradient-right-to-left">Your Text goes here.</div> 

Output:

Bottom To Top Gradient

CSS Code:

.gradient-bottom-to-top{ 
width: 600px;
padding: 20px;
color: #FFF;
border:1px solid #aaa;
border-radius:15px;

background: #aaa;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', 
endColorstr='#111111', GradientType=0); 
background-image: -webkit-gradient(linear, center bottom, center top, 
from(#111), to(#aaa));
background-image: -webkit-linear-gradient(bottom, #111, #aaa);
background-image: -moz-linear-gradient(bottom, #111, #aaa);
background-image: -o-linear-gradient(bottom, #111, #aaa);
background-image: -ms-linear-gradient(bottom, #111, #aaa);
}
 

HTML

<div class="gradient-right-to-left">Your Text goes here.</div> 

Output:

Gradient With Percentage (%)

CSS Code:

.gradient-50{ 
width: 600px;
padding: 20px;
color: #2393a7;
border:1px solid #aaa;
border-radius:15px;

background: #fff;
filter: progid:DXImageTransform.Microsoft.gradientWipe(gradientsize=0.5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', 
endColorstr='#aaaaaa', GradientType=1); 

background-image: -webkit-gradient(linear, left center, rigth center, 
from(#111), color-stop(50%, #fff));
background-image: -webkit-linear-gradient(left, #111, #fff 50%);
background-image: -moz-linear-gradient(left, #111, #fff 50%);
background-image: -o-linear-gradient(left, #111, #fff 50%);
background-image: -ms-linear-gradient(left, #111, #fff 50%);
}
 

HTML

<div class="gradient-50">Your Text goes here.</div> 

Output:

Left to Right Rainbow Gradient

CSS Code:

.gradient-rainbow{ 
width: 300px;
height: 250px;
padding: 20px;
color: #2393a7;
border:1px solid #aaa;
border-radius:15px;

background: -moz-linear-gradient(left, red, orange, yellow, green, 
blue, indigo, violet);
background: -webkit-gradient(linear, left center, right center, from(red), 
color-stop(14%, orange), color-stop(28%, yellow), color-stop(42%, green), 
color-stop(56%, blue), color-stop(70%, indigo), to(violet)); 
background: -o-linear-gradient(left, red, orange, yellow, green, 
blue, indigo, violet);
background: -ms-linear-gradient(left, red, orange, yellow, green, 
blue, indigo, violet);
}
 

HTML

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

Output:

Click here to know more about CSS3 Border Property

Click here to know more about Gradient Border.