Noise Mesh
Dégradé maillé de 5 spots radiaux floutés, animé en CSS pur et recouvert d'une texture feTurbulence — fond organique et texturé sans une seule ligne de JS.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Backgrounds comprend 50 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le fond coloré est construit à partir de 5 radial-gradient empilés dans le pseudo-élément ::before, chacun ancré à un point différent (at 30% 20%, at 70% 35%, at 45% 75%, at 80% 70%, at 15% 60%). Ce pseudo-élément déborde de 25 % sur chaque bord (inset: -25%) afin d'éviter les bords nets lors de l'animation. Un filter: blur(28px) fusionne les 5 spots en un dégradé maillé continu.
L'animation @keyframes noiseFloat applique au ::before une combinaison de translate + scale + rotate sur 12 s en mode alternate (aller-retour automatique) — le fond respire en boucle sans accroc ni saut. Seul le pseudo-élément se déplace ; le conteneur et son contenu restent immobiles.
La couche de grain est un <div class="noise-mesh-grain"> positionné en inset:0, z-index:1, qui affiche en fond tuilé (128×128 px) un SVG inline en data URI contenant un filtre <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="4" stitchTiles="stitch">. mix-blend-mode: overlay à opacity: 0.35 le fondent sur le dégradé sans l'écraser — le résultat est une texture organique subtile sans image externe.
L'effet est 100 % CSS, zéro JavaScript. Aucun requestAnimationFrame, aucune dépendance — intégrable dans un composant statique, un e-mail HTML ou un générateur de site statique sans modification.
Accessibilité
- prefers-reduced-motion : aucune règle présente dans le code — l'animation tourne en permanence. Ajoutez
@media (prefers-reduced-motion: reduce) { .noise-mesh::before { animation: none; } }si l'effet couvre une grande surface visible. - Aucun
aria-hiddennirole="img"sur le conteneur dans le HTML fourni : si le fond est purement décoratif, ajoutezaria-hidden="true"sur.noise-mesh. - Le texte
.noise-mesh-label(blanc 85 % sur dégradé coloré) a un contraste variable selon la couleur sous-jacente — vérifiez le ratio WCAG AA (≥ 4,5:1) dans votre contexte avant déploiement. - L'effet ne contient aucune interaction clavier ni événement souris — aucun focus, aucun gestionnaire d'événements à gérer par les technologies d'assistance.
- La couche grain porte
pointer-events: none— elle ne capture aucun clic et n'interfère pas avec les éléments cliquables superposés.
Compatibilité navigateur
Requiert filter: blur() sur les pseudo-éléments et mix-blend-mode — supportés dans tous les navigateurs modernes depuis 2021.
Sans <code>filter: blur()</code> sur pseudo-éléments (navigateurs très anciens), les 5 spots de couleur s'affichent sans fusion — le rendu est plus dur mais lisible. Si <code>mix-blend-mode</code> est absent, le grain s'affiche en mode <code>normal</code> et voile légèrement le fond sans l'altérer.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="noise-mesh">
<div class="noise-mesh-grain"></div>
<!-- Contenu overlay facultatif -->
<span class="noise-mesh-label">Votre texte</span>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| Couleurs des 5 spots (rgba dans ::before background) | rose, bleu, vert, ambre, violet | Modifiez les 5 rgba() dans la propriété background du ::before pour adapter la palette à votre identité visuelle. Conservez des opacités entre 0,4 et 0,7 pour que les spots se fondent correctement après le blur. |
| filter: blur(28px) | 28px | Contrôle la douceur de la fusion entre les spots. Augmentez (40px+) pour un rendu plus abstrait, réduisez (12px) pour des transitions plus nettes et des couleurs plus distinctes. |
| animation-duration: 12s (dans animation du ::before) | 12s | Durée d'un cycle aller (la direction s'inverse automatiquement). 20s = très doux et subtil, 6s = plus dynamique. |
| opacity: .35 (sur .noise-mesh-grain) | 0.35 | Intensité de la couche de grain. 0 = sans grain, 0.6 = grain très marqué qui domine le dégradé. |
| baseFrequency='0.85' (SVG feTurbulence dans background-image de .noise-mesh-grain) | 0.85 | Granularité de la texture dans le data URI SVG. Autour de 0.5 = grain grossier et visible, 1.2 = grain très fin et serré. |
| background-size: 128px 128px (sur .noise-mesh-grain) | 128px 128px | Taille des tuiles de grain. 64px = grain plus fin et répété, 256px = tuile agrandie avec des motifs plus larges. |
| mix-blend-mode: overlay (sur .noise-mesh-grain) | overlay | Mode de fusion du grain sur le dégradé. Essayez soft-light pour un effet plus doux ou screen pour un rendu plus lumineux. |
| border-radius: 16px (sur .noise-mesh) | 16px | Arrondi du conteneur. 0 = plein écran sans bord, valeur élevée = pilule ; 50% = cercle si width = height. |
FAQ
rgba(r,g,b,.xx) dans la propriété background du ::before. Chaque valeur correspond à un spot ancré à une position différente (at 30% 20%, at 70% 35%…). Conservez des opacités entre 0,4 et 0,7 pour que le blur(28px) fusionne correctement les spots.@media (prefers-reduced-motion: reduce) { .noise-mesh::before { animation: none; } }. Le dégradé maillé s'affiche alors de façon statique — la texture de grain reste visible, seule l'animation est désactivée.
