CSS gradients have come a long way from the hacks we used to use ( background-image: url(gradient.png) ). Modern gradients are vector, resolution-independent, and more powerful than most developers realise. Here's everything you need to know.

Linear gradients

The most common type. A linear gradient blends between colours along a straight line.

/* Basic: top to bottom */ background : linear-gradient ( red , blue );

/* Specific angle */ background : linear-gradient ( 45 deg , red , blue );

/* Named directions */ background : linear-gradient ( to right , red , blue ); background : linear-gradient ( to bottom right , red , blue );

/* Multiple colour stops */ background : linear-gradient ( to right , red , yellow 40 %, green );

Enter fullscreen mode

Exit fullscreen mode

The direction can be:

An angle ( 45deg , 180deg ) — 0deg is bottom-to-top, 90deg is left-to-right

A keyword direction ( to right , to bottom , to top left )

Colour stops and positions

By default, colours are evenly distributed.…