Background designs

An overview of the background styles you can set on an element: color, images, gradients, color overlays, and videos.

*WARNING at 01:23 — this part may impact individuals with visual sensitivities. Viewer discretion is recommended.

Controlling the appearance and readability by setting the backdrop on an element. Within the Design Elements section of the Customization settings, you have the ability to incorporate a backdrop image, gradient, or color to most components (with the exception of media components such as video and photo).

The Design Elements section of the Customization settings. The shade has been set to see-through.

Here’s what you’ll learn:

  1. Backdrop shade
  2. Backdrop artwork
  3. Blend
  4. Shade overlay
  5. Backdrop film

Backdrop shade

You have the option to apply a backdrop shade on any component except for artwork and films (although you can utilize artwork and films as backdrops). You can implement a backdrop shade to any component by submitting a shade value (e.g., hex, rgba, or color title) or by opting a shade utilizing the shade picker. A backdrop shade can also be integrated into textual components or specific textual details within a textual component.

Sometimes, you might prefer consistent backdrop shades across your site. This is where the Body Section (All pages) label proves beneficial.

The Selector field dropdown in the Style panel, highlighting the Body Section (All pages) tag.

You can design the Body Section (All pages) label in 2 methods:

  1. Choose the Body component and pick the Body Section (All pages) label from the Selector field dropdown in the Design settings
  2. Select any component and select the Body Section (All pages) label from the inheritance menu — all components inherit designs from the Body Section (All pages) label

Once you determine the backdrop on the Body Section (All pages), any component you introduce will default to this backdrop design. And you can modify not just the backdrop shade, but any design characteristic. Discover more about customizing label components in our tutorial on HTML labels.

Most components have a translucent backdrop by default. Some components, like the Slider unit, come with a default backdrop shade which you can override by submitting a backdrop shade on the main slider component.

Backdrop artwork

Webflow provides numerous choices for modifying your backdrop artwork.

The menu for incorporating a backdrop artwork in the Design Elements section of the Customization settings.

To introduce or alter the backdrop artwork:

  1. Go to Design Elements in the Design settings
  2. Hit Choose artwork to pick artwork from the Resource panel.
  3. Tick the box for @2x (to set the artwork width to half its original size for sharp rendering on HiDPI devices)

To utilize a backdrop film instead, substitute the component with a backdrop film component in the Add panel.

Backdrop artwork size

Size alternatives are highlighted in the menu for incorporating a backdrop artwork in the Design Elements section of the Customization settings.

To define the dimensions of the backdrop artwork, utilize customized dimensions or one of the presets:

  • Custom decides the width and/or height of the backdrop artwork. Percentage values can also be utilized. To adjust the backdrop artwork to scale larger than the unit, use any percentage greater than 100%.
  • Cover scales the artwork to fill and cover the entire backdrop of the component, overriding any specified width and height. The artwork may be cropped, based on the aspect ratio of the component, the screen size, and the artwork.
  • Contain scales your backdrop artwork to stay contained within the component. This value also overrides any specified width and height.
A comparison of the “Cover” and “Contain” choices for backdrop artwork scaling. “Cover” scales the artwork to fill and cover the entire backdrop of the component, while “Contain” scales the artwork to stay contained within the component.

Backdrop artwork position

By default, a backdrop artwork is situated at the top-left corner of a component. Adjust the position of the backdrop to modify how the artwork appears across various screen sizes.

You can align the artwork vertically and horizontally.

The menu shows highlighted position settings for adding a background image in the Backgrounds section of the Style panel. Both the Left and Top positions are set to 50%.

To change the position of the background image manually, you can input a value for the horizontal position (left) and the vertical position (top). You have the option to adjust the unit of the values between px, % (default), VW, and VH.

Tile

By default, a background image is replicated both vertically and horizontally.

A landscape background is horizontally tiled on the homepage of an example photography website.

You can opt to repeat the background either horizontally, vertically, or not at all.

The settings for Tile and Fixed or Not fixed within the Background section of the Style panel.

Fixed or scroll

In the Background settings, you can select the background image’s behavior on scrolling:

  1. Not fixed: the image scrolls with the page
  2. Fixed: the image remains in place while scrolling

