shadcn-extras

Noise & Grain Generator

Generate custom SVG noise textures to add depth, texture, and a "film grain" look to your backgrounds.

5%
0.65
3

Content Overlay

This demonstrates how the noise texture sits behind your content, adding depth without reducing readability.

.bg-noise {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20200%20200'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cfilter%20id%3D'noiseFilter'%3E%3CfeTurbulence%20%0A%20%20%20%20%20%20type%3D'turbulence'%20%0A%20%20%20%20%20%20baseFrequency%3D'0.65'%20%0A%20%20%20%20%20%20numOctaves%3D'3'%20%0A%20%20%20%20%20%20stitchTiles%3D'stitch'%20%0A%20%20%20%20%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23noiseFilter)'%20opacity%3D'0.05'%20%2F%3E%3C%2Fsvg%3E");
}

Includes an optimized SVG data URI. Supports all modern browsers.

Why use Noise?

Adding subtle noise can reduce color banding in gradients and give flat designs a more tangible, premium feel. This tool generates a pure CSS background-image using an SVG data URI, meaning:

  1. No external requests: It's embedded directly in your CSS.
  2. Infinite scalability: It's SVG-based, so it looks crisp at any resolution.
  3. Performance: Lightweight compared to raster images.

Features

  • Turbulence vs Fractal Noise: Choose between rougher or smoother organic textures.
  • Base Frequency: Controls the "zoom" or grain size of the noise.
  • Octaves: Controls the detail level (complexity).
  • Opacity: Fine-tune the blend strength.

Usage

Simply copy the generated CSS class and apply it to any element. You can stack it with gradients or colors using comma-separated backgrounds:


.my-element {
background-color: #000;
/* Paste the generated noise code here, combined with your background */
background-image:
url('data:image/svg+xml...'), linear-gradient(to bottom, #333, #000);
}