Background styles overview

 

In the Background section of the Styles panel, you can set various properties to define the background of an element:

  • Background color
  • Background image
  • Background gradients
  • Background overlay solid color
Webflow Background Styles

Background color

Webflow Background Styles

You can set a background color on any element except for images and videos. If you set a background color on any parent element, like the Body, most child elements will appear to have the same background color. That’s because elements by default have a transparent background.

You can set a background color using the color picker in the Background Section of the Styles panel. You can choose any web color and even choose the opacity of your color.

A background color can also be added to text elements or specific text content inside of a text element.

Background image

Webflow Background Styles

In the Background section you can also add a background image. Choose from a variety of options to adjust the appearance of your background image.

Learn more about background images.

Background gradient

Webflow Background Styles

You can also add a background gradient from the Background section. Adding opacity to the gradient stops allows you to create special effects on top of background images.

Learn more about background gradients.

Background overlay solid color

Webflow Background Styles

If you want to add an overlay a solid or transparent color over any of your background images, you can choose Add Solid Color under the Background section. Just choose a color and set an opacity value.

Layering images and gradients

You can add and stack a number of the above background properties to create unique backgrounds.

Order of background layers

Click and drag the dotted vertical line and drag to modify the stacking order of the different layers.

Visibility of background layers

Click on the eye icon to toggle the visibility of the layers.

Deleting background layers

To delete any layer, just click on the trash can icon.