Yesterday, i have tested css grandient effect on div background.
Here's an example
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CSS div background gradient effect</title>
<style>
hmtl, body
{
font-family: Verdana;
font-weight: 1.1em;
}
#divEffect
{
background-color: #eee;
background: -moz-linear-gradient(top, #eee, #999);
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#999));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(
startColorstr=#eee, endColorstr=#999, GradientType=1)";
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#eeeeee', EndColorStr='#999999', GradientType=0);
color: #000000;
padding: 15px;
min-height: 250px;
width: 400px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>
CSS div background gradient effect</h2>
<div id="divEffect">
Welcome to aspxtutorial.com
</div>
</div>
</form>
</body>
</html>
I have tested css gradient effect in
- Firefox
- Safari
- Chrome
- IE (7,8 & 9)
Note:If you have better solution,please post here to share with us.
Output
Download
cssGradientEffect.zip (1.07 kb)
Live demo