A noise texture is random speckle laid over a flat colour or gradient so it looks printed rather than digital. In the browser you can make it with no image file at all: the SVG feTurbulence filter generates Perlin noise from a frequency, an octave count and a seed. Tune it below and copy a few hundred bytes of code.
| Attribute | What it does | Default |
|---|---|---|
| baseFrequency | Size of the speckle; higher numbers give finer grain. One number, or separate x and y values | 0 |
| numOctaves | Layers of detail added on top of each other; more is richer and slower | 1 |
| type | fractalNoise (soft, cloudy) or turbulence (sharper, rippled) | turbulence |
| seed | Starting number for the random pattern; change it for a different layout | 0 |
| stitchTiles | stitch smooths the edges so repeated tiles join without seams | noStitch |
Updated
Grain takes the plastic look off big gradients and stops colour banding on wide hero backgrounds. A PNG grain tile adds a download and goes blurry when scaled, while an SVG filter is tiny text that renders sharp at any size. Adjust the sliders and watch the texture over a sample gradient.
Every change re-renders the SVG filter live over the sample gradient. Nothing is uploaded; the texture is drawn by your browser.
The SVG paints grey noise into a 200 pixel tile. The ::before layer repeats it at low opacity and blends it with the gradient.
<style>
.hero { position: relative; isolation: isolate; height: 160px; border-radius: 16px; overflow: hidden;
display: grid; place-items: center; color: #fff; font: 600 20px system-ui;
background: linear-gradient(120deg, #4F98FB, #a855f7 60%, #ec4899); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
</style>
<div class="hero">Grainy gradient</div>Save this as grain.svg and use it with background-image: url(grain.svg). The colour matrix turns the noise grey.
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<filter id="n">
<feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch" />
<feColorMatrix type="saturate" values="0" />
</filter>
<rect width="100%" height="100%" filter="url(#n)" />
</svg>baseFrequency is measured in noise cycles per pixel of the filter area, so 0.05 gives large blotches and 0.9 gives dust-sized specks. Two numbers stretch the noise, which is useful for brushed metal or wood grain.
Each extra octave adds a finer layer at double the frequency and half the strength. Beyond four or five the change is hard to see, but the work for the renderer keeps growing.
Grain works best as a quiet layer. Blend it with overlay or soft-light so it lightens bright parts and darkens dark parts, rather than greying everything.
Check your text contrast after adding texture. Speckle behind small type can make it harder to read, so keep busy grain to backgrounds and hero areas.
It is an SVG filter primitive that creates an image from the Perlin noise function. It needs no input image, so a single filter element inside an SVG can paint a whole texture. Browsers have supported it widely since 2015, according to MDN.
fractalNoise blends its octaves smoothly and looks like soft clouds or film grain. turbulence uses absolute values of the noise, which creates sharper ridges, closer to marble, smoke or water ripples.
Stack two backgrounds: the noise SVG as a data URL on top and the gradient underneath, or put the noise on a ::before layer with low opacity and a blend mode such as overlay or soft-light. The example on this page shows the pseudo-element version.
Set stitchTiles to stitch. The browser then adjusts the frequency slightly so the pattern fits a whole number of tiles, which removes the visible join where copies meet.
Related: CSS gradient generator, SVG pattern generator, CSS filter generator, CSS background generator, Blob generator.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.