Fundamentals

Buttons Text & Typography Forms Navigation & UI Loading

Design & Visuals

Backgrounds Glass & Morphism Visual Effects Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Depth Cursors

Gallery & More

Cards & Layouts Gallery & Media Data & Visualization Atmosphere Utilities
All Effects New Favorites Templates Blog Tips ✨ Go Premium
BackgroundsFree

Noise Overlay

A CSS ::after pseudo-element injects an SVG feTurbulence filter encoded as a data URI onto a gradient via mix-blend-mode: overlay — organic texture, zero JavaScript.

CSSSVGTexture

Updated

Noise Overlay

Subtle texture on gradient

Hover or click the scene to interact

This effect is free — the Backgrounds category contains 55 effects total, including 7 free. Effect.Labs has 840 vanilla effects. Explore the category →

View in catalogue Free account

Usage examples

① Full-frame hero — Depth backdrop for a banner

WhenA full-screen banner or full-viewport hero where a flat CSS gradient looks too synthetic.
WhyOn a large surface, the noise texture breaks gradient uniformity and gives the background a material quality — woven fabric, tinted paper, or digital parchment — without adding a single extra markup element.
SettingsWide-spectrum gradient (135deg, #1e1b4b, #6d28d9, #db2777), opacity: 0.22 to strengthen the effect on large surfaces, border-radius: 0, baseFrequency lowered to 0.65 in the SVG for slightly more visible grain.

Overview · August 2026

② Dashboard — Metric cards on gradient backgrounds

WhenDashboard widgets (MRR, subscribers, NPS) with a coloured gradient background that needs to read as 'designed', not 'plain CSS'.
WhyThe texture adds a layer of visual finish that distinguishes a polished card from a plain coloured div. It applies at any card size via the ::after, with no recalculation.
SettingsBrand gradient per card (145deg, #312e81, #6366f1), opacity: 0.12 for maximum subtlety, border-radius: 14px, mix-blend-mode: soft-light for a softer result on light palettes.
Library 124 playlists

③ Music app — Genre-adaptive gradient cover

WhenA music interface (player, library, playlist view) where each genre or mood generates its cover via a colour gradient, without images — the effect acts as a systematic design token.
WhyThe noise texture visually unifies surfaces of very different colours: they all share the same paper-like 'material', creating design-system coherence at any thumbnail size without image files or network requests.
SettingsAdaptive gradient per genre (150deg, #1a1a2e, #6d28d9 for Jazz; 150deg, #052e16, #10b981 for Lo-fi; etc.), opacity: 0.20 for legibility on small thumbnails, border-radius: 12px, mix-blend-mode: overlay.

How it works

The entire effect lives inside the ::after pseudo-element of .ng-overlay-scene. This pseudo-element covers the whole container (inset: 0) and receives an SVG encoded as a data URI as its background value. The SVG embeds a <feTurbulence> filter applied to a full-frame <rect> — no external file, no network request, no animation thread.

The filter is configured with type="fractalNoise", baseFrequency="0.9", and numOctaves="4". fractalNoise produces smooth Perlin-style noise without sharp discontinuities. baseFrequency controls grain density: 0.9 gives fine, paper-like grain; lowering to 0.3–0.5 produces coarser noise, like sand or concrete. Each additional octave stacks a higher frequency layer: 4 octaves add details at multiple scales, making the texture richer than a single-frequency noise. stitchTiles="stitch" ensures the pattern tiles seamlessly if the background repeats.

mix-blend-mode: overlay composites the generated noise onto the container's gradient: bright noise areas locally lighten the gradient, dark areas darken it. The mode acts as a local contrast amplifier, creating a sense of relief without changing the perceived colour palette. At opacity: 0.15, the texture stays intentionally subtle — a visual roughness that breaks the 'plastic' look of flat CSS gradients without overwhelming the colours.

pointer-events: none on the ::after ensures the overlay never intercepts clicks or hovers. Text content (.ng-overlay-content) is positioned at z-index: 1 to stay above the pseudo-element. The browser rasterises the SVG once at first render and caches it like any image — zero ongoing CPU load.

Accessibility

  • No prefers-reduced-motion handling needed: the effect is entirely static — no animation, no requestAnimationFrame, no fallback to implement.
  • The ::after pseudo-element is decorative by nature: NVDA, JAWS, and VoiceOver natively ignore CSS pseudo-elements — no aria-hidden attribute required.
  • pointer-events: none on the ::after: the noise overlay never blocks clicks, hovers, or text selection on child elements.
  • Text contrast: white (#ffffff) on the original purple-to-pink gradient. On the purple side (#8b5cf6) the ratio reaches ~5.7:1 (WCAG AA); on the pink side (#ec4899) it drops to ~3.9:1. At centre the ratio is around 4.5:1 (AA borderline). Measure with your own palette when swapping the gradient.
  • Keyboard navigation: the effect adds no focusable element and does not alter the page's tab order.

Browser compatibility

Requires mix-blend-mode and SVG filters in data URIs — supported in all modern browsers since 2017. Zero dependencies.

Chrome 79+✓ Full
Firefox 72+✓ Full
Safari 13.1+✓ Full
Edge 79+✓ Full
Mobile iOS✓ Full
Android Chrome✓ Full

Without mix-blend-mode support (IE 11), the ::after renders as a plain semi-transparent layer, barely visible at 0.15 opacity — the gradient stays readable, no CSS or JS error occurs.

The code

Copy the three blocks into your page. No dependencies.

HTML 
<div class="ng-overlay-scene">
    <div class="ng-overlay-content">
      <h3>Noise Overlay</h3>
      <p>Subtle texture on gradient</p>
    </div>
  </div>
CSS 
.ng-overlay-scene {
  width: 320px;
  height: 220px;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.ng-overlay-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.15;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.ng-overlay-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.ng-overlay-content h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.ng-overlay-content p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}
JavaScript (fx-0091)

Customize

Options passed to the API or data-* attributes:

Option / propertyDefaultEffect
background (.ng-overlay-scene) linear-gradient(135deg, #8b5cf6, #ec4899) Container gradient — change colors, angle (0–360°), or add intermediate stops to match your brand.
opacity (::after) 0.15 Texture intensity. 0.08–0.12 = very subtle (light surfaces or pastel palettes), 0.18–0.28 = visible texture (large dark surfaces, editorial effects).
mix-blend-mode (::after) overlay overlay = maximum local contrast (recommended on saturated gradients). soft-light = softer blend, ideal on pastel or light palettes. multiply = darkens only, no lightening.
baseFrequency (in the SVG) 0.9 Grain density encoded in the data URI. 0.3–0.5 = coarse grain (sand, concrete), 0.7–1.2 = fine grain (paper), >1.5 = nearly invisible. Edit the value directly in the CSS URL string.
numOctaves (in the SVG) 4 Number of frequency layers. 2 = simple and fast, 4 = rich (default), 6 = maximum complexity (slightly slower on low-end mobile).
type (in the SVG) fractalNoise Noise type. fractalNoise = smooth Perlin-style noise (default). turbulence = choppy noise with sharp edges, worn, distressed, or watercolour-background feel.
border-radius (.ng-overlay-scene) 16px Corner radius of the container — also defines the clip shape of the noise overlay.

FAQ

Is the feTurbulence filter recalculated every frame?

No. The SVG is embedded as a data URI in the ::after's background property. The browser rasterises it once at first render and caches it like any background image — zero ongoing CPU load. This is the fundamental difference from an animated canvas: feTurbulence here is static and free in terms of performance.

How do I change baseFrequency or numOctaves without a page reload?

In pure CSS, you edit the data URI directly. For dynamic JS changes, inject a hidden <svg> with a <filter id="n"> into the DOM and reference it from CSS via a CSS custom property: element.style.setProperty('--noise-bg', 'url("data:...")') using a new encoded string with the updated values.

Can Noise Overlay be combined with a photographic background image?

Yes, by replacing the linear-gradient with a combined background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url(photo.jpg) center/cover no-repeat. The ::after then applies its texture over the image and dark overlay, giving a grainy, cinematic feel. The container must have position: relative and overflow: hidden.