Place Video/ Image inside Text purely with CSS | mix-blend-mode

mix-blend-mode CSS property will decides how a text/ element should display on page depends on the parent elements background.

In below youtube video, I have covered this blog already so incase you do not want to read through you can watch it as well:

mix-blend-mode

This property works briefly same as photoshop’s blend modes. Web/ Graphic designers are very well aware of this modes. It is being used to make photograph more attractive, to blend two/more photos into one.

Text over Video

To display a text over a video we will use this mix-blend-mode CSS3 property. So the html to display text over video will be as below:

<video autoplay loop muted>
    <source src="bugs-bunny.mp4" type="video/mp4" />
</video>
<h1>Bunny</h1>

In the code above, I have used an html5 video tag and then an H1 to display text. Main part of the trick is the CSS which will be like as below:

video {
    width: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
}
h1 {
    background-color: #fff;
    mix-blend-mode: screen;
    font-size: 15rem;
    font-family: sans-serif;
    text-transform: uppercase;
    text-align: center;
    word-break: break-all;
}

In the CSS, I have placed video with an absolute position and covered whole page with the video. In the H1, I have used mix-blend-mode: screen, which will set the text transparent so the video below it will display in the text.

There are other values of mix-blend-mode, which I have listed below:

/* Keyword values */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

/* Global values */
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

Read more on mix-blend-mode from MDN Web Doc