Skip to main content
Toollyz

Search tools

Search for a command to run...

Noise Texture Generator

Two engines: canvas-pixel noise driven by `crypto.getRandomValues` (true random, every pixel independent) or SVG `feTurbulence` (procedural, smaller bytes). Adjustable size, contrast, opacity, monochrome/RGB, blend mode. Live preview over five gradient backgrounds. Copy CSS data URL or download a PNG. 100% offline.

What is the Noise Texture Generator?

Noise Texture Generator produces the subtle film-grain overlays that warm up flat-colour UIs — the look popularised by Vercel's marketing site, modern dashboards, and most premium product pages. Two engines: Canvas writes each pixel directly via `crypto.getRandomValues` (true cryptographic randomness, every pixel independent) — outputs as a PNG data URL you can either copy into CSS or download as a real file. SVG mode uses `feTurbulence` filter with a `fractalNoise` type and 2 octaves, producing more cloud-like, procedural grain — smaller CSS payload but slightly different visual character. Both modes share controls: tile size (32-768 px square), contrast (10-100%, applies a remap curve around mid-grey), monochrome toggle (greyscale vs RGB grain), opacity (5-100%), and CSS `mix-blend-mode` (normal, overlay, multiply, screen, soft-light) — overlay is the typical choice for subtle warmth without darkening. The preview overlays the texture on one of five gradient backgrounds so you can pick the contrast that reads best in your design.

How to use it

  1. Pick Canvas PNG for true random per-pixel grain, or SVG turbulence for procedural cloud-like noise.
  2. Drag Size to set the tile dimensions — 128-256 px is usually invisible at typical viewing distances.
  3. Adjust Contrast — lower for soft grain, higher for chunky digital noise.
  4. Toggle Monochrome — greyscale grain reads as 'film', RGB grain reads as 'digital'.
  5. Pick a blend mode — Overlay is the right answer 90% of the time.
  6. Click Copy CSS to grab the inline data URL ready for paste, or Download PNG for an asset to host.

Benefits

  • Two engines — true random canvas (best fidelity, larger bytes) and SVG turbulence (smaller bytes, procedural).
  • Canvas mode uses `crypto.getRandomValues` for cryptographic-quality randomness — no patterns at any zoom.
  • Monochrome toggle — greyscale film grain vs RGB digital noise.
  • Adjustable contrast applies a real remap curve around mid-grey, not just `filter: contrast()`.
  • Five blend modes (normal, overlay, multiply, screen, soft-light) for different design contexts.
  • Live preview overlays the texture on five gradient backgrounds so you can pick the right contrast.
  • Output two ways: inline data URL CSS (zero extra HTTP request) or downloadable PNG (smaller CSS).
  • Tile sizes 32-768 px — the texture seamlessly repeats at any element size.
  • Configuration persists in localStorage.
  • Runs 100% in your browser — no server, no upload.

Frequently asked questions

Which engine should I use — Canvas or SVG?

Canvas for the truest 'every pixel is independent' grain (film-style). SVG for smaller CSS payload and a slightly cloud-like procedural look. Use Canvas if you need < 5% opacity (the SVG turbulence loses detail at extreme low opacity).

How big is the CSS data URL?

A 256×256 PNG embedded as base64 weighs ~50 KB in CSS. For production, click Download PNG and host it as a real static asset — the CSS shrinks from 50 KB to ~30 bytes (`background-image: url(/noise.png)`).

Why does monochrome grain read as 'film'?

Real silver-halide film grain is achromatic — the grains are silver particles. RGB noise (digital sensor noise) has independent red/green/blue per pixel which the eye reads as 'digital camera'. Picking the right one nails the design intent.

What's the right opacity?

Subtle is the goal — 8-15% over a colour gradient gives premium warmth; 25-35% over flat surfaces gives noticeable grain. > 40% looks broken unless you intentionally want a TV-static effect.

Why is Overlay the default blend mode?

Overlay multiplies dark pixels and screens light pixels — the result is the texture brightens light areas and darkens dark areas, adding grain without flattening the underlying colour. Multiply alone darkens everything; Screen lightens; Soft-light is the gentle version of Overlay.

Does the texture tile seamlessly?

Yes — both engines render to a fixed-size tile and CSS `background-repeat: repeat` tiles it without seams. The cryptographic randomness in Canvas mode means no visible seam in any direction.

Why does the preview shift colour when I change blend modes?

Blend modes mathematically combine the texture with the layer below. The background gradient stays the same — the texture's effect on it changes. Try toggling blend modes against the same background to see each effect.

Can I animate the noise?

Add a `@keyframes` that translates `background-position` by 1 px per frame — gives a subtle 'living grain' loop, useful for hero sections. Keep tile size small (≤ 128 px) so the loop doesn't take forever.

Does the canvas mode use a seedable RNG?

No — it uses `crypto.getRandomValues`, which is non-seedable for security reasons. Every regenerate produces a fresh tile. If you want reproducibility, click Download PNG once and reuse the file.

Are my settings saved between visits?

Yes — engine, size, contrast, opacity, blend mode, monochrome and frequency all persist in localStorage under `toollyz:noise-texture`.

Is anything uploaded?

No. Noise generation runs entirely in your browser, even the cryptographic random source.

Related tools

See all image tools