Gradient Border Morph
Bordure en dégradé conique qui tourne lentement ; au survol, au focus ou au toucher, ses quatre couleurs glissent en 0,8 s vers une palette chaude.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La boîte .gbm-box (200 × 120 px, arrondi 12 px) pose derrière elle un calque ::before qui dépasse de 3 px de chaque côté, rempli d'un conic-gradient à quatre couleurs : indigo #6366f1, violet #8b5cf6, magenta #d946ef, rose #ec4899, puis retour à l'indigo. Un second calque ::after, du fond de la boîte, masque l'intérieur à 3 px du bord : il reste une bande colorée de 6 px à cheval sur le bord, qui tourne d'un tour complet en 6 s.
Au survol, ou quand un élément de la boîte a le focus (:focus-within), les quatre couleurs passent à ambre #f59e0b, rouge #ef4444, rose #ec4899 et cyan #06b6d4, et la bande se floute de 2 px. Le changement dure 0,8 s et passe par toutes les teintes intermédiaires : à mi-parcours, l'indigo est déjà devenu un mauve tirant vers l'ocre.
Ce fondu existe parce que les quatre couleurs sont des variables enregistrées avec @property en tant que <color>, et l'angle en tant que <angle>. Un dégradé écrit en dur ne se transitionne pas : le navigateur bascule d'une image à l'autre. Ici, il interpole chaque couleur séparément, et le dégradé est recalculé à chaque image (mesuré dans les trois moteurs : 99,102,241 → 142,118,173 → 194,138,92 → 245,158,11 en 0,9 s pour la première couleur).
Le libellé est un lien, .gbm-link, étiré sur toute la boîte par son ::after ; il fait de la boîte une vraie cible cliquable, atteignable au clavier, et c'est lui qui déclenche la palette chaude au focus et au toucher.
Accessibilité
- Clavier : Tab s'arrête sur le lien de la boîte ; la palette chaude arrive comme au survol et un contour blanc (
--gbm-ring) encadre la boîte quand le focus vient du clavier. Dans Safari, l'arrêt de Tab sur les liens dépend du réglage clavier du navigateur (Option+Tab sinon). - Toucher : toucher le lien fait changer la palette dans Chromium, Firefox et WebKit (mesuré avec écran tactile simulé) ; elle revient quand on touche ailleurs.
- Mouvement réduit : avec
prefers-reduced-motion: reduce, le dégradé ne tourne plus et la palette change d'un coup, sans fondu ; le flou de 2 px au survol est conservé. - Couleur seule : le changement de palette ne doit pas être la seule indication d'un état (sélection, choix validé) ; ajoutez un texte ou une coche si la boîte sert à choisir quelque chose.
Compatibilité navigateur
CSS seul, aucun JavaScript. Mesuré dans Chromium 151, Firefox 153 et le WebKit 26.5 de Playwright : bordure visible, rotation, fondu réel des quatre couleurs, deux copies indépendantes, survol, Tab, toucher, 390 px et mouvement réduit. Versions minimales d'après @mdn/browser-compat-data : rotation et fondu reposent sur @property (Chrome 85, Firefox 128, Safari 16.4) ; le lien étiré utilise inset (Chrome 87).
Sans @property, les couleurs passent par des variables ordinaires et l'angle a une valeur de secours dans var() : la bordure reste affichée, ne tourne pas, et change de palette instantanément au survol (vérifié en retirant les règles @property dans Chromium).
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0771-root">
<div class="gbm-box">
<a class="gbm-link" href="#gradient-morph">Gradient Morph</a>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
--gbm-from-1 à --gbm-from-4 |
#6366f1, #8b5cf6, #d946ef, #ec4899 |
Les quatre couleurs du dégradé au repos (la première ferme aussi le tour). |
--gbm-to-1 à --gbm-to-4 |
#f59e0b, #ef4444, #ec4899, #06b6d4 |
Les quatre couleurs au survol, au focus et au toucher. |
--gbm-morph |
.8s |
Durée du fondu d'une palette à l'autre (et du flou). |
--gbm-speed |
6s |
Durée d'un tour du dégradé. |
--gbm-w, --gbm-h, --gbm-radius |
200px, 120px, 12px |
Taille et arrondi ; la bordure suit l'arrondi et la largeur ne dépasse jamais celle du conteneur. |
--gbm-fill |
#0a0a0f |
Fond de la boîte, qui sert aussi de masque intérieur. |
--gbm-ring |
#fff |
Couleur du contour de focus clavier. |
FAQ
background en dégradé n'est pas animable : entre deux dégradés, le navigateur change d'image d'un coup. En enregistrant chaque couleur comme <color>, la transition porte sur quatre couleurs simples, que le navigateur sait mélanger ; le dégradé qui les utilise suit, image après image.<a> ou votre <button> dedans avec la classe gbm-link, comme dans l'exemple de la médiathèque : son ::after rend toute la boîte cliquable, et son focus déclenche la palette chaude. Un <button> garde le fond et la bordure du navigateur : ajoutez-lui background: none; border: 0; font: inherit. Réglez --gbm-h et --gbm-radius pour une forme de pilule.--gbm-from-* des gris proches du fond, comme dans le planning de l'école de danse. Le fondu part alors d'un filet presque neutre et va vers les couleurs vives de --gbm-to-*.
