Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Fullscreen Background Video with Mix-Blend-Mode Overlay Text
<video poster="" playsinline autoplay muted loop>
<source src="" type="video/webm">
<source src="" type="video/mp4">
<a href="#">Men</a>
<a href="#">Women</a>
<a href="#">Stores</a>
<a href="#">Contact</a>
<div id="fashion">
<h2>There’s a brand new dance but I don’t know its name…</h2>
@font-face {
font-family: Moderne Sans;
src: url(
* {
box-sizing: border-box;
body {
margin: 0;
background: #000;
background-size: cover;
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: bottom center;
div#fashion {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
header {
position: fixed;
width: 100%;
text-align: center;
color: white;
transition: .4s;
header:hover {
background: white;
color: #000;
h1 {
font-family: Moderne Sans, sans-serif;
text-align: center;
font-size: 2rem;
width: 100%;
letter-spacing: .5rem;
nav a {
text-decoration: none;
color: inherit;
padding: 1rem;
h2 {
font-family: Century Schoolbook;
font-size: 8vmin;
text-align: center;
margin: 2rem 3rem 0;
mix-blend-mode: overlay;
color: #fff;
font-weight: 100;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.