Gerador de borda gradiente CSS

Como funciona

1. Escolha as cores : selecione duas ou mais cores para o gradiente pelos seletores.
2. Ajuste a largura e o raio : ajuste a espessura e o arredondamento dos cantos de acordo com seu design.
3. Copie o CSS : o código gerado via border-image ou pela técnica de pseudo-elemento está pronto para colar na sua folha de estilo.

Por que usar este gerador de borda em gradiente ?

As bordas em gradiente CSS são um detalhe de design marcante usado em frameworks UI modernos, cards, estados de hover de botões e seções em destaque. Entretanto, a propriedade CSS border só aceita cores sólidas - criar uma borda em gradiente requer um truque via border-image ou via pseudo-elemento com manipulações de background-clip. Este gerador cobre as duas técnicas e produz um CSS limpo, pronto para copiar, para você se concentrar no design em vez da sintaxe.

Funcionalidades

• Dois métodos : escolha entre border-image (simples) e a técnica de pseudo-elemento com background-clip (suporta border-radius).
• Suporte a border-radius : o método do pseudo-elemento permite cantos arredondados que o border-image não consegue produzir.
• Gradientes multi-paradas : adicione quantas paradas de cor quiser para efeitos arco-íris ou com as cores da sua marca.
• Pré-visualização em tempo real : veja exatamente como fica a borda antes de copiar o código.
• Controle do ângulo : gire a direção do gradiente com um seletor de ângulo visual.

Perguntas frequentes

Por que não posso usar border-image com border-radius ?

O border-image substitui totalmente a renderização da borda e ignora border-radius - os cantos ficam quadrados. Para combinar borda em gradiente e cantos arredondados, use a técnica do pseudo-elemento : aplique o gradiente no fundo de um ::before e background-clip: padding-box no próprio elemento.

Posso animar bordas em gradiente ?

Sim. As bordas em gradiente criadas com o método background + pseudo-elemento podem ser animadas fazendo a transição de background-position no gradiente. Aplique background-size: 300% 300% e anime background-position para um efeito fluido.

Isso funciona em botões e campos de entrada ?

Sim, o CSS gerado funciona em qualquer elemento HTML. Para botões, prefira o pseudo-elemento para manter o border-radius. Para campos de entrada, aplique a técnica border-image ou envolva o campo em um contêiner em gradiente.

O que as bordas em gradiente CSS realmente resolvem

A propriedade CSS border aceita uma única cor sólida, não um gradiente. Esta é uma limitação da era de 1996 que sobreviveu ao CSS moderno. Durante a maior parte da história da web, designers que queriam um contorno em gradiente ao redor de um cartão ou botão tinham que escolher entre usar uma imagem de fundo (raster, não escala), envolver o elemento em um contêiner colorido (funciona mas quebra sutilmente o layout), ou aceitar bordas sólidas. As bordas em gradiente CSS são soluções alternativas que simulam a aparência de border: 3px solid linear-gradient(...) através de outras propriedades CSS, já que essa sintaxe exata não existe.

Duas técnicas dominam. border-image (CSS Backgrounds and Borders Module Level 3, 2012) substitui a renderização da borda por um gradiente ou imagem. Funciona, mas border-image ignora completamente border-radius: os cantos permanecem quadrados. A técnica de pseudo-elemento + background-clip usa um elemento envoltório com fundo em gradiente e uma sobreposição interna que mascara tudo exceto a área da borda. Isso suporta cantos arredondados mas requer duas camadas de CSS e manejo cuidadoso de padding versus content boxes. Uma terceira abordagem moderna usa mask-composite (navegadores 2020+) para uma solução de elemento único mais limpa.

As bordas em gradiente importam para as tendências de design atuais. Layouts baseados em cartões (Stripe, Linear, Vercel, Cursor) usam bordas em gradiente sutis de duas cores para adicionar profundidade sem peso. Destaques de recursos premium frequentemente desenham uma borda em gradiente colorida para denotar o status «Pro». Estéticas cyberpunk e synthwave usam bordas em gradiente neon para evocar vibes retrô-futuro. Lançamentos de produtos de IA em 2023-2024 padronizaram bordas em gradiente multi-cor animadas como assinatura visual (OpenAI, Anthropic, Perplexity). O que antes exigia editores de imagem agora é enviado como 5 a 10 linhas de CSS.

