Background gradients

In days gone by, to achieve a background gradient on an element, it was necessary to tile a thin, graphical slice of the gradient. It was a pain to tweak as it meant round trips into a graphics application, and then when a site was live, you would often experience a flash of unloaded gradient while the background image was fetched.

Thankfully, such hassle is now nothing more than a memory; with a CSS background-image gradient, things are far more flexible. CSS now enables us to create linear, radial, and conic background gradients, and repeating versions of each. Let’s look at how we can define them.

The specification for CSS Image Values and Replaced Content Module 4 can be found at https://www.w3.org/TR/css-images-4/.

The linear-gradient notation

The linear-gradient notation, in its simplest form, looks like this:

.linear-gradient {
  background: linear-gradient(red, blue);
}

This will create a linear gradient that...