Back to all lessons
Lesson library

Clip content using blending modes

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

This video features an old UI. Updated version coming soon!
Clone this project

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.
Try Webflow — it's free