Como esta ferramenta funciona nos bastidores

A pré-visualização é um único div com as duas técnicas aplicadas via CSS inline, alternáveis pela sua escolha de método. Para border-image, a ferramenta define border: Npx solid transparent com border-image: linear-gradient(...) 1; o valor de corte 1 diz ao navegador para usar o gradiente em tamanho completo para cada borda da borda. Para a técnica do pseudo-elemento, a ferramenta aplica um fundo em gradiente ao elemento externo e usa ::before (ou background-clip: padding-box) para mascarar a área de conteúdo interno, deixando apenas o anel da borda visível.

Pontos de parada de cor são armazenados como um array JavaScript de pares {color, position}. Quando você escolhe cores ou move o controle deslizante de ângulo, a ferramenta reconstrói a string linear-gradient() juntando os pontos com vírgulas e prefixando o ângulo: linear-gradient(45deg, #ff0080 0%, #7928ca 100%). Essa string é interpolada tanto no CSS de pré-visualização quanto na caixa de código. O controle deslizante de ângulo usa um intervalo de 0 a 360 graus com rotação visual de seta SVG para feedback de orientação.

Nada sai do seu navegador. A geração de string de gradiente, o armazenamento de cores, a renderização de pré-visualização e a cópia para área de transferência acontecem todas em JavaScript no seu dispositivo. Nenhuma solicitação de rede é feita; nenhuma análise rastreia quais cores você escolhe. A ferramenta não tem backend além do HTML estático e JavaScript servidos uma vez no primeiro carregamento. Atualize a página e suas cores selecionadas e ângulo se foram a menos que você tenha copiado o CSS primeiro.

Breve história das bordas e gradientes CSS

• Bordas CSS 1, 1996.A primeira especificação CSS (CSS 1, dezembro de 1996) define border-style, border-width e border-color, suportando apenas cores sólidas e os oito estilos de borda (none, dotted, dashed, solid, double, groove, ridge, inset, outset). Nenhum suporte a gradiente, uma escolha arquitetônica que persiste por 16 anos.
• CSS linear-gradient é lançado, 2008 a 2011.WebKit introduz -webkit-gradient() em 2008, seguido pelo linear-gradient() padronizado em CSS Image Values and Replaced Content Module Level 3 (2011). Gradientes se tornam cidadãos CSS de primeira classe para fundos, mas não para bordas. Designers imediatamente querem bordas em gradiente; a especificação não acomoda.
• border-image chega, 2012.CSS Backgrounds and Borders Module Level 3 (CR junho 2012) define border-image com suporte completo de navegador até 2014. Permite que bordas usem qualquer imagem, incluindo gradientes CSS. O problema: border-image sobrescreve border-radius, então bordas em gradiente arredondadas permanecem impossíveis apenas com esta técnica.
• Padrão de solução alternativa de pseudo-elemento emerge, 2013 a 2015.CSS-Tricks e recursos similares publicam soluções alternativas usando pseudo-elementos ::before com fundos em gradiente e truques background-clip: padding-box. A «borda em gradiente arredondada» se torna resolvível, mas requer entender as intrincações do box-model. Em 2015, o padrão está difundido na documentação de sistemas de design.
• conic-gradient pousa, 2018 a 2021.CSS conic-gradient() (Chrome 69, setembro de 2018; Firefox 83, novembro de 2020; Safari 12.1, março de 2019) habilita gradientes de varredura circular, ideais para efeitos de «anel de carregamento» com bordas em gradiente. Combinados com animação, bordas conic-gradient criam os padrões de brilho rotativo populares em lançamentos de produtos de IA em 2023.
• mask-composite desbloqueia soluções mais limpas, 2020 a 2024.CSS Masking Module Level 1 (2014) e suporte mask-composite em navegadores modernos (2020+) permite bordas em gradiente de elemento único sem pseudo-elementos: sobreponha um fundo em gradiente e mascare tudo exceto o anel externo via operações compostas. Em 2024, esta é a abordagem de produção mais limpa, embora soluções alternativas de pseudo-elemento permaneçam compatíveis com navegadores mais antigos.

Fluxos do mundo real

• Acentos sutis de componente de cartão.Cartões de dashboard modernos (pense em Stripe, Linear, Vercel) usam bordas em gradiente de 1 a 2 pixels em esquemas de cores de dois ou três tons para adicionar interesse visual sem peso. O gradiente é geralmente sutil: 10% a 20% de opacidade, baixo contraste, principalmente escala de cinza com um toque de cor de marca. Isto é suficiente para diferenciar cartões de um fundo plano e sinalizar interatividade.
• Destaques de recursos premium.Tabelas de preços SaaS usam bordas em gradiente vívidas (frequentemente ouro-para-roxo ou arco-íris) no plano «Pro» ou «Recomendado» para elevá-lo visualmente. O padrão funciona porque atrai o olho através de cor e movimento (se animado) sem exigir rótulos de emblema. Linear, Notion, Figma e a maioria das páginas de preços SaaS modernas usam este padrão exato.
• Efeitos neon e de brilho.Estéticas cyberpunk, synthwave e UI de jogos combinam bordas em gradiente com box-shadow para um visual de tubo de neon. A borda fornece a transição de cor, a sombra fornece o florescimento. Padrão comum: border-image: linear-gradient(45deg, #ff0080, #00d4ff) 1 mais box-shadow: 0 0 20px rgba(255,0,128,0.5) no mesmo elemento.
• Identidade visual de produtos de IA.A onda 2023-2024 de ferramentas de IA (OpenAI ChatGPT, Anthropic Claude, Perplexity, Cursor) convergiu em bordas em gradiente multi-cor animadas como assinatura visual para «a IA está pensando» ou campos de entrada aguardando processamento de IA. Geralmente gradientes cônicos rotativos ou gradientes lineares mudando em um loop de 4 a 6 segundos. Torna-se taquigrafia para «inteligente / generativo» em UX moderna.
• Polimento de estado de hover e foco.Botões e entradas que mudam de borda sólida no estado de repouso para borda em gradiente no hover ou foco se sentem premium e intencionais. A transição entre cores pode animar com transições CSS em background-position se o gradiente se estender além da área visível (background-size: 200% 100% com uma animação deslizante).
• Expressão de cor de marca.Sistemas de marca com logos multi-cor (Instagram, Slack, Discord) frequentemente usam bordas em gradiente para estender sua identidade em componentes UI. Um cartão com o gradiente de marca como sua borda estabelece continuidade visual com o logo. Para páginas de marketing SaaS, esta é uma das formas mais baratas de fazer um componente genérico parecer «de marca».

Armadilhas comuns e o que significam

• border-image ignora border-radius.A confusão mais comum: usar border-image: linear-gradient(...) ao lado de border-radius produz cantos quadrados. border-image assume completamente a renderização da borda e a propriedade radius não tem efeito no resultado pintado. Para obter bordas em gradiente arredondadas, use a técnica do pseudo-elemento ou a abordagem moderna mask-composite, não border-image.
• A técnica do pseudo-elemento requer padding-box.A solução alternativa padrão usa background no elemento externo e uma sobreposição interna via ::before. Detalhe crítico: a sobreposição interna precisa de background-clip: padding-box para parar na borda do padding, deixando a área da borda visível. Pular esta propriedade clip resulta no gradiente sendo completamente coberto pela sobreposição, sem borda visível.
• Animar bordas em gradiente é caro para GPU.Bordas em gradiente animadas (o padrão «brilho de IA») funcionam transicionando background-position em um gradiente grande. Embora GPUs modernas lidem bem com isso, aplicá-lo a muitos elementos simultaneamente (por exemplo, cada cartão em uma página) reduz as taxas de quadros notavelmente em dispositivos de baixa potência. Use bordas em gradiente animadas com moderação: um ou dois elementos «herói» por página, não em todo o site.
• Conflito de cor em modo escuro.Uma borda em gradiente projetada para um fundo claro frequentemente parece errada em fundos escuros. Gradientes brancos puros se tornam invisíveis; cores vibrantes parecem supersaturadas. Para designs de tema duplo, defina pontos de parada de cor de gradiente separados para modos claro e escuro via propriedades personalizadas CSS ou media queries. Reduza a saturação e ajuste o matiz para manter harmonia visual com o tema circundante.
• Bordas de baixo contraste falham na acessibilidade.Bordas em gradiente sutis que parecem elegantes podem falhar no WCAG 2.1 SC 1.4.11 Contraste Não Textual (mínimo 3:1) para componentes UI que transmitem estado. Se a borda em gradiente é o único indicador visual dos limites de um botão ou da selecionabilidade de um cartão, garanta contraste adequado com o fundo. Para bordas puramente decorativas em elementos já visíveis, o contraste é menos crítico mas ainda vale verificar.
• Internet Explorer e Edge antigo não suportam nada útil.IE 11 (aposentado em junho de 2022) e Edge pré-Chromium (2015 a 2019) carecem de border-image confiável para gradientes, mask-composite e várias técnicas de pseudo-elemento. Para esses navegadores legados, recue graciosamente para uma borda sólida usando a cor média do gradiente. Os navegadores modernos cobrem mais de 99% dos usuários em 2026, mas os fallbacks legados permanecem importantes para software empresarial.

Privacidade: tudo roda no seu navegador

Ferramentas geradoras CSS vêm em dois sabores: páginas HTML simples rodando JavaScript do lado do cliente (privadas, rápidas) e editores em nuvem que salvam seus projetos (colaborativos mas com compromissos de privacidade). Esta ferramenta é do primeiro tipo. Suas cores selecionadas, seu ângulo, seu CSS gerado: tudo permanece em sua sessão do navegador. Atualize a página e o estado se vai a menos que você tenha copiado o CSS primeiro. Nenhum servidor armazena suas escolhas de gradiente, nenhuma análise rastreia quais combinações de cores você tentou, e nenhuma conta é necessária.

A propriedade de privacidade importa principalmente para trabalho de design proprietário. Um estúdio prototipando combinações de gradiente para um redesign de marca confidencial, um desenvolvedor trabalhando nos acentos UI de um produto não anunciado, ou um designer iterando em uma paleta de campanha: qualquer contexto onde a escolha de cor ou o histórico de iteração poderia vazar informação sobre o trabalho. Com esta ferramenta, não há nada capturado porque nada é enviado. Abra a aba Rede do navegador e você verá zero solicitações de saída durante o uso; apenas o carregamento inicial da página busca o HTML e JavaScript.

Quando outra ferramenta é a escolha certa

• SVG para formas de borda complexas.Para bordas em gradiente não retangulares (arredondadas com entalhes, bordas festonadas, formas irregulares personalizadas), SVG com linearGradient ou radialGradient aplicado a um atributo stroke fornece controle total. Bordas em gradiente CSS funcionam para retângulos e retângulos arredondados; SVG lida com todo o resto. Use os dois juntos: SVG para contornos de forma decorativos, CSS para componentes UI padrão.
• Photoshop para imagens em gradiente estáticas.Se a borda em gradiente está em uma imagem herói estática ou banner que não mudará, projetá-la no Photoshop, Figma ou Sketch e exportá-la como PNG ou WebP pode ser mais simples que manter CSS. A imagem escala como parte do pipeline de ativos da página. Bordas em gradiente CSS são para elementos dinâmicos (cartões, botões, componentes) que precisam renderizar em qualquer tamanho.
• Bibliotecas de componentes para consistência do sistema de design.Tailwind UI, shadcn/ui, Radix e outras bibliotecas de componentes entregam componentes de cartão e botão pré-estilizados com variantes de borda em gradiente opcionais. Para projetos que já usam essas bibliotecas, aplicar a variante da biblioteca é mais rápido que rolar CSS manualmente. Bordas em gradiente roladas à mão são úteis para designs únicos ou projetos ainda não comprometidos com uma biblioteca de componentes.
• Canvas ou WebGL para efeitos animados multi-camada.Para efeitos de gradiente altamente animados e multi-camada (sistemas de partículas, simulações de fluidos, arte generativa), Canvas 2D ou WebGL fornece controle por pixel que CSS não pode igualar. O compromisso é complexidade de implementação e acessibilidade (conteúdo canvas é invisível para leitores de tela). Para bordas em gradiente decorativas em componentes UI padrão, CSS é a escolha certa; para efeitos visuais, considere abordagens baseadas em canvas.

Mais perguntas frequentes

Posso usar mais de duas cores em uma borda em gradiente?

Sim. CSS linear-gradient() aceita pontos de parada de cor ilimitados: linear-gradient(45deg, #ff0080 0%, #ffa500 50%, #00d4ff 100%) cria um gradiente de três cores transitando por laranja no meio. Adicione quantos pontos de parada quiser, cada um com uma posição opcional. Para gradientes multi-cor complexos (efeito arco-íris), distribua os pontos de parada uniformemente: 0%, 16,7%, 33,3%, 50%, 66,7%, 83,3%, 100%.

Como crio uma borda em gradiente arco-íris ou cônica?

Para gradientes cônicos (de varredura), use conic-gradient(from 0deg, red, yellow, lime, cyan, blue, magenta, red) como o fundo do elemento externo com a técnica de mascaramento padding-box do pseudo-elemento. Para um efeito rotativo (popular em estados de carregamento de produtos de IA), anime --angle via CSS Houdini ou use @property --angle com uma animação de rotação de 360 graus. O resultado é uma varredura de cor suave ao redor da borda.

Posso usar propriedades personalizadas CSS para bordas em gradiente conscientes de tema?

Sim, e é a abordagem recomendada para sistemas de design. Defina cores de gradiente como propriedades personalizadas CSS (--gradient-start, --gradient-end) e use-as na sua declaração de gradiente: linear-gradient(var(--angle), var(--gradient-start), var(--gradient-end)). Sobrescreva as variáveis em media queries de modo escuro ou classes de tema. Um arquivo CSS lida tanto com temas claros quanto escuros via redefinição de variáveis.

Isso funciona em navegadores antigos como Internet Explorer?

Internet Explorer 11 (oficialmente aposentado pela Microsoft em junho de 2022) tinha suporte parcial a border-image mas renderização de gradiente não confiável, e nenhum mask-composite. Navegadores modernos (Chrome 88+, Firefox 78+, Safari 14+) suportam totalmente ambas as técnicas. Se você deve suportar IE, forneça um fallback de cor sólida usando a cor média do gradiente: declare border: 3px solid #888; antes da regra de gradiente, e IE usará isso enquanto navegadores modernos aplicam o gradiente.

Existe uma forma de uma única propriedade fazer bordas em gradiente?

Ainda não em CSS padronizado. Propostas modernas (rascunho CSS Backgrounds and Borders Module Level 4) incluem a propriedade border-color aceitando gradientes diretamente, mas as implementações dos navegadores ainda não são estáveis. A aproximação atual mais próxima é a técnica mask-composite que usa um único elemento mas ainda requer três declarações CSS. Esperamos que em 2027 ou 2028, border: 3px solid linear-gradient(...) simplesmente funcione.

Por que minha borda em gradiente parece diferente no Safari?

Safari historicamente fica atrás do Chrome e Firefox em paridade de recursos CSS, especialmente para valores mask-composite e alguns casos extremos de background-clip. Teste no Safari explicitamente. Se a técnica do pseudo-elemento falhar no Safari, mude para border-image (que funciona universalmente mas perde border-radius), ou use prefixos específicos do Safari: -webkit-mask-composite pode ser necessário para versões mais antigas do Safari. iOS Safari frequentemente precisa do prefixo mesmo em versões de 2024.