css gradient

Demo css gradient

by Kocsten

HTML

<div class="grad1" style="float:left; width:100px; height:100px; border:1px solid #000000; margin:10px;">top</div>
<div class="grad2" style="float:left; width:100px; height:100px; border:1px solid #000000; margin:10px;">bottom</div>
<div class="grad3" style="float:left; width:100px; height:100px; border:1px solid #000000; margin:10px;">left</div>
<div style="clear:both;"></div>
<div class="grad4" style="float:left; width:100px; height:100px; border:1px solid #000000; margin:10px;">right</div>
<div class="grad5" style="float:left; width:100px; height:100px; border:1px solid #000000; margin:10px;">top left</div>
<div class="grad6" style="float:left; width:100px; height:100px; border:1px solid #000000; margin:10px;">bottom right</div>
<div style="clear:both;"></div>
<div class="grad7" style="float:left; width:100px; height:100px; border:1px solid #000000; margin:10px;">top right</div>
<div class="grad8" style="float:left; width:100px; height:100px; border:1px solid #000000; margin:10px;">bottom left</div>
<div class="grad9" style="float:left; width:100px; height:100px; border:1px solid #000000; margin:10px;">transparent rgba</div>

CSS

@charset "utf-8";
*{margin:0; padding:0;}
body{color:#ffffff;}
/* Сверху */
.grad1{
	/* Firefox 3.6+ */
	background:-moz-linear-gradient(top, #00DB3A, #565595);
	/* Chrome 10+, Safari 5.1+ */
	background:-webkit-linear-gradient(top, #00DB3A, #565595);
	/* Opera 11.10+ */
	background:-o-linear-gradient(top, #00DB3A, #565595);
	/* IE10 */
	background:-ms-linear-gradient(top, #00DB3A, #565595);
	/* CSS3 */
	background:linear-gradient(top, #00DB3A, #565595);
	/* Chrome 1-9, Safari 4-5 */
	background:-webkit-gradient(linear, left top, left bottom, 
                color-stop(0%,#00DB3A), color-stop(100%,#565595));
	filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#00DB3A,endColorstr=#565595,GradientType=0);
}
/* Снизу */
.grad2{
	background:-moz-linear-gradient(bottom, #00DB3A, #565595);
	background:-webkit-linear-gradient(bottom, #00DB3A, #565595);
	background:-o-linear-gradient(bottom, #00DB3A, #565595);
	background:-ms-linear-gradient(bottom, #00DB3A, #565595);
	background:linear-gradient(bottom, #00DB3A, #565595);
	background:-webkit-gradient(linear, left bottom, left top,  
                color-stop(0%,#00DB3A), color-stop(100%,#565595));
	filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#565595,endColorstr=#00DB3A,GradientType=0);
}
/* Слева */
.grad3{
	background:-moz-linear-gradient(left, #00DB3A, #565595);
	background:-webkit-linear-gradient(left, #00DB3A, #565595);
	background:-o-linear-gradient(left, #00DB3A, #565595);
	background:-ms-linear-gradient(left, #00DB3A, #565595);
	background:linear-gradient(left, #00DB3A, #565595);
	background:-webkit-gradient(linear, left bottom, right bottom,  
                color-stop(0%,#00DB3A), color-stop(100%,#565595));
	filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#00DB3A,endColorstr=#565595,GradientType=1);
}
/* Справа */
.grad4{
	background:-moz-linear-gradient(right, #00DB3A,...