CSS3 Gradients

Since web 2.0 is the usage of gradients almost a must. Small background images were created for navigation menus, different sections or entire layouts. And when wanting to apply light changes like the height you needed to reconstruct the image(s). With CSS3 you can create gradient backgrounds and apply changes without much effort and it saves HTTP requests for images. Unfortunate do the layout engine not agree yet on the implementation of gradients.

Gradients

Gradients can have different types and colors and the syntax for the gradients differ from layout engine and it is applied to the background-image property of the element.

Gecko (Mozille Firefox) Gradient Syntax

for each gradient has the gecko (moz) engine a different property.

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

the syntax for a radial and repeating gradient is similar. Use -moz-radial-gradient, -moz-repeating-linear-gradient, -moz-repeating-radial-gradient

Webkit (Safari, Chrome) Gradient Syntax

webkit has one gradient property in which you can define the type of gradient you wish to use.

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

Parameters

• <type> this can be either linear or radial.
• <point> similar to background-position it can be expressed in a percentage, pixels or ‘left’, ‘center’ and ‘right’ for horizontal positioning and ‘top’, ‘center’ and ‘bottom’ for vertical positioning.when non determined it will always take the center
• <angle> expressed in degrees, grads or radians, see more at mozilla angle.
• <radius> the radius of the circle when using radial gradient.
• <stop> is a color in hex, rgb(a) or hsl(a) followed by an optional position in percentage or length on the gradient axis.

Linear Gradients Examples

All this information can be quite difficult to understand, therefore some examples below.  We start of with quite simple linear gradient. First a top to bottom gradient and then one from left to right and last a diagonal linear gradient.

background-image: -moz-linear-gradient(top, yellow, blue);
background-image: -webkit-gradient(linear, center top,center bottom, from(yellow), to(blue));

background-image: -moz-linear-gradient(left, yellow, blue);
background-image: -webkit-gradient(linear, left center,right center, from(yellow), to(blue));

background-image: -moz-linear-gradient(45deg, yellow, blue);
background-image: -webkit-gradient(linear, left top,right bottom, from(yellow), to(blue));

The following gradient takes 3 colors. For moz you define a percentage at what point the color should be, for webkit you define a color-stop with a percentage and a color. If you don’t specify a percentage in moz, the gecko engine will automatically proportion the colors over the element.

background-image: -moz-linear-gradient(left, yellow, red 70%, blue);
background-image: -webkit-gradient(linear, left center,right center, from(yellow), color-stop(70%, red), to(blue));

The example below has a color to transparant gradient. By using the rgba color from CSS3 you can define rgb colors with a transparancy as 4th parameter.

background-image: -moz-linear-gradient(left, yellow, rgba(0,0,0,0));
background-image: -webkit-gradient(linear, left center,right center, from(yellow), to(rgba(0,0,0,0)));

As last linear gradient we use the repeating gradient posibility. This is often used for backgrounds. Although it is quite simple for moz, it takes a lot of work for webkit. For webkit repeating linear gradient to look good, you need to specify each color twice alternated and proportioned the same. You also need to specify a size of you gradient to be repeated. Moz repeats the gradient infinitly.

background-image: -webkit-gradient(linear, left top,right bottom, from(yellow), color-stop(25%, yellow), color-stop(25%, blue), color-stop(50%, blue),color-stop(50%, yellow), color-stop(75%, yellow),color-stop(75%, blue), to(blue));
-webkit-background-size: 15px;
background-image: -moz-repeating-linear-gradient(top left -45deg, yellow, yellow 5px, blue 5px, blue 10px);

Radial Gradient Examples

Applying a radial gradient to an element is not always done easily. The syntax is difficult and although when done right you can get a nice result, it often doesn’t turn out that way. Drawing gradients in CSS3 start off with an inner circle and then possible different gradients till the outer circle. In the example below the inner circle is set to yellow and has a size of 10px radius from here on a gradient to the outer circle start, located at 50px and with a blue color. The circles locations are centered torwards the element, we will change the position more below. For the gecko engine we have to define that we want to create a circle, a ellipse is also possible. We also define the size of the gradient, that the element should either cover or contain the circle gradient. The following circles each have a increased radius start for the outer-circle of 20, this makes the gradient larger.

	background-image: -webkit-gradient(radial, center center, 10%, center center, 50%, from(yellow), to(blue));
	background-image: -moz-radial-gradient(center, circle contain, yellow 10%, blue 50%);

We can change the position of the inner and outer circle. When you don’t change the position from both circles equally you get some unexpected results. Notice that for the gecko engine you define pixels while for the webkit engine you don’t.

background-image: -webkit-gradient(radial, 20 80, 10, 20 80, 50, from(yellow), to(blue));
background-image: -moz-radial-gradient(20px 80px, circle closest-corner, yellow 10px, blue 50px);