New feature: background color overlays

[Adrian (Adrian Biedrzycki)]

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.

[samliew (samliew.com)]

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

Original discussions/request:

Color overlay on section background?

Hey guys, This might be a stupid question and I bet I’m just missing something. I want to overlay a semi transparent color onto the background of a section. The blue section on this site is an example. http://snowballsummit.webflow.com Do I need to prep an image with this color overlay in photoshop to add it? I am planning on using the same image and having different color overlays for each section if possible. When I go and add fill, it fills behind the background image. Is there a way t…

Background Color Overlay Feature

Hello All! @bart and I were chatting tonight about how much we use gradients over background images to create a solid color overlay. We do this by simply choosing the same color on both ends of the gradient with the same opacity. That got me to thinking wouldn’t it be fairly easy to have a parameter in webflow that did this automatically? Think of a single color picker with opacity that simply creates the CSS for a gradient with the same color on both ends. Here’s how I thought it might loo…

[Adrian (Adrian Biedrzycki)]

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

[DFink (Dave)]

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

[clivulus (Fernando Clívülus)]

Incredible. Great work!

[Jon_Lehman]

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

[Veloce (Kirk)]

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

[904TECHNOLOGY (John Sellers)]

Great feature!!!

[thiago (Thiago Maia)]

thanks! good on ya!!!

[oceanandsnowdesign (William D'Aust)]

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.

[JFly (Jeff)]

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

[seank (Sean Watkins)]

OMG OMG OMG !! Thanks GUYS!

[findyourcraving (Celia Cheng)]

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

[StevenP (Steven Victor Sigvard Persson)]

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

The new overlay feature to work on sections with BG image on template pages

Ah, allright! That was something out of my knowledge but it’s always nice to learn something new…wether it’s good or bad…

[thegrafiqlyfe (Grafiq Lyfe)]

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?

[jawtab (Jay Bussiere)]

but the other way was so much fun… RIP.

[Samuel_Gualtieri]

So happy for this! Thanks Webflow team!

[KNOWLIGATION (Alex)]

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.

[tubes]

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?

[DFink (Dave)]

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.