Gerador de Gradientes CSS

Sobre gradientes CSS

Um gradiente CSS é uma interpolação suave entre duas ou mais cores pintada direto pelo navegador — sem precisar de imagem. Gradientes lineares seguem uma linha reta no ângulo que você escolher; gradientes radiais partem de um centro para fora. Cada parada de cor tem uma posição de 0% a 100% sobre a linha do gradiente. Por padrão, o navegador faz a mistura em sRGB, então quanto mais contraste entre paradas vizinhas, mais visível fica a faixa de tons intermediários.

Como usar o gerador

Escolha o tipo de gradiente; para linear, ajuste o ângulo (0° aponta para cima, 90° para a direita, 180° para baixo). Cada linha em Paradas de cor traz um seletor e uma posição — arraste o controle, digite a porcentagem ou clique em Adicionar parada para inserir uma nova cor. Aplique um Preset se quiser só uma paleta inicial rápida. A caixa de CSS abaixo da prévia mostra a declaração background exata; clique em Copiar e cole no seu stylesheet.

Dicas de design

Gradientes de duas paradas entre cores análogas (vizinhas no círculo cromático) parecem calmos e modernos. Três paradas com um acento no meio dão riqueza, mas embarreiam fácil — mantenha a saturação parecida em todas. Para fundos escuros de UI, combine um quase-preto com um matiz escuro em contraste muito baixo (5–10% de diferença de luminosidade) para que o gradiente seja sentido, não visto. Teste sempre com o conteúdo real por cima — texto precisa de pelo menos 4.5:1 de contraste em qualquer região do gradiente que ele atravessa.

Perguntas frequentes

Quantas paradas posso adicionar?

A ferramenta limita em cinco paradas, o que cobre praticamente qualquer gradiente de UI que você vá publicar. O CSS em si não impõe limite, mas acima de 4–5 paradas costuma se perder mais em embaçamento do que se ganha em detalhe. Para transições fotográficas, considere um mesh SVG ou uma imagem real.

Por que meu gradiente linear fica diferente em outra ferramenta?

Ferramentas diferentes às vezes interpretam o ângulo de jeitos distintos — a especificação CSS usa 0° para cima e 90° para a direita, mas a sintaxe antiga do Webkit tinha outra referência. A saída aqui usa a forma moderna linear-gradient(<ângulo>deg, ...), que funciona em todo navegador atual sem prefixos.

Posso usar isso em modo escuro?

Sim — combine o gradiente com @media (prefers-color-scheme: dark) no seu CSS e escolha um conjunto de paradas mais escuro. Também dá para envolver a declaração em variáveis CSS e trocar os valores por tema, o que mantém o resto do CSS intacto.

Gradientes prejudicam a performance?

Em hardware moderno, não — são pintados na GPU como qualquer outro fundo. O custo só aparece em gradientes radiais enormes em tela cheia animados a 60fps ou em celulares bem antigos. Para o fundo de um painel estático, o custo é desprezível.

Dá para animar um gradiente?

O CSS não anima background-image direto, mas você pode animar background-position em um gradiente superdimensionado ou usar @property com variáveis para interpolar as cores das paradas. Em qualquer caso, ofereça um fallback de movimento reduzido para quem pedir.

Gradientes radiais têm suporte em todo lugar?

Sim. linear-gradient() e radial-gradient() chegaram em todos os grandes navegadores há mais de uma década. A saída aqui usa a forma padrão (sem prefixos) e funciona até nos primeiros navegadores evergreen.

Gerador de Gradientes CSS