Tailwind UI Pattern Registry for humans and agents

grain noise texture overlay film material glass cards and frosted panels hero backgrounds with gradient dark sections needing material depth flat gradients feel digital and lifeless need film-grain effect without animation overhead grain-overlay adds motion — this stays static

Static Grain

Fetch snippet JSON: curl https://webspire.de/snippets/atmosphere/static-grain.json
Format

Atmosphere

Static Grain

Fine noise texture blended via overlay — no animation.

Stage Background
Customize

Quick Start

<div class="static-grain rounded-2xl bg-gradient-to-br from-violet-500 to-indigo-600 p-8">...</div>

Details

Tailwind
v4.x
Browser
baseline-2024
Size
743 bytes · 21 lines
Custom Properties
--grain-opacity--grain-blend--grain-size
Classes
.static-grain
grain noise texture overlay film material

Unlike the animated grain-overlay, this variant is fully static — no @keyframes, no shifting transform. Uses mix-blend-mode: overlay for a natural grain that interacts with the element’s colors. The SVG noise is embedded as a data URI and tiles at --grain-size.

The difference from grain-overlay:

  • No animation (lower CPU, no motion concerns)
  • mix-blend-mode: overlay blends grain into the background color
  • Finer grain (baseFrequency: 0.9 vs 0.7)
  • Respects border-radius of the host element

On a gradient card

<div class="static-grain rounded-2xl bg-gradient-to-br from-violet-600 to-purple-900 p-8 text-white">
  <h2 class="text-xl font-bold">Premium Plan</h2>
  <p class="mt-2 opacity-70">Full access to all features.</p>
</div>

Adjusting intensity

<section class="static-grain bg-slate-900 py-20"
  style="--grain-opacity: 0.06; --grain-blend: soft-light">
  Hero content
</section>