Web Developer's Reference Guide

Gradients

For those who didn't know, CSS gradients are actually images. But these images are created by the browser the moment it sees a gradient color declared. The thing with these images is that they are created on the fly and do not cause any HTTP requests.

CSS gradients are so powerful that we can not only create gradients in any direction and various shapes, but we can also create amazing patterns.

With this being said, Lea Verou has an amazing library of CSS patterns created with gradients everyone reading this book should bookmark. Check it out here: http://tiny.cc/leave-verou-css3-patterns

Let's see how to create gradients in CSS.

linear-gradient()

The linear-gradient() CSS function creates a gradient that transitions from one color to another ...