Noise Texture Generator
Make tileable film grain and noise textures, then export in one click — as an SVG, a CSS background or a PNG. Free and unlimited.
A grain texture in three moves
Noise and grain add the tactile, filmic depth behind so many premium designs — softening flat colour, hiding gradient banding and giving a screen a physical feel. Here it is generated live as a tiny, infinitely scalable SVG you can drop over anything.
- 1Explore. Hit Randomize (or press Space) until the grain feels right.
- 2Refine. Dial in fineness, detail, strength and the grain colour — or flip to colour static.
- 3Export. Download the SVG or PNG, or paste the CSS background straight into your stylesheet.
Add grain to a mesh gradient, lay it over an SVG wave divider, or pair it with a seamless pattern — texture ties the studio's Liquid-Light look together.
Good to know
What can I use the texture for?
Drop it over photos, gradients or solid blocks as a subtle film grain, add tactile paper/noise to a hero, or build the popular grainy-gradient look — it adds depth and hides colour banding without weighing the page down.
How do I apply it in CSS?
Paste the copied CSS onto any element — it sets a tiling background-image. To grain something underneath, put it on an overlay element and add mix-blend-mode: overlay (or soft-light), then tune the opacity.
SVG, CSS or PNG — which should I use?
SVG and CSS stay razor-sharp at any size and weigh almost nothing — the noise is generated by the browser. PNG is a fixed raster tile for tools that can’t use SVG.
Will it tile seamlessly?
Yes — the texture is generated with stitchTiles="stitch", so it repeats edge-to-edge without visible seams across a large surface.
How do I make a grainy gradient?
Put your gradient on an element, then add this grain on top of it. The simplest way: keep the gradient as the element’s background and layer the noise as a second background image above it, or use a child overlay with mix-blend-mode: soft-light and the Strength dial low. The grain breaks up the smooth colour so it reads as a tactile, grainy gradient rather than a flat one — and it hides the banding that wide gradients show on big screens.
How do I add grain over a photo or gradient?
Leave Colour static off so the grain exports as a single colour on a transparent tile, then place it on an overlay element that sits above your photo or gradient. Set mix-blend-mode: overlay (punchier) or soft-light (gentler) and lower the Strength until it just kisses the image. A near-white grain lifts highlights; a dark grain deepens shadows for a filmic look.
What kind of noise is it — Perlin or fractal?
It’s SVG feTurbulence, the browser’s built-in fractal (Perlin-style) noise. Fineness sets the base frequency (how tight the grain is), Detail stacks octaves for richer texture, and the Marbled toggle switches between soft cloud noise and higher-contrast turbulence for veined, paper- or stone-like surfaces.
Seamless noise & grain as SVG, CSS or transparent PNG
Under the hood this is procedural fractal noise — the same Perlin-style feTurbulence filter the browser draws natively, so every texture is resolution-independent and weighs only a few hundred bytes. Soft cloud noise gives you classic film grain and paper texture; the marbled mode pushes the turbulence into higher contrast for veined, organic surfaces. Because the tile is generated with seamless stitching, it repeats edge-to-edge with no visible seam — it stays tileable across a full-bleed hero or a tiny button alike.
The real power is using it as a mix-blend-mode overlay. Export the monochrome grain as a transparent PNG or copy the CSS, lay it over a photo or gradient, and set mix-blend-mode: overlay or soft-light — the noise rides the colours underneath instead of greying them out. That single move adds the tactile, analogue depth behind so many premium designs and quietly cancels the colour banding that otherwise shows up in smooth gradients on wide displays. Tune fineness, detail and strength to taste, pick SVG and CSS when you want it razor-sharp at any size, or reach for the PNG when a tool needs a flat raster tile.