Clip content using blending modes
Using blending mode in the Webflow Designer, you can clip out black and white content (such as text, borders, PNGs, SVGs, and more), so your content becomes a window to your background elements (this could be an image or a video).
If you have a white background and black content, choose the blending mode Lighten to clip out the black. If you have a black background and white content, choose the blending mode Darken to clip out the white.
Check out the sites used in the beginning:
Video transcript
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.
