Noise Overlay CSS Generator

Add texture with CSS noise patterns

Noise Settings

Opacity0.2

Intensity1

Noise Color

Blend Mode

Presets

Live Preview

Noise Overlay Preview

This shows the noise texture effect

Generated CSS

.noise-overlay {
  position: relative;
}

.noise-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cfilter%20id%3D%22noise%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.9%22%20numOctaves%3D%224%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23noise)%22%20opacity%3D%220.4%22%2F%3E%3C%2Fsvg%3E");
  background-color: #ffffff;
  opacity: 0.2;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}