grain noise film retro texture overlay vintage retro/vintage hero background film grain on dark sections textured editorial backgrounds subtle noise on photography sites backgrounds feel too clean and digital want analog film grain without image assets need animated noise texture that moves
Grain Overlay
Fetch snippet JSON:
curl https://webspire.de/snippets/atmosphere/grain-overlay.json Background
Customize
Quick Start
<div class="grain-overlay bg-slate-900 p-12"><h1 class="relative z-10 text-white">Retro</h1></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 985 bytes · 42 lines
- Custom Properties
-
--grain-opacity - Classes
-
.grain-overlay
grain noise film retro texture overlay vintage
Animated grain overlay using an inline SVG feTurbulence noise filter as background-image on a ::after pseudo-element. The oversized element (200%×200%) shifts in 4-step keyframes for a flickering film-grain look. Different from static noise-texture — this one moves.
Dark hero with grain
<section class="grain-overlay bg-slate-950 py-24 text-center">
<h1 class="relative z-10 text-5xl font-bold text-white">Vintage Feel</h1>
</section>Subtle grain on image
<div class="grain-overlay overflow-hidden rounded-xl" style="--grain-opacity: 0.04;">
<img src="/placeholder.svg" alt="" class="h-64 w-full object-cover">
</div>