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.
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.
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?