~/css/tailwind-grain-textures

6 Tailwind Grain Textures

6 TailwindPublished 2026-10-05Free · no sign-up

Six texture effects in Tailwind without image files: grain over a gradient, a paper note, a matte textured button, grainy colour blobs, comic halftone dots and a film poster with heavy grain.

Filter demos

01. Tailwind Grainy Gradient Section

TailwindGrainGradient

Film grain over a gradient using an after: pseudo-element whose background is an SVG noise filter stored in a custom property. mix-blend-overlay and a low opacity blend it into the colours below.

View code

<section class="relative isolate w-full max-w-xs overflow-hidden rounded-2xl bg-gradient-to-br from-orange-800 via-rose-700 to-violet-900 px-6 py-10 text-white after:absolute after:inset-0 after:-z-10 after:opacity-30 after:mix-blend-overlay after:[background-image:var(--noise)]">
  <h3 class="text-2xl font-bold">Analog hours</h3>
  <p class="mt-1 text-sm text-orange-100">Records, coffee and long afternoons.</p>
</section>

:root { --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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"); }

02. Tailwind Paper Texture Note

TailwindGrainPaper

A note card with a warm paper grain, the noise multiplied into a cream background through a before: layer. Georgia italic for the greeting finishes the stationery feel.

View code

<article class="relative isolate w-full max-w-xs rounded-md bg-[#faf6ec] p-6 font-serif text-[#3f2d1d] shadow-[0_8px_18px_-10px_rgba(63,45,29,.5)] before:absolute before:inset-0 before:-z-10 before:rounded-md before:opacity-40 before:mix-blend-multiply before:[background-image:var(--noise)]">
  <h3 class="text-lg italic">Dear reader,</h3>
  <p class="mt-2 text-sm leading-relaxed">Thank you for ordering from our little studio. Every piece was packed by hand.</p>
</article>

:root { --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); }

03. Tailwind Grain-Textured Button

TailwindGrainButton

A matte, riso-print style button: the noise image layered over a solid teal through an arbitrary background, so the grain sits under crisp white text.

View code

<button type="button" class="rounded-xl px-7 py-3.5 font-extrabold text-white [background:var(--noise),#0f766e] hover:[background:var(--noise),#115e59] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-[3px] focus-visible:outline-teal-400">Order prints</button>

:root { --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E"); }

04. Tailwind Grainy Blob Background

TailwindGrainBackground

Soft colour blobs blurred with blur-2xl and roughened with a grain layer, the popular grainy-gradient background. The label sits on its own tinted chip so it stays readable whatever colour is behind it.

View code

<div class="relative isolate grid h-52 w-full max-w-xs place-items-center overflow-hidden rounded-2xl bg-indigo-950 after:absolute after:inset-0 after:opacity-25 after:mix-blend-soft-light after:[background-image:var(--noise)]">
  <span aria-hidden="true" class="absolute -left-6 -top-6 size-36 rounded-full bg-pink-500 blur-2xl"></span>
  <span aria-hidden="true" class="absolute -bottom-8 -right-4 size-40 rounded-full bg-sky-400 blur-2xl"></span>
  <p class="relative z-10 rounded-lg bg-slate-950/50 px-3 py-1.5 font-bold text-white">No banding, just grain</p>
</div>

:root { --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }

05. Tailwind Halftone Dot Panel

TailwindGrainHalftone

A comic-style panel with halftone dots from a radial gradient tiled by bg-[length:10px_10px], faded out across the panel with an arbitrary mask. Regular dots feel printed and graphic rather than photographic.

View code

<section class="relative grid h-48 w-full max-w-xs place-items-center overflow-hidden border-[3px] border-neutral-900 bg-yellow-300">
  <span aria-hidden="true" class="absolute inset-0 bg-[radial-gradient(circle,#f97316_2.5px,transparent_3px)] bg-[length:10px_10px] [mask-image:linear-gradient(120deg,#000_10%,transparent_75%)]"></span>
  <h3 class="relative -rotate-6 font-['Impact','Arial_Black',sans-serif] text-6xl text-neutral-900 [text-shadow:4px_4px_0_#fff]">POW!</h3>
</section>

06. Tailwind Grainy Film Poster

TailwindGrainPoster

A film poster on near-black with heavy grain, wide letter spacing and a thin rule. The grain sits behind the text through -z-10 on an isolated parent, so the letters stay sharp.

View code

<section class="relative isolate grid w-56 max-w-full justify-items-center gap-3 overflow-hidden rounded-lg bg-stone-950 px-6 py-12 text-center font-serif text-stone-100 after:absolute after:inset-0 after:-z-10 after:opacity-20 after:[background-image:var(--noise)]">
  <p class="text-xs uppercase tracking-[0.4em] text-stone-300">A short film</p>
  <h3 class="text-3xl uppercase tracking-[0.15em]">The Long Night</h3>
  <span aria-hidden="true" class="h-px w-16 bg-stone-500"></span>
  <p class="text-xs text-stone-300">In cinemas this winter</p>
</section>

:root { --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"); }

About these Tailwind Grain Textures

Noise as a custom property

Store the SVG noise data URL in a custom property such as --noise and use it with [background-image:var(--noise)], which keeps class lists short.

Grain on a pseudo-element

after:absolute after:inset-0 after:opacity-25 after:mix-blend-overlay lays grain over a section without extra markup.

Keep text sharp

Put grain behind text with -z-10 inside an isolate parent, so letters are never roughened.

Halftone is a gradient

bg-[radial-gradient(circle,…_2.5px,transparent_3px)] bg-[length:10px_10px] tiles dots; a mask fades them out.

Frequently asked questions

Why a custom property instead of a class?

The data URL is long; a variable keeps it in one place and readable.

Does grain hurt performance?

Static noise is cheap; avoid animating it over large areas.

Is there a CSS version?

Yes, see the CSS grain textures collection.