Generador de bordes animados con gradiente CSS

Un borde de arcoíris giratorio parece simple hasta que intentas construirlo en CSS: animar un ángulo dentro de conic-gradient() con una propiedad personalizada común no produce nada útil, porque el navegador no sabe que el valor es un ángulo y no puede interpolar entre 0deg y 360deg; simplemente salta. Este generador emplea la solución real, la API de Propiedades y Valores de CSS: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` le indica al navegador exactamente qué tipo de valor contiene la propiedad personalizada, y eso es lo que desbloquea una interpolación suave y acelerada por GPU a través de una regla @keyframes.

El anillo en sí es un pseudoelemento ::before dimensionado más grande que la caja (con un desplazamiento negativo igual al ancho del borde) y cuyo fondo se establece como `conic-gradient(from var(--border-angle), ...)` que vuelve al primer color para que el barrido no tenga una costura visible. Luego una máscara hace el verdadero trabajo de dar forma: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` conserva solo la diferencia en forma de anillo entre el padding-box y el content-box, descartando el rectángulo de gradiente sólido en cualquier otra parte. La propiedad antigua de Safari `-webkit-mask-composite: xor` realiza la misma operación y se incluye junto a la estándar, de modo que el efecto se renderiza de forma consistente en lugar de fallar silenciosamente en un motor.

El soporte de border-radius no es una ocurrencia tardía añadida a la fuerza: `border-radius: inherit` en el pseudoelemento significa que el radio que configures en la caja se traslada automáticamente al anillo, de forma que un botón con forma de píldora o una tarjeta redondeada obtienen un borde brillante curvado en vez de bordes rectos que sangren por las esquinas curvas. Pruébalo en vivo: arrastra el control deslizante de radio desde un rectángulo afilado hasta una píldora completa y observa cómo el anillo sigue la forma en cada paso; ese es el detalle que separa una implementación real de esta técnica de una captura de pantalla falsa.

Todo lo demás en la página se corresponde directamente con el código generado: el control deslizante de ancho define el grosor del anillo y el inset/padding del pseudoelemento, el control de duración es la animation-duration de las @keyframes, el interruptor de dirección simplemente invierte el signo del ángulo final del fotograma clave (+360deg o -360deg), y cada parada de color es una entrada separada por comas dentro de la llamada a conic-gradient(). Todo se ejecuta en tu navegador sin imágenes, sin bucle de animación controlado por JavaScript y sin servicios externos: copia el bloque CSS y seguirá girando dondequiera que lo pegues.