Vintage Grainy Film Overlay

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.


HTML

<div class="container">
    <div class="overlay"></div>
</div>

CSS

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%);
	}
}

Image Source

https://unsplash.com/photos/xBRQfR2bqNI?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink