Use blending modes to clip black and white content in a div block.
Blending modes let me stack different things to create stunning visual effects.
But there’s one really interesting way to use black and white colors with blending modes to basically cut anything right out of a Div. It goes like this.
Background? Check.
Something in the foreground? Check.
Since the foreground background...
Stick with me, I’ll find a better way to say it.
Since this white background is pure white, and the stuff inside of it is pure black? I can just select this white Div and set its blending mode to lighten.
And boom. Every instance of the color black is transparent.
Also, notice how I very cleverly set the background video to something that has great contrast, so people can, you know, read it.
So if I go into preview mode, I can see the background video through my content.
Also, by the way, what if I have a design with a black foreground background?
[Miguel] Background foreground.
[Grimur] Foreground background.
[Miguel] Background foreground.
[Grimur] Foreground background.
[Miguel] Background foreground.
[Grimur] Foreground background.
[Miguel] Background foreground.
[Grimur] Then all I have to do is make sure my elements are set to white, and go down and select darken.
So. Lighten makes dark elements transparent. Darken makes light elements disappear.
[Miguel] Foreground.
[Grimur] Background.
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.
To set a blending mode with a white div block:
To set the blending mode with a black div block:
Lighten makes dark elements disappear; darken makes light elements disappear. Learn more about blending modes.
Something went wrong while submitting the form. Please contact support@webflow.com