Fondamentaux

Boutons Texte & Typo Formulaires Navigation & UI Chargement

Design & Visuels

Backgrounds Glass & Morphism Effets Visuels Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Profondeur Curseurs

Galerie & Plus

Cartes & Layouts Galerie & Média Data & Visualisation Atmosphère Utilitaires
Tous les effets Nouveautés Favoris Templates Blog Astuces ✨ Passer Premium
BackgroundsGratuit

Noise Overlay

Un ::after CSS injecte un filtre SVG feTurbulence encodé en data URI sur un gradient via mix-blend-mode: overlay — rugosité organique, zéro JavaScript.

CSSSVGTexture

Noise Overlay

Texture subtile sur gradient

Survolez ou cliquez la scène pour interagir

Cet effet est gratuit — la catégorie Backgrounds en contient 50 au total, dont 6 gratuits. Effect.Labs regroupe 811 effets vanilla. Découvrir la catégorie →

Voir dans le catalogue Compte gratuit

Exemples d'usage

① Hero plein cadre — Fond de bannière avec profondeur

QuandUne bannière plein écran ou un hero couvrant toute la hauteur de fenêtre, où un gradient CSS plat paraît trop synthétique.
PourquoiSur une grande surface, la texture de bruit casse l'uniformité du gradient et donne au fond une qualité matière — tissu, papier teinté ou parchemin numérique — sans alourdir le markup d'une seule balise supplémentaire.
RéglagesGradient large spectre (135deg, #1e1b4b, #6d28d9, #db2777), opacity: 0.22 pour renforcer l'effet sur une grande surface, border-radius: 0, baseFrequency abaissé à 0.65 dans le SVG pour un grain légèrement plus visible.

Vue d'ensemble · Août 2026

② Dashboard — Cartes de métriques sur gradient

QuandDes widgets de tableau de bord (MRR, abonnés, NPS) avec un fond dégradé coloré qui doit lire « designé », pas « CSS basique ».
PourquoiLa texture ajoute un niveau de finition visuelle qui distingue une carte soignée d'une simple <code>div</code> colorée. Elle s'applique à n'importe quelle taille de carte via le <code>::after</code>, sans recalcul.
RéglagesGradient marque sur chaque carte (145deg, #312e81, #6366f1), opacity: 0.12 pour une discrétion maximale, border-radius: 14px, mix-blend-mode: soft-light pour un rendu plus doux sur les palettes claires.
Bibliothèque 124 playlistes

③ App musicale — Pochette gradient par genre ou mood

QuandUne interface musicale (player, bibliothèque, liste de lecture) où chaque genre ou ambiance génère sa pochette via un gradient de couleur, sans image — l'effet sert de token de design systématique.
PourquoiLa texture de bruit unifie des surfaces de couleurs très différentes : elles partagent toutes la même « matière » papier, ce qui crée une cohérence de design system visible à n'importe quelle taille de vignette, sans fichier image ni requête réseau.
RéglagesGradient adaptatif par genre (150deg, #1a1a2e, #6d28d9 pour Jazz ; 150deg, #052e16, #10b981 pour Lo-fi ; etc.), opacity: 0.20 pour la lisibilité sur les petites vignettes, border-radius: 12px, mix-blend-mode: overlay.

Comment ça marche

L'effet repose entièrement sur le pseudo-élément ::after de .ng-overlay-scene. Ce pseudo-élément couvre la totalité du conteneur (inset: 0) et reçoit un SVG encodé en data URI comme valeur de background. Le SVG embarque un filtre <feTurbulence> appliqué à un <rect> plein cadre — aucun fichier externe, aucune requête réseau, aucun thread d'animation.

Le filtre est configuré avec type="fractalNoise", baseFrequency="0.9" et numOctaves="4". fractalNoise produit un bruit lisse de type Perlin, sans discontinuités vives. baseFrequency pilote la densité : 0,9 donne un grain fin et papier ; abaisser à 0,3–0,5 produit un bruit plus grossier, type sable ou béton. Chaque octave supplémentaire superpose une fréquence plus haute : 4 octaves ajoutent du détail à plusieurs échelles et rendent la texture plus riche qu'un simple bruit mono-fréquence. stitchTiles="stitch" garantit un raccord sans joint si le motif se répète.

mix-blend-mode: overlay fusionne le bruit généré avec le gradient du conteneur : les zones claires du bruit éclaircissent localement le gradient, les zones sombres l'assombrissent. L'effet est amplificateur de contraste local, ce qui crée la sensation de relief sans modifier la palette de couleurs perçue. À opacity: 0.15, la texture reste volontairement discrète — une rugosité visuelle qui casse l'aspect « plastique » des gradients CSS plats sans écraser les couleurs.

pointer-events: none sur le ::after garantit que la superposition n'intercepte ni clics ni survols. Le contenu texte (.ng-overlay-content) est positionné en z-index: 1 pour rester au-dessus du pseudo-élément. Le navigateur rastérise le SVG une seule fois au premier rendu et le met en cache comme n'importe quelle image — charge CPU nulle en continu.

Accessibilité

  • prefers-reduced-motion non requis : l'effet est entièrement statique — aucune animation, aucun requestAnimationFrame, aucun repli à implémenter.
  • Le pseudo-élément ::after est décoratif par nature : NVDA, JAWS et VoiceOver ignorent nativement les pseudo-éléments CSS — aucun aria-hidden n'est nécessaire.
  • pointer-events: none sur le ::after : la superposition de bruit ne bloque ni les clics, ni le survol, ni la sélection de texte sur les éléments enfants.
  • Contraste texte : blanc (#ffffff) sur le gradient violet–rose du code original. Côté violet (#8b5cf6) le ratio atteint ~5,7:1 (WCAG AA) ; côté rose (#ec4899) il descend à ~3,9:1. Au centre le ratio avoisine 4,5:1 (limite AA). Mesurez avec votre propre palette si vous changez le gradient.
  • Navigation au clavier : l'effet n'ajoute aucun élément focusable et ne modifie pas le flux de tabulation de la page.

Compatibilité navigateur

Nécessite mix-blend-mode et les filtres SVG en data URI — supportés dans tous les navigateurs modernes depuis 2017. Zéro dépendance.

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

Sans support de <code>mix-blend-mode</code> (IE 11), le <code>::after</code> s'affiche comme une couche unie semi-transparente à peine visible à 0,15 d'opacité — le gradient reste lisible, aucune erreur CSS ou JS ne survient.

Le code

Copiez les trois blocs dans votre page. Aucune dépendance.

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

Personnaliser

Options passées à l'API ou attributs data-* :

Option / propriétéDéfautEffet
background (.ng-overlay-scene) linear-gradient(135deg, #8b5cf6, #ec4899) Gradient du conteneur — changez les couleurs, l'angle (0–360°) ou ajoutez des arrêts intermédiaires pour adapter la charte graphique.
opacity (::after) 0.15 Intensité de la texture. 0,08–0,12 = très subtil (surfaces claires ou palettes pastel), 0,18–0,28 = texture bien visible (grandes surfaces sombres, effets éditoriaux).
mix-blend-mode (::after) overlay overlay = contraste local maximum (recommandé sur gradients saturés). soft-light = fusion plus douce, idéal sur palettes pastel ou claires. multiply = assombrit uniquement, sans éclaircir.
baseFrequency (dans le SVG) 0.9 Densité du grain encodée dans la data URI. 0,3–0,5 = grain grossier (sable, béton), 0,7–1,2 = grain fin (papier), >1,5 = quasi-invisible. Modifiez la valeur dans la chaîne URL du CSS.
numOctaves (dans le SVG) 4 Nombre de couches de fréquence. 2 = texture simple et rapide, 4 = riche (défaut), 6 = complexité maximale (rendu légèrement plus lent sur mobile bas de gamme).
type (dans le SVG) fractalNoise Type de bruit. fractalNoise = bruit lisse de type Perlin (défaut). turbulence = bruit chaotique avec arêtes vives, effet usé, écorché ou impression d'arrière-plan aquarelle.
border-radius (.ng-overlay-scene) 16px Rayon des coins du conteneur — définit aussi la forme du clip de l'overlay de bruit.

FAQ

Le filtre feTurbulence est-il recalculé à chaque frame ?

Non. Le SVG est embarqué comme data URI dans la propriété background du ::after. Le navigateur le rastérise une seule fois au premier rendu et le met en cache comme n'importe quelle image de fond — aucune charge CPU continue. C'est la différence fondamentale avec un canvas animé : ici, feTurbulence est statique et gratuit en perf.

Comment modifier baseFrequency ou numOctaves sans rechargement ?

En CSS pur, il faut éditer la data URI directement. Pour une modification dynamique via JS, injectez un <svg> masqué avec un <filter id="n"> dans le DOM et référencez-le depuis le CSS via background: url("#n") — mais attention, cette syntaxe est non-supportée dans certains navigateurs. Alternative portable : générez une nouvelle valeur CSS via element.style.setProperty('--noise-bg', 'url(...)') avec une CSS custom property.

Peut-on combiner Noise Overlay avec une image photographique ?

Oui, en remplaçant le linear-gradient par un background combiné : linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url(photo.jpg) center/cover no-repeat. Le ::after applique sa texture par-dessus l'image et l'overlay sombre, donnant un aspect photographique granuleux et cinématique. Le conteneur doit avoir position: relative et overflow: hidden.