HTML Dog
Skip to navigation

Gradients

Images showing a smooth dissolve from one color to another are plastered all over the web. However, CSS 3 allows you to place them in your designs without having to create an actual image file.

There is no special property for this; you simply use the background or background-image property and define your gradient in its value. You can create both linear and radial gradients this way.

Linear gradients

For an even spread of two colors, fading from one at the top to another at the bottom, a declaration can simply be something like:


background: linear-gradient(yellow, red);
A simple yellow-to-red linear gradient background.

To manipulate the angle of the fading, you slot in “to” and the destination you want the transition to head to. You can head to one side:


background: linear-gradient(to right, orange, red);

Or one corner:


background: linear-gradient(to bottom right, orange, red);

Or any angle that tickles your fancy:


background: linear-gradient(20deg, orange, red);

And why stop at two colors? Specify as many as you dare:


background: linear-gradient(hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%));
A colorful gradient extravaganza.

Radial gradients

Radial gradients, with one color starting from a central point and fading to another color, use a similar syntax:


background: radial-gradient(yellow, green);
A simple yellow-to-green radial gradient background.

You can also specify the shape of the fade. By default it is an ellipse, spreading to fill the background box, but you can force it to be circular, regardless of the shape of the box:


background: radial-gradient(circle, yellow, green);
A circular radial gradient.

Using “closest-side”, “closest-corner”, “farthest-side” and “farthest-corner” you can also specify if the gradient is contained by the sides or corners of the box nearest to or furthest away from the origin:


background: radial-gradient(circle closest-side, yellow, green);

And if you wanted to place the origin of the gradient somewhere specific, you can also use “at”:


background: radial-gradient(at top left, yellow, green);
A radial gradient emanating from the top-left corner of a box.

Color stops

If you don’t want a uniform blend across your gradient, you can specify exactly where in the gradient each color kicks in, straight after each color, starting at “0” and ending at “100%” (although lengths can also be used).

So, just to make it clear before tinkering:

That’s because, when the positions are stated in these examples, they evenly space out the colors, which is the default when no color stops are explicitly defined.

So, to get on with that tinkering, you can pull and stretch away with those stops:


background: linear-gradient(135deg, hsl(36,100%,50%) 10%, hsl(72,100%,50%) 60%, white 90%);
Colour stops in a linear gradient.

Repeating gradients

A single gradient will fill a box with the previous methods but you can use “repeating-linear-gradient” and “repeating-linear-gradient” to build on the color stops and, well, repeat the gradient.

For basic bars of black-and-white bars, for example:


background: repeating-linear-gradient(white, black 15px, white 30px);
A repeating linear gradient.

Or something a bit more solid:


background: repeating-radial-gradient(black, black 15px, white 15px, white 30px);
A repeating radial gradient.