Setting Gradients with CSS

During this tutorial I’m going to be introducing you to CSS3 Gradients and showing you how Add Gradients. Linear gradients change color evenly along a straight line. The gradient is defined by an axis, conveniently called the gradient line, and any specified angles.

Use proprietary CSS properties to set gradients in the background of elements.

div.building {
border: 1px solid #666;
float: left;
width: 300px;
height: 300px;
margin: 20px;
background-image: -webkit-gradient(radial,center center,900,center
bottom,0,from(#0cf),to(white));
background-image: -moz-radial-gradient(center,900px,center
bottom,0,from(#0cf),to(white));
background-repeat: no-repeat;
}

As of this writing, CSS-enabled gradients are in Safari 4 and later and Firefox 3.6 and later through the use of their respective vendor-based properties.

Setting gradients in Safari :
In Safari, cite -webkit-gradient(); after the background or background-image property:

background-image: -webkit-gradient();

hen developing a web page design with a CSS-enabled gradient, I recommend using background-image over the background shorthand property so as not to lock out other background-related properties, such as those that set the background-color value of the element.


Setting gradients in Firefox :
Whereas Safari sets the type of gradient within its own proprietary property, Firefox has properties for both types of gradients: -moz-radial-gradient() and -moz-radiallinear(). Unlike the Safari gradient, you can use background-position shorthand values and unit values when setting the starting and stopping points of gradients.

Transparency with gradients :
Another interesting aspect of Firefox’s implementation of CSS gradients concerns transparency. If you don’t set a background color on an element, you can set the background color (or colors) for a gradient to be transparent by pecifying the color with RGBA:

background-image: -moz-linear-gradient(left top, left bottom,
from(rgba(153,51,0,0.3)), to(#6b3703), color-stop(0.5, #903000));

[ Since this Solution uses CSS properties that are available in only some of the more recent browsers, a workaround is to create gradients in a digital imaging program and set them through the background of images. ]