Gradients are background Images!

For the first few years I wrote CSS, I couldn’t wrap my head around how gradients really worked.

Also, why on earth does the property name say,background-image?

I had no idea.

Well, now I’ll save you the stress. Allow me explain it to you.

Gradients in CSS are images!

Like any other image type used with the backgroud-image property, gradients are just images! Think .png , .jpeg etc.

Allow that sink in for a bit.

While this may not interest you in any way, let me show you one darn good use of this.

Multiple Backgrounds with Gradients

One of the benefits of gradients being background images is the ability to mix them with other image formats in a multiple background-image declaration.

Take a look at this:

.bg {
  background: linear-gradient(rgba(192,57,43 ,0.8), rgba(44,62,80 ,0.8)),
    					url("http://i.imgur.com/tBhfy0L.jpg") 0% 0%/cover no-repeat 
}

What do you make of it?

The declaration above will apply both backgrounds to the element. As such you have an image behind a gradient blend!