Gerador de Borda com Gradiente Animado em CSS

Uma borda arco-íris rotativa parece simples até tentar construí-la em CSS: animar um ângulo dentro de conic-gradient() com uma simples propriedade personalizada não produz nada de útil, porque o browser não sabe que o valor é um ângulo e não consegue interpolar entre 0deg e 360deg — simplesmente salta. Este gerador usa a solução real, a CSS Properties and Values API: `@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }` indica ao browser exatamente que tipo de valor a propriedade personalizada contém, o que desbloqueia uma interpolação suave e com aceleração por GPU através de uma regra @keyframes.

O anel em si é um pseudo-elemento ::before dimensionado para ser maior do que a caixa (com um deslocamento negativo igual à largura da borda) e com o fundo definido como `conic-gradient(from var(--border-angle), ...)` a voltar à primeira cor para que o varrimento não tenha costura visível. Uma máscara faz depois o verdadeiro trabalho de dar forma: `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;` mantém apenas a diferença em forma de anel entre a padding-box e a content-box, descartando o retângulo de gradiente sólido em todo o resto. O `-webkit-mask-composite: xor` mais antigo do Safari realiza a operação idêntica e é fornecido juntamente com a propriedade padrão, para que o efeito seja renderizado de forma consistente, em vez de falhar silenciosamente num motor de renderização.

O suporte a border-radius não é uma ideia tardia acrescentada por cima — o `border-radius: inherit` do pseudo-elemento significa que qualquer raio que definir na caixa é automaticamente transportado para o anel, por isso um botão em forma de pílula ou um cartão arredondado recebem uma borda luminosa arredondada, em vez de arestas retas a sangrar para fora dos cantos curvos. Teste ao vivo: arraste o slider do raio de um retângulo com arestas vivas até uma pílula completa e veja o anel seguir a forma em cada passo — é este o detalhe que separa uma implementação real desta técnica de uma simples captura de ecrã.

Tudo o resto na página mapeia diretamente para o código gerado: o slider de largura é a espessura do anel e o deslocamento/padding do pseudo-elemento, o slider de duração é a animation-duration da @keyframes, o interruptor de sentido apenas inverte o sinal do ângulo final da keyframe (+360deg ou -360deg), e cada paragem de cor é uma entrada separada por vírgulas dentro da chamada de conic-gradient(). Tudo isto é executado no seu browser, sem imagens, sem ciclo de animação controlado por JavaScript e sem serviços externos — copie o bloco CSS e ele continuará a girar onde quer que o cole.