Tune an SVG noise filter over any Tailwind base. Copy a tiny CSS snippet or export a transparent PNG overlay.
CSS
background:
url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.650%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.450%200%27%20%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url(%23n)%27%20%2F%3E%3C%2Fsvg%3E"),
linear-gradient(180deg, #1e293b 0%, #020617 100%);
background-size: 200px 200px, cover;Tailwind v4 @theme
@theme {
--grain: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.650%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%20%2F%3E%3CfeColorMatrix%20values%3D%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.450%200%27%20%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url(%23n)%27%20%2F%3E%3C%2Fsvg%3E");
}Grain
Frequency
0.650Octaves
2Opacity
45%Background
From
slate-800#1e293b
To
slate-950#020617
Pick a background
Solid Tailwind color or a gradient — the base the grain overlays on top of.
Tune the grain
Frequency, octaves, and opacity sliders change the texture live.
Preview at scale
The preview renders at full canvas size so you can see grain density as it'll ship.
Copy or download
Inline CSS data-URI for drop-in use, or a transparent PNG to overlay anywhere.
SVG's feTurbulence filter. It's hardware-accelerated in modern browsers and produces perceptually-smooth pseudo-random noise from a seed — exactly the tool Linear and Vercel use for their grainy backgrounds.
The CSS data-URI is sub-1-KB and renders at any resolution (the browser filters the SVG at runtime). Use it for small noise on hero backgrounds. Use the PNG when you need a fixed-grain texture baked at a specific resolution, or when you need to composite with tools that can't handle inline SVG.
Frequency controls the base grain size — higher = finer grain. Octaves layer multiple frequencies for a more natural, less repetitive look. Two octaves is usually enough; four starts to slow down on older hardware.
Mesh gradient
Draggable radial-gradient blobs on a Tailwind palette — trendy mesh backgrounds without signup.
Gradient generator
Build Tailwind-palette gradients and export wallpaper, social, and OG sizes.
Translating screenshots into every locale is what lokal was built for. Upload once, ship to every store.
Explore lokal