CODEWITHSUNDEEP
cssbackgroundgradient
masgrimes
masgrimes

Reputation: 74

Linear gradient with one color being completely transparent?

I'm trying to make theme footer similar to that on http://focuslabllc.com/journal.

However, instead of having a color for the section on the left, I'd like to use an image.

Is there a way to layer backgrounds using css so that the bottom layer is an image, and then a gradient background above that which will be transparent on one end and colored from 60% on (to the right)?

Perhaps more simply, can you have a linear gradient background with transparency for only one color?

Upvotes: 0

Views: 4980

Answers (1)

KatieK
KatieK

Reputation: 13853

Yes, absolutely. You'll need to combine the syntax for multiple background images (separate declarations with commas, top layers first) with that for a gradient in RGBA colors. I like to use an online generator for making gradients, such as http://colorzilla.com/gradient-editor/.

Here is an example:

background: linear-gradient(to right, rgba(167,207,223,0) 0%,rgba(35,83,138,0.95) 100%), url(http://placekitten.com/610/600);

And here's a live demo: http://codepen.io/KatieK2/pen/pHkFe

Upvotes: 3

Related Questions