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