How to Create a Solid Color Overlay in Webstudio Similar to Webflow?

Question

In Webflow, there’s an easy option on the right-hand panel to create a solid color section overlay by setting the background color and opacity for a Div Block that covers the parent container. I’m trying to achieve the same effect in Webstudio but can’t find a similar option. Only gradient

How do I create a solid color overlay in Webstudio that functions like Webflow’s overlay feature? Specifically, I’m looking for guidance on where to find this setting in Webstudio’s interface or the best alternative approach to accomplish this.

Any tips or instructions would be greatly appreciated!

John Siciliano · Answer

hey you need to add a gradient. you can create a gradient that uses the same two colors so its not a gradient visually

John Siciliano · Answer

in CSS, you can't overlay a solid color using background. Webflow just converts a single color to a gradient behind the scenes

John Siciliano · Answer

eg background: linear-gradient(black, black);

John Siciliano · Answer

just replace both blacks with whatever color you want to overlay and add that as a gradient background

Oleg Isonen · Answer

we really need to implement the gradient UI we already designed

Oleg Isonen · Answer

hope we can start with that next week

Daniel · Answer

thanks John I understand the technical POV of it, but I'm a non-coder don't know HTML or CSS & don't know how to implement. It's way easier on webflow even if it does some things in the backend.

Daniel · Answer

can't wait! would love to see more non-coder options in webstudio.

Join the Webstudio community

How to Create a Solid Color Overlay in Webstudio Similar to Webflow?