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:
Awesome! I think most of us have probably been using a gradient made up of the same colors, nice new feature! Keep them coming! 
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.
Can I do the overlay on dynamic content? I have been trying and the overlay doesn't show up.
@findyourcraving
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?
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.
