CSS3 Gradients Walkthrough

You can find gradients on lots of websites and a while ago all these gradients were images. Today we can replace these background-images with CSS3 Gradients.

Advantages and disadvantages of CSS3 Gradients

First of all CSS3 gradients improve your loading time because you need less HTTP requests for images. Secondly CSS3 gradients are a lot more flexible than images. A disadvantage of using images is also the fact that you have to edit the image even for small changes. The biggest problem with CSS3 gradients is that they are not compatible with all old browsers. If you have no problem with that CSS3 gradients are almost perfect for you. You should also know that these gradients have a syntax that is a little bit complicated, especially when we start adding prefixes for better browser support.

Getting started

CSS3 gradients are usually specified as a value for background-image. The following example shows the very basic syntax.

This gradient would go from the top to the bottom, start with red and end with yellow. This syntax-variant is supported by Firefox 16+, Chrome 26+, IE 10+ and Opera 12.1+. If we want to make this work in the newer Safari versions we need to add the -webkit- prefix. Note that this prefix is not added to the background-image property but to linear-gradient. Also note that this still doesn't change the fact the we need to specify background-image twice.

You can also specify more than two colors for a gradient. If all colors should fill the same amount of space you just specify all colors in a row separating them with commas.

By using the so-called color-stops you can define when a specific color should be reached. These specifications are defined directly after the color that they should be applied to.

As you can see the color red is already reached at 15%. The default value for the first color is 0% and the default value for the last color is 100%. The result of the last example is therefore equal to the result of the following one:

In our examples the color stops were defined by percentages which are oriented towards the gradients which adjust themselves based on the element size (and the value of background-size). This means that it doesn't matter how high the element is - the color black will be reached at 20% of the height. You could also use pixel-values, but they are not flexible.

One can also use the same color-stop percentage twice: This means that the color will change directly at that point and there won't be a smooth color transition.

In this case the gradient goes from black to red, then it directly changes to yellow and smoothly fades to orange. These direct transitions are useful to create patterns. You could also use them to create some basic flags. For example the code for the Dutch flag would be:

Specifying the direction

By default a gradient goes from the top to the bottom of an element. Other directions can be set with keywords in the beginning. If we want to create a gradient that goes from left to right we use to right.

The old syntax-variant looks a bit different. Formerly the start-point was defined instead of the end-point. This older syntax has to be used for Safari (-webkit-) because Safari doesn't support the new syntax yet.

The following code will create a gradient from left to right in all modern browsers.

You can also specify oblique gradients this way. The following code will create a gradient that goes from left top to right bottom. The first line is the Safari-variant, the second line the new version.

In most cases the basic keywords (top, bottom, left, right, center) are enough to create the gradient that you need. You can also use degree values for specific directions.

Degree values

First of all we show you some basic degree values: 0deg is equivalent to to top, 90deg is equivalent to to right and 180deg is equivalent to to bottom. Of course the other specific values are more interesting. Degree values in the new syntax version work different than those in the old version. The change in the syntax has been made to make these degree values work the same in other CSS3 properties. Luckily there is a formula that makes converting values easier: 90 - a = b. In this formula a is the standard value and b the value for the old syntax. The following example creates a gradient from left to right in all modern browsers using degree values.

More browser support and fallbacks

You should add a background-color fallback for older browsers. Usually one takes a color that is something between the gradient colors. If you would use red and yellow you should specify an orange background-color. Make sure that the background-color is specified before the background-images.

In the previous examples our code should work in all new browser versions. If you want to add extra support for older Firefox, Chrome and Opera versions you need to add more prefixes. For older Firefox versions you need:

For Opera versions before 12.1 you need:

For older Google Chrome versions you also use the -webkit- prefix:

Important: For all these prefixes we have to use the old syntax (For example left instead of to right). You should use the new syntax for the version without prefixes.

Older WebKit Browsers

So far we have only used two syntax-variants. You possibly have to add a third variant for older WebKit browsers. CSS gradients were invented by the WebKit-Team. The original syntax which has been defined by the WebKit team was implemented in Chrome 10 and Safari 5.1. This syntax has not been adopted by the W3C. Usually you can ignore this Syntax, but older Smartphones (for example Android versions before 3) only support this old syntax. The following example will create a gradient with the former WebKit syntax. Note that the function is -webkit-gradient instead of -webkit-linear-gradient. The gradient-type is a specification in the brackets (in this case linear).

Make sure that the newer -webkit- syntax comes after the older one and the standard syntax is the last rule. You should use an order like the following one: background-color fallback, old -webkit- prefix, new -webkit- prefix, -o- prefix, -moz- prefix, standard version without prefix. Here is an additional example:

Older Internet Explorers

For older Internet Explorer versions (10-) you need other fallbacks. First of all you can use the filter property which works in old versions including IE9.

You could also use SVG gradients. In this walkthrough we won't write about SVG gradients, but if you want more information on that topic you can visit this link.

Other Gradient forms

The most used gradients are linear-gradients but you can also create radial gradients with radial-gradient.

Our example will create a gradient that starts with red in the center and elliptically fades to the border where it reaches yellow.

You can also create gradients that are repeated. The following code defines a gradient that goes from red to yellow. Yellow should be reached after 20px, which means that the base gradient is 20px high. repeating-linear-gradient will repeat the base gradient until it fills the whole element.

.test{
background-image: -webkit-repeating-linear-gradient(red, yellow 25px);
background-image: repeating-linear-gradient(red, yellow 25px);
}

You can also create repeating radial gradients with repeating-radial-gradient. In the following example the radial gradient starts with white in the center and stays white for 10px. Then the gradient starts and reaches green after 20px. Then it is repeated. This will create multiple repeating circles from small to big. Note that some repeating radial gradients look a bit inaccurate. Hopefully this will change in newer browsers.

.test{
background-image: -webkit-repeating-radial-gradient(white 10px, green 20px);
background-image: repeating-radial-gradient(white 10px, green 20px);
}

You could also create repeating gradients with background-size and background-repeat. If you then also add the repeating gradients inside the repeated background parts you can create lots of patterns. You can see some demos on this link.

Short conclusion

All in all CSS3 gradients are very useful in some cases. The most important syntax variant that you should use is the newest, because it's already in the "W3C Candidate Recommendation" state. We also recommend using a CSS3 gradient generator which can make your CSS3 gradient work a lot easier: Link to CSS3 gradient generator.