Animated Border Mesh
Cinq dégradés radiaux floutés pivotent en continu derrière un wrapper CSS pour révéler une tranche lumineuse multicolore — 100 % 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
L'effet repose sur un empilement à deux couches dans un wrapper overflow:hidden. Le .border-mesh-wrapper définit padding:3px et border-radius:18px : ce sont ces 3 px de rembourrage qui constituent la « bordure » visible, révélée parce que la couche de dégradé déborde sous le fond opaque du contenu intérieur.
La couche .border-mesh-gradient est positionnée avec inset:-50% — elle occupe quatre fois la surface du wrapper — et compose cinq radial-gradient superposés (rose, cyan, jaune, vert, violet) à des positions et opacités décalées. Un filter:blur(15px) fond les teintes en un maillage dégradé continu, puis l'animation @keyframes borderMeshSpin fait pivoter cet ensemble en 8 secondes linéaires en boucle infinie — la rotation d'une grande surface carrée dans un rectangle produit le défilement apparent des couleurs le long des quatre bords.
Le .border-mesh-inner se superpose avec z-index:1 et un fond explicite background:#0a0a0f qui masque l'intégralité du dégradé hormis la tranche de padding — aucun pseudoélément, aucune image SVG. Le <span> intérieur utilise background-clip:text combiné à -webkit-text-fill-color:transparent sur un dégradé linéaire à 200 % de largeur : sa propriété background-position oscille via @keyframes borderTextShift en 4 secondes, ce qui fait défiler les teintes rose/cyan/or sur le texte lui-même.
Accessibilité
- prefers-reduced-motion : absent du code — les animations
borderMeshSpinetborderTextShifttournent même si l'OS signale une préférence de réduction du mouvement. Ajouter@media (prefers-reduced-motion: reduce) { .border-mesh-gradient, .border-mesh-inner span { animation: none !important; } }si l'élément est visible de manière prolongée. - Le texte via
background-clip:textest coloré dynamiquement (rose → cyan → or) sur fond sombre : le contraste varie selon la phase de l'animation et peut descendre sous 4,5:1 WCAG AA. Utiliser du texte blanc uni (color:#fff; -webkit-text-fill-color:unset) pour les contenus critiques. - La structure de base ne comporte aucun
role,aria-labelni attribut descriptif. Si l'élément porte un sens visuel significatif, ajouterrole="img"etaria-labelsur le wrapper. - Navigation au clavier : l'effet est 100 % CSS, sans gestionnaire JS. Les éléments interactifs placés dans
.border-mesh-inner(boutons, liens) restent accessibles normalement et conservent leur ordre de tabulation. - Le fond du
.border-mesh-innerest explicitement#0a0a0f— pas detransparent, ce qui évite toute collision de lisibilité avec un fond parent clair.
Compatibilité navigateur
Requiert la propriété raccourcie inset (Chrome 87+, Firefox 87+, Safari 14.1+), filter:blur() et background-clip:text avec préfixe -webkit- déjà présent dans le code. Zéro dépendance JavaScript.
Si <code>inset</code> ou <code>filter:blur()</code> ne sont pas supportés, le wrapper affiche son contenu sans bordure animée — aucune erreur bloquante, le contenu interne reste lisible avec son fond opaque.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="border-mesh-wrapper">
<div class="border-mesh-gradient"></div>
<div class="border-mesh-inner">
<!-- Votre contenu ici -->
<span>Texte avec dégradé animé (optionnel)</span>
</div>
</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 |
|---|---|---|
| `padding` sur `.border-mesh-wrapper` | 3px | Épaisseur de la bordure visible. 2 px = trait fin élégant, 5–6 px = cadre épais très marqué. |
| `border-radius` sur `.border-mesh-wrapper` | 18px | Rayon de courbure du coin extérieur. Synchronisez `.border-mesh-inner` au rayon extérieur moins le padding (défaut : 18 − 3 = 15 px). |
| Couleurs des `radial-gradient` dans `.border-mesh-gradient` | Rose, cyan, jaune, vert, violet | Remplacez les cinq rgba(…) pour une palette froide (bleu/cyan/vert), chaude (orange/rouge/or) ou alignée sur votre brand. |
| `filter: blur(…)` sur `.border-mesh-gradient` | 15px | Fondu du maillage. 8 px = couleurs nettes et tranchées, 22 px = halo diffus et lumineux. |
| `animation-duration` dans `borderMeshSpin` | 8s | Vitesse de rotation de la bordure. 4 s = mouvement bien visible, 20 s = transition quasi imperceptible pour un fond de page. |
| `width` / `height` sur `.border-mesh-wrapper` | 300px / 190px | Dimensions du composant. L'effet s'adapte librement : de 160×48 px pour un bouton à 600×400 px pour une grande carte. |
| Dégradé de `.border-mesh-inner span` | #ff0080, #00c8ff, #fc0 | Couleurs du dégradé clip sur le texte. Supprimez la règle entière et ajoutez color:#fff; -webkit-text-fill-color:initial pour un texte blanc classique. |
| `animation-duration` dans `borderTextShift` | 4s | Vitesse du défilement de teinte sur le texte. 2 s = changement rapide, 8 s = transition lente à peine perceptible. |
FAQ
borderMeshSpin et borderTextShift) sont déclarées dans des @keyframes natifs, sans aucun fichier JS à charger ni dépendance npm. Copiez le HTML et le CSS : l'effet démarre immédiatement dans tous les navigateurs modernes.width et height sur .border-mesh-wrapper librement. L'unique ajustement lié est le border-radius du .border-mesh-inner, qui doit être égal au rayon extérieur moins la valeur de padding pour aligner les coins (par défaut : 18 − 3 = 15 px). Le reste de l'effet s'adapte automatiquement grâce à inset:-50% sur la couche de dégradé..border-mesh-inner porte un background opaque pour masquer le dégradé sous le contenu. Si vous n'avez pas besoin du texte dégradé animé, supprimez la règle .border-mesh-inner span { background: … } et l'animation borderTextShift.
