Clip content using blending modes

Use blending modes to clip black and white content in a div block.

layout-design
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

Lighten and darken blending modes can act like cookie cutters, taking away the original fill from either black or white elements in a design, and letting the background show through those elements. You can put whatever you want as your background — a solid color, a picture, or even a video — to be visible through the elements.

First, add a Section to the canvas. Then, nest a Background video or Video element and a Div block within the Section. Finally, nest elements (e.g., text blocks, paragraphs, buttons, etc.) within the Div block

You’ll be able to see your Background video or Video through these elements so adjust their heights, sizes, etc. accordingly. Learn more about Background videos.

In the Navigator panel, a Div block named “Content block” and a Background video are nested inside a Section.

To set a blending mode with a white div block:

  1. Select the Div block
  2. Open Style panel > Backgrounds
  3. Click the swatch in Color to set the Div block background to white
  4. Set the color (e.g., background color, font color, etc.) to black for all elements in the Div block that you would like to be transparent
  5. Select the Div block
  6. Open Style panel > Effects
  7. Open the Blending dropdown and select lighten
In the Effects section of the Style panel, Blending has been set to lighten.

To set the blending mode with a black div block:

  1. Select the Div block
  2. Open Style panel > Backgrounds 
  3. Click the swatch in Color to set the Div block background to black
  4. Set the color (e.g., background color, font color, etc.) to white for all elements in the Div block that you would like to be transparent
  5. Select the Div block
  6. Open Style panel > Effects
  7. Open the Blending dropdown and select darken

Lighten makes dark elements disappear; darken makes light elements disappear. Learn more about blending modes.

Blending is set to lighten and the video background can be seen through nested elements in a white div block.
Blending is set to darken and the video background can be seen through nested elements in a black div block.
Note: You can add any type of background to your website (video, image, color, etc.). Just make sure that the background you add has enough contrast with the background of the div block. This ensures text and other elements are visible within the div block. To learn more, check out the Webflow University lesson on color contrast ratios.

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?