CSS Gradients in HTML5 Code Example

Gradients in CSS3 are valuable addition supported by all modern browsers. No image needed!

.gradientBox {
background: #ffb260; /* older browsers background */
background: -moz-linear-gradient(#ffb260, #ff7f13);
background: -o-linear-gradient(#ffb260, #ff7f13);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffb260), to(#ff7f13));/* Older webkit syntax */
background: -webkit-linear-gradient(#ffb260, #ff7f13);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb260', endColorstr='#ff7f13',GradientType=0 );
}

Note that gradients filter code will not show in IE7 and below. It will show in IE8 and later.

Here’s what it will produce:

There are more things that can be done, like gradients positions and gradient types, will post about it later here. This tool is excellent to create more complex gradients.