CSS3 - Gradients

Smooth transitions from one colour to another are now possible without needing any images. Both linear and radial gradients are possible (and you can even have the gradients repeat.

For linear gradients the first parameter defines either where the gradient starts (top, left, right, bottom) or where it finishes (by adding 'to' on the front). Two sides can be specified if you want the gradient to run diagonally. Alternatively you can specify an angle in degrees The second and third parameters identify the start and finish colours. If more than two colours are specified then the additional colours will be evenly spaced across the transition or you can add a size after any colour except the first and last to identify where that colour is to occur. You can define transparency gradients if you use rgba() to define the colours.

Radial gradients are somewhat simpler to define because the start and end positions don't need to be specified. If the first parameter is a colour then the gradient will be circular starting from the centre. There are other values that can be used as the first parameter that will affect the shape and the way that the colours change. You can specify circle or ellipse followed by a modifier such as closest-side or farthest-corner.

By adding repeating- to the front and specifying a position after every colour except the first you can define a linear or radial gradient for just a small part of the area and have that same gradient then repeat to fill the area.


background:linear-gradient(to bottom, #8dd2d9 , #58c0c7);
background:repeating-linear-gradient(-45deg, #de9dd4, #de9dd4 5px, white 5px, white 10px);
background:repeating-radial-gradient(#b8e7bf, #b8e7bf 5px, white 5px, white 10px);


All modern browsers implement this property. IE8 and IE9 are the only popular browser that don't.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow