Backgrounds & Color · Free generator

CSS Noise Texture Generator

Free · no sign-up Live preview · copy or download the CSS

Create subtle background noise with dirty pixels over a gradient — the grain that kills banding and makes flat color feel like film. Adjust frequency and opacity, preview live, copy one self-contained CSS declaration (no image files).

Settings

Generated CSS — updates live


Ready-made examples — click any card to copy its CSS
Proven starting points. Clicking a card copies the full CSS to your clipboard.


The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
STEP 1 · 15 minCSS ColorsAlpha and channels — what opacity really edits.STEP 2 · 20 minCSS BackgroundsLayered backgrounds: how the noise stacks over the gradient.STEP 3 · 20 minCSS GradientsThe gradient underneath is half of this effect.


  1. CSS Gradient GeneratorBackgrounds & Color
  2. CSS Pattern GeneratorBackgrounds & Color
  3. CSS Glassmorphism GeneratorBackgrounds & Color
  4. CSS Box Shadow GeneratorShadows & Effects
  5. CSS Layer Styles GeneratorShadows & Effects
  6. CSS Text Gradient GeneratorTypography & Buttons


How it works


The grain is an inline SVG using an feTurbulence filter, encoded as a data URI and stacked as the top background layer over your gradient — zero image files, zero extra requests. Frequency sets how fine the grain is; opacity how visible.


Why bother? Long subtle gradients show visible color "bands" on 8-bit displays. A whisper of noise dithers those steps invisible — the same trick film and game studios use. Anything past ~0.5 opacity turns from texture into static, so stay subtle.


Run the code — try it yourself
The card's gradient looks flat. Paste a noise declaration from the generator above (or an example card) over the existing background and compare.


exercise.html — editable


Frequently asked questions
Is this really pure CSS?
One declaration, yes — the noise is an SVG data URI inside background, generated once and cached. No PNG, no request.
My gradient shows stripes/bands — will this fix it?
That's exactly the use case: banding is the eye catching discrete color steps, and fine noise breaks the pattern. Frequency 0.6–1.0 at opacity 0.2–0.4 usually cures it.
Does the SVG filter hurt performance?
It rasterizes once when painted, then behaves like any background image. Avoid animating elements that force it to repaint constantly.
Can I put noise over a photo?
Yes — background layers stack, so replace the gradient layer with your url(photo.jpg) and keep the noise layer on top.


Keep going
Noise is seasoning: at 25–40% opacity nobody consciously sees it, but every surface feels more physical. Pair it with the Gradient generator for the base blend, and read the Gradients lesson to understand the banding problem it solves.
CSSmatic is a non-profit project, made by developers for developers.