Gerador de Borda Degradê CSS
Gere código CSS de borda degradê instantaneamente com pré-visualização ao vivo.
135°
0%
100%
Pré-visualização
Código CSS
.element {
background:
linear-gradient(#1a1a2e, #1a1a2e) padding-box,
linear-gradient(135deg, #6366f1 0%, #ec4899 100%) border-box;
border: 3px solid transparent;
border-radius: 12px;
}O que é uma borda degradê CSS?
CSS não suporta cores de borda degradê via border-color. Esta ferramenta usa o truque background-clip — sobrepondo dois fundos recortados em padding-box e border-box respectivamente.
Tipos de Degradê
Degradê Linear
As cores transitam em linha reta no ângulo especificado. Ideal para efeitos de borda direcionais como de cima para baixo ou na diagonal.
Degradê Cônico
As cores giram em torno de um ponto central. Aplicado à borda, cria um efeito arco-íris que envolve todo o elemento.
Como usar
Selecione um tipo de degradê (Linear ou Cônico), configure o ângulo e as paradas de cor, ajuste a espessura e o raio da borda, depois copie o código CSS gerado.
Perguntas Frequentes
Posso aplicar um degradê diretamente ao border-color?
Não. CSS border-color suporta apenas cores sólidas. Esta ferramenta usa o truque background-clip para criar bordas degradê sem JavaScript.
Qual a diferença entre bordas com degradê linear e cônico?
O degradê linear flui em uma direção (ex. de cima para baixo). O degradê cônico gira ao redor do elemento, mostrando todas as cores ao longo de toda a borda.
Funciona em todos os navegadores?
O método background-clip funciona nas versões modernas do Chrome, Firefox, Safari e Edge. Internet Explorer não é suportado.
Como usar borda degradê com Tailwind CSS?
Tailwind não suporta bordas degradê nativamente. Adicione o CSS gerado em @layer utilities ou aplique como estilo inline.
O que é uma borda com degradê cônico?
Uma borda com degradê cônico aplica cores que giram em torno de um ponto central, criando efeitos de arco-íris ou rotação.
Posso animar uma borda degradê?
Sim. Você pode animar o ângulo do conic-gradient usando @keyframes e propriedades CSS personalizadas para criar uma borda degradê giratória.