Mix Blend Mode with Video Background
Use the `mix-blend-mode: difference` CSS property to make your text dynamically pop over any background video.
Demo:
HTML
CSS
Preview
<div class="video-container">
<video autoplay muted loop playsinline class="bg-video">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4" type="video/mp4">
</video>
<h1 class="title">Mix Blend Mode Demo</h1>
</div>
.video-container {
position: relative;
width: 100%;
max-width: 800px; /* adjust as needed */
aspect-ratio: 16 / 9; /* maintain video ratio */
overflow: hidden;
margin: 2rem auto;
border-radius: 12px; /* optional rounded corners */
}
.bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.title {
position: relative;
z-index: 1;
color: white;
mix-blend-mode: difference;
font-size: 3rem;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
Mix Blend Mode Demo
Did you like this CSS code snippet? Share it with your friends:
LAST UPDATED
November 05, 2025