Générateur de bordure en dégradé animé en CSS

Une bordure arc-en-ciel tournante semble simple jusqu'à ce que vous essayiez vraiment d'en construire une en CSS : animer un angle à l'intérieur de conic-gradient() avec une simple propriété personnalisée ne donne rien d'utile, car le navigateur ne sait pas que la valeur est un angle et ne peut pas interpoler entre 0deg et 360deg — il saute simplement. Ce générateur utilise la vraie solution, l'API CSS Properties and Values : `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` indique au navigateur exactement quel type de valeur la propriété personnalisée contient, ce qui débloque une interpolation fluide et accélérée par le GPU via une règle @keyframes.

L'anneau lui-même est un pseudo-élément ::before dimensionné plus grand que la boîte (décalé de la valeur négative de l'épaisseur de la bordure) avec son arrière-plan défini sur `conic-gradient(from var(--border-angle), ...)` revenant à la première couleur pour que le balayage n'ait pas de couture visible. Un masque effectue ensuite le véritable travail de mise en forme : `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` ne conserve que la différence en forme d'anneau entre la padding-box et la content-box, éliminant partout ailleurs le rectangle du dégradé uni. L'ancienne propriété `-webkit-mask-composite: xor` de Safari effectue la même opération et est livrée avec la propriété standard, de sorte que l'effet s'affiche de manière cohérente plutôt que d'échouer silencieusement sur un moteur.

La prise en charge du border-radius n'est pas une réflexion après coup greffée par-dessus — le `border-radius: inherit` du pseudo-élément signifie que le rayon que vous réglez sur la boîte est automatiquement reporté sur l'anneau, de sorte qu'un bouton en forme de pilule ou une carte arrondie reçoive une bordure lumineuse arrondie au lieu de bords droits qui dépassent des coins incurvés. Testez-le en direct : faites glisser le curseur de rayon d'un rectangle pointu à une pilule complète et regardez l'anneau suivre la forme à chaque étape, c'est le détail qui distingue une véritable implémentation de cette technique d'une fausse capture d'écran.

Tout le reste sur la page correspond directement au code généré : le curseur d'épaisseur définit l'épaisseur de l'anneau et le décalage/remplissage du pseudo-élément, le curseur de durée est l'animation-duration de @keyframes, le commutateur de sens inverse simplement le signe de l'angle final de l'image clé (+360deg ou -360deg), et chaque point de couleur est une entrée séparée par des virgules dans l'appel de conic-gradient(). L'ensemble fonctionne dans votre navigateur sans images, sans boucle d'animation pilotée par JavaScript et sans services externes — copiez le bloc CSS et il continue de tourner là où vous le collez.