How do use mix-blend-mode with the color of my choice to overlay text on a video?

Question

I need my text to be transparent towards the video behind it but not the background of the text.

<main>
    <div class="container">
        <video
            src="./pexels-tima-miroshnichenko-5377684.mp4"
            autoplay
            muted
            loop
        ></video>
        <h2>Hello There!</h2>
    </div>
</main>


main {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 60%;
    height: fit-content;
    overflow: hidden;
    display: grid;
}

video,
h2 {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    display: inline;
}

.container h2 {
    margin: 0;
    height: 100%;
    background: #ffdb99;
    font-size: 13vw;
    padding: 0;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    z-index: 2;
    mix-blend-mode: screen;
    font-family: 'Poppins', sans-serif;
}

This is the result: image of text/video overlay

I need the background to stay opaque but the text to be transparent towards the video behind it!

Thanks for your input in advance!! Hope my question is clear!

score 0 · Answer 1 · answered Mar 20 '21 at 12:14

This solution doesn't work for a video, but depends on your video you could possibly use a GIF?

If that works for you then you make your GIF or image the background to your h2 and use -webkit to make the text transparent.

main {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    /* Put your solid colour background for your div */
    background: #ffdb99;
    
    width: 60%;
    height: fit-content;
    overflow: hidden;
    display: grid;
}

.container h2 {
    /* This makes the text transparent */
    color: white;  /* incase the transparency doesn't work */
    background: url("https://media.giphy.com/media/115BJle6N2Av0A/giphy.gif") no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: cover;
   
    margin: 0;
    font-size: 13vw;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
}

<main>
    <div class="container">
        <h2>Hello There!</h2>
    </div>
</main>

@JessicaI I want to know which rule makes the GIF run inside the text instead of the h2 block. Is it the `-webkit-background-clip`? If it is, then it make total sense to me. — Naeem Hussain, Mar 24 '21 at 20:24
Yes that is how it works, it can also be set to other sizes for just the area of text without padding etc. Look at this page on CSS Tricks - it explains background-clip. https://css-tricks.com/almanac/properties/b/background-clip/ — Jessica Francis, Mar 26 '21 at 09:28

score 0 · Accepted Answer · answered Mar 20 '21 at 21:10

I do not know how to do this with mix-blend-mode as you can't have a video as a background in the normal CSS sense.

But you can achieve the effect by 'cutting text holes' in the background and overlaying the whole thing over the video using SVG mask.

Here's an example, you can choose the color as it is not affected by any blending or masking:

* {
  margin: 0;
  padding: 0;
}

video {
  width: 100%;
  height: auto;
  z-index: -1;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

text {
  font-size: 10vmin;
  text-anchor: middle;
  font-family: sans-serif;
}

<video src="https://www.w3schools.com/html/mov_bbb.mp4" autoplay muted loop></video>
<svg width="33vw" height="33vh">
  <mask id="mask" height="100%" width="100%">
    <rect x="0" y="0" width="100%" height="100%" fill="#fff"></rect>
    <text>
      <tspan x="50%" dy="1.2em">HELLO</tspan>
      <tspan x="47%" dy="1em">THERE!</tspan>
    </text>
  </mask>
  <rect width="100%" height="100%" mask="url(#mask)" fill="#ffdb99"></rect>
</svg>

How do use mix-blend-mode with the color of my choice to overlay text on a video?

2 Answers2