All background images default to being Not fixed. Choosing Fixed ensures the image width is constrained by the viewport rather than the element bounds.

Gradients

Gradients can be applied independently or overlaid on an existing background color or image.

A linear gradient and image are highlighted within the “Image & gradient” in the Backgrounds section of the Style panel.

There are two types of gradients:

  1. Linear gradients
  2. Radial gradients

Both gradient varieties feature stops (or points) along the gradient where colors transition from one to another.

Settings for a linear gradient background. The gradient transitions from deep purple to transparent with a set angle of 180 degrees.

Note: Safari interprets and interpolates gradients with transparency as “transparent black”. Hence, the transparent color may appear black for Safari users.

Linear gradient

A linear gradient generates a colored gradient in one direction, controlled by the angle. You can modify the gradient angle by:

  1. Clicking and dragging the dot on the direction dial, or clicking anywhere on the dial to set the angle position
  2. Clicking the arrows to rotate the angle in 45-degree increments
  3. Entering the desired angle in the input field

Gradient stops

By using gradient stops, you can adjust the color and opacity of the gradient by selecting stops on the gradient bar. If there’s an underlying background image layer, it becomes visible when the opacity is reduced.

To introduce more colors to the gradient, add a stop to the gradient bar. You can include multiple stops by clicking anywhere on the gradient bar.

Gradient stops highlighted within linear gradient settings. There are 5 stops ranging from a periwinkle blue to a deep purple.

You can adjust the stop positions by dragging along the gradient bar.

To remove a stop:

  1. Long tap on the stop
  2. Drag the stop out of the gradient bar until the edges of the stop become transparent
  3. Release to delete the stop
Repeat

Enabling Repeat repeats the position and angle of the existing gradient.

The linear gradient from periwinkle to deep purple is repeated and vertically tiled on a mock webpage.

This is determined by the positions of the first and last stops. To create a more distinct repeating gradient, move the first or last stop away from the edge of the gradient bar.

Reverse

The reverse icon flips the positions of the stops.

The inverted icon is highlighted in linear gradient settings.

Concentric gradient

Concentric gradients form a gradient in a circular pattern.

An illustrative concentric gradient alongside its concentric gradient preferences in the Backgrounds portion of the Style panel.

The color breakpoint on the left represents the color displayed at the core of the concentric gradient.

Alignment

You can set the central point of the gradient by selecting one of the points in the alignment controller. For instance, you may press the central dot to align your image content.

Manual alignment settings for a concentric gradient.

You may also manually modify the alignment by entering values for the horizontal position (left) and the vertical position (top). You can also alter the unit of the values between the px, % (default), vw, and vh.

Dimension

The behavior of the gradient concerning the element’s border is governed by the preset dimensions. The presets include:

  • Proximate side: the gradient initiates from the core point towards the closest side
  • Proximate corner: the gradient commences from the core point to the closest corner
  • Farthest side: the gradient begins from the core point and extends until it reaches the farthest side
  • Farthest corner: the default setting. The gradient starts from the core point and extends until it reaches the farthest corner

Color tint

You can append a color tint to any of your backgrounds. Employ the color selector to designate a color, then define an opacity level.

Illustration of color tint within the Backgrounds segment of the Style panel. The color selected is rgba(0, 0, 0, 0.5).

Layering pictures and gradients

Incorporate and pile multiple background images, gradients, and color tints to craft stratified effects. To rearrange background layers, hover over the layer and tap the dotted vertical line on the left.

Tap the eye symbol to switch the visibility of the layers. To remove any layer, click the trash can “delete” icon.

A gradient and picture combination within “Image & gradient” in the Backgrounds segment of the Style panel. The “delete” trash can icon is visible beside the image layer.

Backdrop video

Backdrop videos are noiseless, looping videos that function as the backdrop of a specific content segment. These can aid in engaging website visitors and capturing attention, or adding a cinematic touch to your website.

Nevertheless, it is crucial to acknowledge that autoplaying and looping backdrop videos can be disturbing and possibly disabling for individuals with cognitive impairments, vestibular ailments, or motion intolerance. If you opt for backdrop videos on your site, it is crucial to offer controls for your site visitors to pause automatically playing backdrop videos.

