Film grain

필름 그레인

Fine noise laid over a smooth gradient for an analogue, filmic texture. It also hides gradient banding.

Also known as: Noise textureGrainy gradient

···

html

<div class="grad"><div class="noise"></div><h1>grain</h1></div>

css

.grad{position:absolute;inset:0;background:radial-gradient(120% 90% at 20% 10%,#ff8a5b,transparent 60%),radial-gradient(90% 90% at 90% 90%,#6a5bff,transparent 60%),#1d1a2f;display:grid;place-items:center}
.noise{position:absolute;inset:0;opacity:.55;mix-blend-mode:overlay;animation:shift .2s steps(2) infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes shift{50%{transform:translate(-3%,2%)}}
h1{position:relative;color:#fff;font-size:64px;font-style:italic;font-family:Georgia,serif;font-weight:400;margin:0}

Generate noise with an SVG feTurbulence filter and use it as a background or overlay. No image file, resolution-independent, a few lines of code.

Blend it with mix-blend-mode: overlay or soft-light to add texture without shifting colour.