New feature: background color overlays

If you’ve ever wanted to add a transparent color overlay over your background images on your Webflow sites, you’ve gotten used to creating a gradient overlay, then setting each stop to the same color, then picking an opacity.

Well, now you can say so long to a bunch of those clicks.

Because now there’s an easier way: the Add Overlay button.

Just scroll down to the Background section of the Styles panel (like always), click Add Overlay, and set your color and opacity. And it only takes a click.


I have already been seeing it in the designer. Kudos to the Webflow team for implementing this feature request so quickly!

Original discussions/request:


Thanks! We just wanted to make the announcement official :).


Great work!!! Love it and I’m amazed at how fast you guys made it a reality!

Incredible. Great work!

Awesome! I think most of us have probably been using a gradient made up of the same colors, nice new feature! Keep them coming! :smiley:

I can’t seem to make the :hover transition timing to work. Am I doing something wrong?

Great feature!!!

thanks! good on ya!!!

Yea i was making one of my normal gradients with the same color yesterday and noticed the new button! Thanks so much for always adding something shiny and new to make our jobs easier.

1 Like

Hey @Veloce - if you post this question in another thread I’d be happy to look at it.


Can I do the overlay on dynamic content? I have been trying and the overlay doesn’t show up.

No, at the moment it’s not possible to do it on dynamic content. See this thread:

Thanks for the new feature and time saver. I’m curious if it’s possible to make it so when you pick a color (from saved colors), it stays at the opacity it’s already set?

but the other way was so much fun… RIP.

1 Like

So happy for this! Thanks Webflow team!

1 Like

OMG I’m SOOOO Happy about this! Overlays are used quite a bit in design, and I’m stoked we can use them so easily now - already added one to a client site. Good stuff.


Transitions don’t seem to work with background overlays, only with colors or images. Is there a way to add this so that we can transition colors or transparency levels on hover?

Transitions don’t work on background images at all. You can put a div overlay with position absolute and show and hide it with an interaction.