noise grain texture overlay film add film grain texture to backgrounds subtle noise overlay on hero sections tactile surface feel for UI elements backgrounds feel too clean and digital need noise texture without image assets want adjustable grain intensity
Noise Texture
Fetch snippet JSON:
curl https://webspire.de/snippets/decorative/noise-texture.json
Surface texture
Textured Surface
A subtle grain layer keeps large quiet surfaces from feeling flat or synthetic.
Background
Customize
Quick Start
<div class="noise-texture bg-slate-900 p-8">Textured</div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- Size
- 609 bytes · 17 lines
- Custom Properties
-
--noise-opacity - Classes
-
.noise-texture
noise grain texture overlay film
Adds a subtle noise/grain texture overlay using an inline SVG feTurbulence filter as a CSS background-image. No external image files needed — the noise is generated in the browser.
Textured card
<div class="noise-texture rounded-xl bg-slate-900 p-8 text-white">
<h2 class="text-xl font-bold">Textured Surface</h2>
<p class="mt-2 text-sm text-white/60">The subtle grain adds a tactile quality.</p>
</div>Adjust intensity
<!-- Heavier grain -->
<div class="noise-texture" style="--noise-opacity: 0.15">Heavy noise</div>
<!-- Very subtle -->
<div class="noise-texture" style="--noise-opacity: 0.03">Barely there</div>