Grain texture
Also called noise texture, film grain, or grainy gradient
A fine layer of random noise placed over a gradient or image to add a tactile, printed feel and hide color banding.
import { useId } from 'react';
export function GrainyHero() {
const filterId = useId();
return (
<section className='relative isolate overflow-hidden bg-linear-135 from-indigo-500 to-pink-500 px-6 py-24 text-center text-white'>
{/* Fractal noise at 20%, blended into the gradient; it never blocks clicks. */}
<svg
aria-hidden
className='pointer-events-none absolute inset-0 -z-10 size-full opacity-20 mix-blend-overlay'
>
<filter id={filterId}>
<feTurbulence
type='fractalNoise'
baseFrequency='0.8'
numOctaves={3}
stitchTiles='stitch'
/>
</filter>
<rect width='100%' height='100%' filter={`url(#${filterId})`} />
</svg>
<h1 className='text-5xl font-semibold tracking-tight'>Made by hand</h1>
<p className='mt-4 text-lg text-white/85'>
Prints and posters from independent artists.
</p>
</section>
);
}Add a grain texture to the hero gradient: an absolutely positioned SVG overlay using feTurbulence (type="fractalNoise", baseFrequency 0.8, numOctaves 3, stitchTiles="stitch") at 20% opacity with mix-blend-mode: overlay. Make it aria-hidden and pointer-events: none so it never blocks clicks.
Paste into Layerwise or any AI coding tool.
What is Grain texture?
Grain adds tiny specks of light and dark noise over a surface, like film grain or risograph paper. On the web the usual source is an SVG filter: feTurbulence with type="fractalNoise" generates the noise, and the layer sits on top at low opacity or with a blend mode such as overlay.
It takes the plastic, too-perfect edge off gradients, mesh backgrounds, and glass panels, and it hides banding, the visible steps that smooth gradients sometimes show on screen.
Keep it subtle, around 10 to 25% opacity, or text starts to look dirty. A small noise tile reused as a repeating background is cheaper than filtering a huge area live, and grain belongs on backgrounds, away from small text and icons.
Related terms
All termsMesh gradient
A smooth, multicolor gradient where several colors blend outward from different points, like paint mixing, often used for hero backgrounds.
Aurora background
A background of soft, blurred color ribbons that drift slowly, like the northern lights, used behind hero sections and landing pages.
Glassmorphism
A visual style where panels look like frosted glass: translucent, blurred backgrounds with a thin light border over colorful shapes.
Grid background
A decorative background of thin grid lines, dots, or stripes, often faded toward the edges, used behind hero sections and product shots.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.