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.…