Gerador de degradê CSS

1. 01Escolha o tipo de degradêLinear é uma transição reta ao longo de um ângulo. Radial é uma transição do centro para fora, em formato circular. Linear funciona bem para a maioria dos fundos; radial combina com destaque redondo, botão de ação ou fundo de cabeçalho.
2. 02Ajuste o ângulo (linear)O ângulo controla a direção da transição. 0° vai de baixo para cima. 90° vai da esquerda para a direita. 180° vai de cima para baixo. 135°, que é o padrão, vai do canto superior esquerdo até o inferior direito e fica suave e natural na maioria dos degradês.
3. 03Monte os pontos de corCada ponto de cor tem uma cor (hexadecimal, como #1ed4c5) e uma posição em porcentagem (de 0 a 100). Acrescente até 5 pontos com "+ Adicionar ponto". Por exemplo: um primeiro ponto em 0% com a cor A e um segundo em 100% com a cor B.
4. 04Copie o códigoAo clicar em "Copiar CSS", o código vai para a área de transferência. Cole no arquivo CSS do seu site, em um estilo inline ou em um modelo de design. Também tem um valor arbitrário de Tailwind para quem trabalha com Tailwind v4.

• Fundo de cabeçalho de landing pageUm degradê sutil atrás do título principal acrescenta profundidade sem atrapalhar a leitura. Use pontos de baixo contraste dentro da mesma família de tons.
• Botão de ação que chama atençãoUm degradê no botão principal (de azul para roxo, por exemplo) chama mais atenção do que uma cor chapada. Mantenha dois pontos e um ângulo entre 90° e 135° para um efeito com movimento.
• Fundo de uma seção de e-mailAlguns modelos de e-mail aceitam degradê em CSS. Teste no cliente de e-mail específico antes de um disparo grande: alguns mostram só a primeira cor.
• Fundo de seção em um siteUm degradê vertical suave (180°) entre dois tons próximos separa seções de conteúdo em uma página longa sem precisar de linha divisória.
• Paleta rápida de marcaColoque as cores principais da marca como pontos de um degradê, capture a prévia e guarde como amostra para mostrar ao cliente antes da escolha final.

• Degradê linear simples, com dois pontos`linear-gradient(135deg, #6a8fff 0%, #a67bff 100%)`. Azul e roxo suave a 135°. Dois pontos que funcionam bem em fundo de cabeçalho.
• Degradê com três pontos`linear-gradient(100deg, #ff6a3d 0%, #ff9a5a 55%, #ffd166 100%)`. Pôr do sol: laranja, laranja claro e amarelo. O ponto em 55% adianta o tom do meio.
• Degradê radial para efeito de brilho`radial-gradient(circle, #1ed4c5 0%, #0a3a3a 100%)`. Um centro turquesa que escurece nas bordas. Combina com fundo de botão ou de card em destaque.
• Degradê sutil de cinza para branco`linear-gradient(180deg, #f5f5f7 0%, #d8d8de 100%)`. Uma transição vertical fina que acrescenta profundidade a um fundo neutro. Funciona bem em card de produto ou no fundo de uma tabela.
• Degradê escuro premium`linear-gradient(135deg, #0f172a 0%, #1f2a44 100%)`. Tem um ar sério e funciona bem em site de software, de finanças ou em página de planos.

Um degradê em CSS é um valor de fundo que gera uma transição suave entre várias cores direto no navegador. Não precisa de imagem nenhuma. O navegador desenha a transição a partir de uma definição em texto, o que dá fundo nítido em qualquer tamanho de tela, sem peso de arquivo e com edição fácil por variável CSS. Os dois tipos comuns são o linear-gradient (transição reta ao longo de um ângulo) e o radial-gradient (transição do centro para fora).

Linear funciona bem em fundo de página, fundo de seção, botão e cabeçalho. É mais fácil de planejar e se encaixa bem em um layout. Radial combina com destaque redondo, efeito de brilho em volta de um ponto, fundo de logo ou fundo de botão redondo. Não existe regra fixa: teste os dois e veja qual comunica melhor.

O ângulo de um degradê linear é medido em relação ao eixo vertical. 0° coloca a primeira cor embaixo e a transição sobe. O ângulo cresce no sentido horário: 90° vai da esquerda para a direita, 180° vai de cima para baixo e 270° vai da direita para a esquerda. Se a direção ficou ao contrário do que você queria, some ou subtraia 180°.

Todos os navegadores atuais suportam linear-gradient e radial-gradient sem prefixo. Em e-mail o suporte varia: o Gmail mostra a maioria dos degradês, e o Outlook às vezes mostra só a primeira cor. Teste sempre no cliente de e-mail específico antes de um disparo grande.

Ela não confere o contraste de cor em relação ao texto. Não determina conformidade com a WCAG. Não exporta para imagem PNG ou JPG. Não oferece curva de animação. Para isso, use ferramentas específicas. Como apoio visual para montar e mostrar um degradê, ela cumpre o papel.

Tudo acontece no seu navegador. As cores, o ângulo, os pontos, o tipo de degradê e o código CSS gerado não são enviados, não ficam em localStorage nem em IndexedDB e não vão para ferramenta de análise. A medição operacional mínima registra só o uso geral: uma visita à página, um primeiro uso bem-sucedido e uma cópia. Nenhum valor, cor ou trecho de CSS é enviado.

O que é um degradê em CSS?

É um valor de fundo que gera uma transição suave entre cores direto no navegador, sem precisar de imagem. Os dois tipos comuns são linear-gradient e radial-gradient.

Como eu coloco o código no meu site?

Copie a linha `background:` e cole no CSS do elemento, ou em um estilo inline. Também dá para usar a versão mais longa, `background-image:`, quando você quer sobrepor o degradê a uma imagem de fundo.

Quantos pontos de cor a ferramenta aceita?

De 2 a 5 pontos. Dois pontos costumam bastar para a maioria dos degradês; acrescente mais só quando houver um motivo.

Qual a diferença entre linear e radial?

Linear é uma transição reta ao longo de um ângulo, boa para fundo de página. Radial é uma transição do centro para fora, em formato circular, boa para destaque redondo.

O código funciona em modelo de e-mail?

Depende do cliente de e-mail. O Gmail mostra a maioria dos degradês, e o Outlook às vezes mostra só a primeira cor. Teste no cliente específico antes de um disparo grande.

A ferramenta confere contraste de cor e acessibilidade?

Não. Ela mostra o degradê e gera o CSS. Não confere o contraste em relação ao texto nem determina conformidade com a WCAG. Para isso, use uma ferramenta de contraste específica.

As minhas cores são enviadas para algum lugar?

Não. Todo o processamento acontece no seu navegador. Nenhuma cor, ponto ou código que você criar é enviado, salvo ou mandado para ferramenta de análise.

A ferramenta é gratuita?

É. A ferramenta é gratuita, sem cadastro, sem conta e sem limite de uso dentro do razoável.