Film Grain Overlay
An animated SVG noise/grain texture over a gradient — adds a cinematic, tactile feel.
<div class="grain"><svg style="position:absolute;width:0;height:0"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3"/></filter></svg><div class="grain-noise"></div><h2>Film Grain</h2></div>body{background:#0d1426}
.grain{position:relative;width:340px;height:200px;border-radius:20px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#ff7a18,#ff477e,#7b2ff7)}
.grain-noise{position:absolute;inset:-50%;filter:url(#n);opacity:.18;animation:gr .4s steps(2) infinite}
.grain h2{position:relative;color:#fff;font:800 32px/1 system-ui,sans-serif;z-index:1;text-shadow:0 2px 10px rgba(0,0,0,.3)}
@keyframes gr{0%{transform:translate(0,0)}50%{transform:translate(-4%,3%)}100%{transform:translate(3%,-2%)}}Free to use.This snippet is plain HTML, CSS and JavaScript with no dependencies. Copy any file, or download the whole thing as a single ready-to-open .html page.