Background color overlays

If you’ve ever wanted to add a solid or transparent color to the background of an element 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 Solid Color button.

‍Any color, any opacity — just a click away.

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

Now you can quickly and easily add a solid or transparent color to the background of any element — which is great for increasingly the legibility of text overlaid on images.

Resources