CSS Gradients: A Complete Guide to Linear, Radial, and Conic Gradients

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 ); /* Name