Monochrome Mesh
Deux pseudo-éléments CSS superposés — blur, gradients radiaux et phases opposées — composent un maillage lumineux bleu-indigo, pur CSS, 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
Le conteneur .mono-mesh a overflow: hidden et un fond quasi-noir (#050510). Ses deux pseudo-éléments ::before et ::after sont positionnés en absolute avec inset: -25 % / -20 % : ils débordent du cadre dans toutes les directions, mais le overflow: hidden les coupe. Ce surdimensionnement garantit qu'aucun bord blanc n'apparaît lors des translations de l'animation.
Chaque pseudo-élément empile plusieurs radial-gradient() : ::before en superpose cinq (positions 20 %/25 %, 75 %/30 %, 40 %/75 %, 85 %/80 %, 10 %/60 %) dans des tons bleu-indigo (rgba 30–100, 30–80, 160–240, opacités 0,45–0,70) ; ::after ajoute trois halos complémentaires plus violacés (jusqu'à rgba(90, 70, 255, .35)). Un filter: blur(30px) / blur(25px) fond ces huit sources ponctuelles en nuages de couleur continus — le maillage naît de leur superposition.
L'animation @keyframes monoShift combine translate (±4–6 % en X et Y) et scale (0,94–1,06) sur quatre keyframes (0 %, 33 %, 66 %, 100 %). ::before tourne à 10 s en alternate, ::after à 13 s en alternate-reverse : les deux couches dérivent en directions et vitesses différentes. Leur LCM est de 130 s — la répétition visible est imperceptible, le mouvement paraît organique.
L'effet est 100 % déclaratif : js est vide, aucun script n'est chargé. La balise <span class="mono-mesh-label"> utilise position: relative; z-index: 1 pour flotter au-dessus des pseudo-éléments avec un display: flex centré et un text-shadow bleu diffus.
Accessibilité
- prefers-reduced-motion : absent du code — l'animation tourne en continu quelle que soit la préférence système. Recommandé : ajouter
@media (prefers-reduced-motion: reduce) { .mono-mesh::before, .mono-mesh::after { animation: none; } }. - Aucun attribut
aria-hiddensur le conteneur : pour un usage purement décoratif, ajoutezaria-hidden="true"sur.mono-meshpour que les lecteurs d'écran ignorent la structure vide des pseudo-éléments. - Couleur du label :
rgba(180, 200, 255, .9)sur fond#050510— ratio de contraste ≥ 12:1, WCAG AAA. - Aucune interaction requise : l'effet est 100 % passif (ni clic, ni événement JS) — aucune exigence de navigation clavier.
- Dégradé gracieux : sans support CSS
animation(navigateurs très anciens), les gradients s'affichent statiques — fond bleu-indigo fixe, aucune erreur JS dans tous les cas.
Compatibilité navigateur
Repose sur radial-gradient, filter: blur et animation CSS — supportés depuis Chrome 26, Firefox 35 et Safari 9. Zéro dépendance JavaScript.
Sans support <code>animation</code>, les gradients s'affichent statiques (fond bleu-indigo fixe, pas de mouvement). Sans <code>filter: blur</code>, les halos restent distincts mais lisibles. Aucune erreur JS dans tous les cas.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="mono-mesh" aria-hidden="true">
<!-- Contenu optionnel (label ou overlay) -->
<span class="mono-mesh-label">INDIGO</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 |
|---|---|---|
| Palette — rgba dans ::before / ::after | 8 halos bleu-indigo | Remplacez les valeurs RVB des radial-gradient de ::before (5 halos) et ::after (3 halos) pour changer la teinte — ex. pourpre, vert émeraude, gris acier. |
| filter: blur(30px) et blur(25px) | 30px / 25px | Réduire (10–15 px) = mailles plus nettes et contrastées ; augmenter (50–60 px) = atmosphère très diffuse et fondue. |
| inset: -25% et -20% | -25 % / -20 % | Contrôle le débordement des halos. Plus négatif (ex. -40 %) = halos plus larges ; proche de 0 % = gradients concentrés au centre. |
| Durées 10s et 13s (animation) | 10s / 13s | Deux durées inégales créent un battement naturel (LCM = 130 s). Ralentir (20s/26s) pour un effet hypnotique ; accélérer (4s/5s) pour un dynamisme plus marqué. Conservez le ratio ~1,3. |
| @keyframes monoShift — amplitudes translate / scale | translate(6 %, -4 %) scale(1,06) max | Augmentez les pourcentages pour un mouvement plus ample ; réduisez à translate(1 %, -1 %) et scale(1) pour un effet quasi-statique. |
| background: #050510 sur .mono-mesh | #050510 | Fond de base visible quand les halos sont peu couvrants. #000 pour plus de profondeur ; #0a0a1a pour un bleu nuit légèrement plus clair. |
| .mono-mesh { width; height } | 320px × 220px | Changez en width: 100%; height: 100% pour remplir le parent. L'effet s'adapte à toute taille — les positions % des gradients restent proportionnelles. |
FAQ
radial-gradient, filter: blur et animation sur deux pseudo-éléments. Aucun script n'est chargé. Il s'intègre sans modification dans React, Vue, Svelte ou tout autre framework : placez simplement .mono-mesh dans votre composant.radial-gradient de .mono-mesh::before (5 halos) et ::after (3 halos). Pour un camaïeu vert émeraude, remplacez par exemple rgba(30, 50, 180, .7) par rgba(20, 160, 80, .7) en conservant la structure. Toutes les teintes fonctionnent ; les mono-tons (camaïeux) donnent les résultats les plus élégants..mono-mesh a position: relative et overflow: hidden : ajoutez un enfant direct avec position: relative; z-index: 1 (comme le .mono-mesh-label inclus) pour le faire flotter au-dessus des pseudo-éléments. Placez-y un titre, un bouton ou une card — le maillage reste en arrière-plan.
