In this tutorial, you will learn how to add a grainy film effect overlay using CSS only. Watch the video below for a detailed tutorial.
<div class="container"> <div class="overlay"></div> </div>
body { background: black; margin: 0; } .container { position: relative; width: 100%; height: 100vh; overflow: hidden; background-image: url(img.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; filter: sepia(0.5); box-shadow: 0 0 150px black inset; } .overlay { width: 100%; height: 100%; filter: blur(0.5px) drop-shadow(0 0 0 #c9c7c7); } .overlay:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: repeating-linear-gradient(90deg, #0002 0 2px, transparent 4px 35vmin); animation: vlines 0.45s steps(1) infinite; } @keyframes vlines { 0%, 100% { transform: translateX(0); opacity: 0.5; } 10% { transform: translateX(-1%); } 20% { transform: translateX(1%); } 30% { transform: translateX(-2%); opacity: 0.75; } 40% { transform: translateX(3%); } 50% { transform: translateX(-3%); opacity: 0.5; } 60% { transform: translateX(8%); } 70% { transform: translateX(-3%); } 80% { transform: translateX(10%); opacity: 0.25; } 90% { transform: translateX(-2%); } } .overlay:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.2; background-image: repeating-conic-gradient(black 0%, transparent 0.00003%, transparent 0.0005%, transparent 0.00095%), repeating-conic-gradient(black 0%, transparent 0.00005%, transparent 0.00015%, transparent 0.0009%); animation: grains 0.5s steps(1) infinite; } @keyframes grains { 0%, 100% { transform: translate(0,0); } 10% { transform: translate(-1%, -1%); } 20% { transform: translate(1%, 1%); } 30% { transform: translate(-2%, -2%); } 40% { transform: translate(3%, 3%); } 50% { transform: translate(-3%, -3%); } 60% { transform: translate(4%, 4%); } 70% { transform: translate(-4%, -4%); } 80% { transform: translate(2%, 2%); } 90% { transform: translate(-3%, -3%); } }