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

Noise Overlay

Texture subtile sur gradient

Hover or click the scene to interact

This effect is free — the Backgrounds category contains 50 effects total, including 6 free. Effect.Labs has 811 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 <code>div</code>. It applies at any card size via the <code>::after</code>, 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 <code>mix-blend-mode</code> support (IE 11), the <code>::after</code> 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 style="font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;">Noise Overlay</h3>
    <p>Texture subtile sur gradient</p>
  </div>
</div>
CSS 
.ng-overlay-scene  {
   width: 320px;
   height: 220px;
   position: relative;
   border-radius: 16px;
   overflow: hidden;
   background: linear-gradient(135deg, rgb(139, 92, 246), rgb(236, 72, 153));
   }

.ng-overlay-scene::after  {
   content: "";
   position: absolute;
   inset: 0px;
   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: rgb(255, 255, 255);
   margin: 0px;
   }

.ng-overlay-content p  {
   font-size: 0.82rem;
   color: rgba(255, 255, 255, 0.8);
   margin: 0px;
   }
JavaScript (fx-0091) 
// Effet CSS pur — pas de JavaScript nécessaire

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.