Animated Border
Bordure gradient en défilé continu sur une carte — deux pseudo-éléments CSS superposés et une animation background-position, 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. Cartes comprend 41 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La technique repose sur un sandwich de pseudo-éléments. Le ::before est positionné en inset: -2px — il déborde de 2 px de chaque côté de la carte — et reçoit le dégradé sur un canevas 3× plus large que l'élément (background-size: 300% 300%). Le ::after, positionné en inset: 2px, remplit l'intérieur avec la couleur de fond de la carte (var(--bg-elevated)). Les deux pseudo-éléments passent en z-index: -1 ; ::after étant postérieur dans le DOM, il s'affiche par-dessus ::before et masque le gradient à l'intérieur. L'anneau visible entre le bord extérieur de ::before et le bord extérieur de ::after constitue la bordure gradient.
L'animation @keyframes borderGradient fait glisser background-position de 0 50% à 300% 50% en 4 s, linéaire, infini — soit un balayage horizontal d'une pleine largeur du canevas. Le gradient linear-gradient(135deg, #6366f1, #d946ef, #06b6d4, #6366f1) répète la même couleur indigo en premier et en dernier stop : la transition de fin vers début est imperceptible, la boucle est visuellement sans couture.
Les rayons de coin sont compensés symétriquement : ::before reçoit border-radius: calc(var(--radius-xl) + 2px) et ::after reçoit border-radius: calc(var(--radius-xl) - 2px). Ce ±2 px garantit que les courbes intérieure et extérieure de la bordure restent parfaitement concentriques quelle que soit la valeur de --radius-xl.
Accessibilité
- prefers-reduced-motion absent : aucune media query ne stoppe l'animation. Pour les UIs fonctionnelles, ajoutez manuellement
@media (prefers-reduced-motion: reduce) { .card-border-gradient::before { animation: none; } }— la bordure reste visible, statique. - Les pseudo-éléments CSS (
::before,::after) sont invisibles aux technologies d'assistance — aucun attribut ARIA n'est nécessaire sur ces couches décoratives. - L'élément hôte conserve sa sémantique native : l'effet est purement visuel et ne modifie ni rôle ni ordre de tabulation.
- Le contraste texte/fond dépend intégralement du contenu placé à l'intérieur de la carte ; la bordure animée est décorative et n'affecte pas le ratio WCAG.
- Aucune interaction clavier ou pointeur dans l'effet lui-même — l'élément hôte reste focusable selon son type HTML natif.
Compatibilité navigateur
Nécessite les animations CSS et la propriété raccourcie inset — supportés dans tous les navigateurs modernes depuis 2021.
Sans animations CSS (navigateurs anciens), la bordure reste visible mais statique — le premier frame du gradient (background-position: 0 50%) est affiché. Sans inset (IE), les pseudo-éléments ne sont pas positionnés et la carte s'affiche sans bordure.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="card-border-gradient">
<!-- Votre contenu de carte -->
</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 |
|---|---|---|
| --bg-elevated | #1a1a24 | Couleur de fond de la carte et du masque intérieur (::after) — modifier les deux simultanément pour que la bordure reste visible. |
| --radius-xl | 1rem | Rayon des coins. Les ::before et ::after sont recalculés automatiquement via calc(± 2px). |
| Couleurs gradient (::before) | #6366f1, #d946ef, #06b6d4 | Stops dans linear-gradient(135deg, …). Répétez la première couleur en dernier pour une boucle sans saut. |
| Épaisseur de bordure | 2px | Modifiez inset: -2px (::before) et inset: 2px (::after) avec la même valeur absolue. 1px = très fin, 4px = marqué. |
| Durée d'animation | 4s | Valeur dans la propriété animation du ::before. 2s = vif, 8s = ambiant et discret. |
| background-size | 300% 300% | Surface du dégradé. 200% = balayage plus court et contrasté ; 400% = défilé plus lent. Ajustez aussi la valeur finale dans @keyframes. |
| Angle du gradient | 135deg | Direction dans linear-gradient. 90deg = balayage horizontal pur, 45deg = diagonale montante. |
FAQ
card-border-gradient à votre carte et l'animation démarre automatiquement. Compatible avec n'importe quel framework (React, Vue, Angular, Svelte) sans adaptation.linear-gradient(135deg, …) du ::before. Pour une boucle visuellement continue, répétez la première couleur en dernier stop — par exemple linear-gradient(135deg, #f59e0b, #ef4444, #8b5cf6, #f59e0b) pour une palette chaude.prefers-reduced-motion. Pour respecter la préférence système, ajoutez dans votre CSS : @media (prefers-reduced-motion: reduce) { .card-border-gradient::before { animation: none; } }. La bordure gradient reste alors visible, statique.