Essential information: Webflow incorporates an inherent play/pause button for backdrop videos by default to enhance accessibility and guarantee you can afford your site visitors the control they require to pause or play your backdrop video content. Additionally, backdrop videos will not auto-play for site visitors who have Desires reduced motion set in their system settings.
The Backdrop video module is displayed within the Components zone of the Add panel.

Integrate a Backdrop video using Quick find (CMD/CTRL+E) or from the Addpanel > Components section. You’ll be prompted to upload a video immediately after placing the Backdrop video on the canvas.

An empty background video on the canvas. The Background video settings are open and offer the option to upload a video, alongside three video settings: Loop video, Autoplay video, and Include play/pause button.

Then, add a video from your device.

Video configurations

The Background video module features three active settings by default: Loop video, Autoplay video, and Include play/pause button. You have the option to deactivate each of these settings by toggling the checkboxes. 

Background video settings modal menu, including settings for Loop video, Autoplay video, Include play/pause button.

Loop video 

Upon activation, the Loop video feature causes your background video to continuously repeat. 

Vital: WCAG Success Criterion 2.2.2: Pause, Stop, Hide specifies that if any automatically moving, blinking, or scrolling content lasts for over five seconds, users must be provided controls to pause, stop, or hide the motion. If you’ve enabled the Loop video feature, also ensure the Include play/pause button is active, giving an accessible experience to your visitors. 

Autoplay video 

Once enabled, the Autoplay video feature initiates your background video once the page loads.

Vital: WCAG Success Criterion 2.2.2: Pause, Stop, Hide emphasizes the need for controls if any automatically moving, blinking, or scrolling content lasts for more than five seconds. Therefore, if you’ve enabled the Autoplay video setting, make sure Include play/pause button is also enabled to offer an accessible experience. 

Include play/pause button

Enabling the Include play/pause button feature adds an in-built play/pause button on your background video for visitors to use in starting or stopping the video. Your background video will pause automatically if a visitor has the Prefers reduced motion option enabled on their OS, regardless of the Include play/pause button status.

Important: If you disable Include play/pause button, visitors with Prefers reduced motion on their OS won’t be able to play the background video. 

Useful tip: Videos on autoplay with no clear pause option contribute to high site abandonment rates. Providing visible video controls can reduce your site’s bounce rate. 

You can also personalize the design of the play/pause button to suit your preferences. Refer to our tutorial on managing play/pause controls for background videos for more details.

Supported video file formats

The Background video unit accepts video files under 30MB in the following formats: webm, mp4, mov, ogg.

Reminder: Avoid using special characters (apart from dashes) or spaces in background video filenames, and optimize videos for the web to enhance performance.

Video transcoding

Background video settings show an Uploading video with the message: “PS: You can keep designing!”

Upon uploading, the video file goes through transcoding to other formats (mp4 & webm) for broad browser compatibility. Utilize this time to continue designing in the Designer workspace.

Previewing the Background video

You can preview the video using any of the following methods:

  1. Hover over the video thumbnail in the background video settings
  2. Click the open in new tab icon next to the video file name for a new tab preview
  3. Click the Preview icon in the top bar to visualize the background video layout

Replacing the background video

To swap the Background video, access the Background video settings by either double-clicking on the video or heading to the Settingspanel

You can also check theAdjustments for background video can be made by choosing the element and hitting Enter. Simply click on Replace Video in the settings window to upload and convert a new video.

Utilizing the background video for a segment

Utilize a Background video as a segment. Insert any content within the Background video element. Positioning and styling content within the segment is similar to other elements — all styling options are accessible in the Style panel.

Tip: Background videos may not start automatically on touch devices if a user has activated data-saving mode or low power mode.

Overlay for background video

The styles within the Backgrounds section of the Style panel for an example color overlay on a background video element.

You can enhance the presentation by adding a gradient or a solid color overlay to your Background video. Using the Color picker, select your preferred colors and adjust the opacity for better visibility. The overlay will be positioned above the Background video but below the content of the segment.

An example background video element with a dark, transparent color overlay placed on top to increase the contrast between the background video and the text.

That’s how backgrounds work in Webflow!

Ewan Mak
Latest posts by Ewan Mak (see all)