EspañolGerador de borda degradê (CSS)
Escolha as cores, a espessura e os cantos. O código usa duas camadas de fundo, o jeito que mantém o border-radius funcionando.
Borda colorida em degradê
Disponível em: 
Gerador de borda degradê (CSS): para que serve
A forma óbvia de fazer borda com degradê, border-image, ignora os cantos arredondados. Este gerador usa a técnica de duas camadas de fundo (padding-box e border-box), que mantém o border-radius, ou uma máscara com mask-composite quando o cartão precisa ter fundo transparente.
Escolha duas ou três cores, o ângulo, a espessura e os cantos, e opcionalmente a borda girando, feita com conic-gradient e uma variável de ângulo registrada com @property, desligada para quem pediu menos movimento.
Como usar
- Escolha as cores e o ângulo.
- Ajuste a espessura, os cantos e o fundo.
- Copie o CSS e aplique a classe.
Quando usar
- Cartão de plano em destaque.
- Foto de perfil com borda colorida.
- Botão de chamada principal.
Perguntas frequentes
Por que não usar border-image?
Com border-image o degradê funciona, mas os cantos arredondados (border-radius) são ignorados. A técnica deste gerador pinta o degradê como uma segunda camada de fundo que aparece só na área da borda, e aí os cantos ficam redondos.
E se o fundo do cartão for transparente?
Marque a opção de fundo transparente: o código passa a usar uma máscara (mask) para recortar o miolo, e o que estiver atrás do cartão aparece por dentro da borda.
Como funciona a borda girando?
O degradê é cônico e o ângulo é uma variável registrada com @property, que o CSS consegue animar. Para quem pediu menos movimento, a animação fica desligada.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.