Gradient top to Bottom

CSS Code:

.gradient-top-to-bottom{ 
width: 300px;
padding: 20px;
border-top: 5px solid #000;
border-bottom: 5px solid #ccc;

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#ccc));
background-image: -webkit-linear-gradient(#000, #ccc);
background-image: -moz-linear-gradient(#000, #ccc),
-moz-linear-gradient(#000, #ccc);
background-image: -o-linear-gradient(#000, #ccc),
-o-linear-gradient(#000, #ccc);
background-image: linear-gradient(#000, #ccc),
linear-gradient(#000, #ccc);
-moz-background-size:5px 100%;
background-size:5px 100%;
background-position:0 0, 100% 0;
background-repeat:no-repeat;
}
 

HTML
<div class="gradient-top-to-bottom">Your Text goes here.</div> 

Output:
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. commodo vitae, ornare sit amet, wisi.


Click here to know more about CSS3 Border Property

Click here to know more about Gradient Background.

Top