Use blending modes to clip black and white content in a div block.
Brighten and dim blending modes can function like shape cutters, removing the original fill from either dark or light elements in a design, and revealing the background through those elements. You can use any background you prefer — a solid hue, an image, or even a video — to shine through the elements.
Start by inserting a Segment onto the canvas. Afterwards, nest a Backdrop video or Visual component and a Block element within the Segment. Finally, nest components (e.g., text units, paragraphs, buttons, etc.) inside the Block element.
You will be able to view your Backdrop video or Visual through these elements, so adjust their heights, dimensions, etc. accordingly. Explore more about Background videos.
To adjust a blending mode with a white block element:
Choose the Block element
Access the Design panel > Backgrounds
Tap the palette in Tint to apply the Block element background as white
Configure the tint (e.g., background hue, text hue, etc.) to black for all components in the Block element that you want to be translucent
Choose the Block element
Access the Design panel > Impacts
Unfold the Merging menu and choose brighten
To configure the blending mode with a black block element:
Choose the Block element
Access the Design panel > Backgrounds
Tap the palette in Tint to apply the Block element background as black
Configure the tint (e.g., background hue, text hue, etc.) to white for all components in the Block element that you want to be translucent
Choose the Block element
Access the Design panel > Impacts
Unfold the Merging menu and choose dim
Brighten makes dim elements vanish; dim makes shiny elements vanish. Discover more about blending modes.
Reminder: You can insert any sort of background to your website (video, image, hue, etc.). Just ensure that the background you include has adequate difference with the background of the block element. This guarantees that text and other elements are noticeable within the block element. To find out more, visit the Webflow University lesson on color contrast ratios.
Webflow expert and frontend developer with 4+ years of experience. I bring a versatile skillset (HTML, CSS, JS, Figma, Adobe) to craft exceptional Webflow experiences. 70+ projects honed my ability to seamlessly blend custom code and visual development. Organized, deadline-driven, and passionate about growth, I excel in dynamic environments. Let's push boundaries and create something amazing.
EN 
ZH 
ZH_CN 
KO 
JA