Neon Mesh
Quatre taches néon (bleu électrique, rose vif, vert lime, violet) dérivent et pulsent en boucle sur fond sombre — fond animé en CSS pur, zéro JavaScript.
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
L'effet repose sur quatre <div class="neon-mesh-blob"> positionnés en position: absolute dans le conteneur .neon-mesh. Chaque blob est un cercle parfait (border-radius: 50%) auquel un filter: blur(40px) applique un halo diffus. Le conteneur a overflow: hidden : les blobs qui débordent sont écrêtés, ce qui produit les bords de lumière caractéristiques du maillage.
Trois @keyframes CSS pilotent le mouvement : neonFloat1 (translation +30px/+20px, scale 1,15), neonFloat2 (-25px/+15px, scale 1,1), neonFloat3 (+20px/-25px, scale 1,2). Les durées sont délibérément asymétriques — 6 s, 7 s, 8 s et 9 s — pour que les cycles ne se resynchronisent jamais. Le blob 4 rejoue neonFloat1 avec animation-direction: reverse, ce qui lui donne un mouvement opposé au blob 1 et crée un effet de brassage.
Les quatre couleurs ont des alphas différents : bleu rgba(0,100,255,.7), rose rgba(255,0,128,.7), vert lime rgba(0,255,80,.6), violet rgba(180,0,255,.5). Le mode de composition par défaut (source-over) fait que les zones de chevauchement mélangent les couleurs additionnellement, produisant des teintes intermédiaires qui changent à mesure que les blobs se déplacent. Le fond #050510 absorbe la lumière non couverte.
Le <span class="neon-mesh-label"> est facultatif : position: relative; z-index: 1 le fait flotter au-dessus des blobs. Son text-shadow double — blanc pur à 10 px puis bleu cyan à 30 px — simule l'effet de rayonnement des tubes néon. Aucun JavaScript n'est impliqué : l'effet est entièrement déclaratif.
Accessibilité
- prefers-reduced-motion : non géré dans le code livré — les animations CSS tournent systématiquement. Ajoutez
@media (prefers-reduced-motion: reduce) { .neon-mesh-blob { animation: none } }pour figer les blobs à leur position initiale (les couleurs restent visibles, seul le mouvement s'arrête). - En tant que fond décoratif, le conteneur
.neon-meshdoit porteraria-hidden="true"— son contenu est purement visuel et ne transmet aucune information. - Aucun élément interactif n'est présent dans l'effet : pas de zone focusable, pas d'événement clavier à gérer.
- Le label
.neon-mesh-labelaffiche du texte blanc#fffsur fond sombre#050510— ratio de contraste > 21:1, largement supérieur au seuil WCAG AAA (7:1). - Tout overlay de contenu (titres, boutons CTA) positionné au-dessus des blobs relève de la responsabilité de l'intégrateur : prévoir un scrim sombre si le rapport de contraste n'est pas garanti par la palette.
Compatibilité navigateur
Requiert filter: blur() et les animations CSS — supportés par tous les navigateurs modernes depuis 2018.
Sans support de <code>filter</code> (IE 11), les blobs s'affichent en aplats colorés sans flou — la palette reste visible, le dégradé soft disparaît. Aucun JS n'est impliqué, aucune erreur possible.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="neon-mesh" aria-hidden="true">
<div class="neon-mesh-blob"></div>
<div class="neon-mesh-blob"></div>
<div class="neon-mesh-blob"></div>
<div class="neon-mesh-blob"></div>
<!-- Facultatif : label néon centré -->
<span class="neon-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 |
|---|---|---|
| .neon-mesh → background | #050510 | Fond de base du conteneur. Utilisez #000 pour un noir pur ou un dégradé linéaire pour un fond directionnel. |
| .neon-mesh-blob → filter: blur() | blur(40px) | Intensité du flou de chaque blob. 20px = taches distinctes et saturées, 80px = halo très diffus. Augmentez proportionnellement à la taille du conteneur. |
| .neon-mesh-blob:nth-child(1) → background | rgba(0,100,255,.7) | Couleur du blob bleu électrique. L'alpha contrôle l'intensité ; réduisez à .4 pour un bleu pastel discret. |
| .neon-mesh-blob:nth-child(2) → background | rgba(255,0,128,.7) | Couleur du blob rose vif. Remplacez par rgba(255,80,0,.7) pour une tonalité orange–feu. |
| .neon-mesh-blob:nth-child(3) → background | rgba(0,255,80,.6) | Couleur du blob vert lime. Passez à display:none pour un duo bleu–rose plus sobre. |
| .neon-mesh-blob:nth-child(4) → background | rgba(180,0,255,.5) | Couleur du blob violet. Ajustez l'alpha pour atténuer sans supprimer la teinte. |
| .neon-mesh-blob:nth-child(n) → animation-duration | 6s / 7s / 8s / 9s | Durées asymétriques — ne pas les uniformiser, au risque de créer une pulsation synchronisée. Multipliez toutes par 2 (12s/14s/16s/18s) pour un mouvement lent et contemplatif. |
| .neon-mesh → width / height | 320px / 220px | Dimensions du conteneur. Passez à 100%/100vh pour un fond plein écran ; augmentez le blur proportionnellement. |
| .neon-mesh → border-radius | 16px | 0 pour un fond bord-à-bord, 50% pour un médaillon circulaire, 12px pour une carte UI standard. |
FAQ
@keyframes, filter: blur() et positionnement absolu. Aucune dépendance npm, aucun JS. Il fonctionne dans un e-mail HTML, un <iframe> sandboxé ou un CMS sans accès JS..neon-mesh les propriétés position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0 dans une section position: relative; overflow: hidden. Placez votre contenu dans un enfant position: relative; z-index: 1 — il flottera au-dessus des blobs. Augmentez le blur à 60–80px pour adoucir l'effet sur grande surface.@media (prefers-reduced-motion: reduce) { .neon-mesh-blob { animation: none } } pour figer les blobs à leur position initiale. Les couleurs restent visibles ; seul le mouvement s'arrête.
