Criar um Gradiente CSS com Pré-visualização
Crie um gradiente CSS escolhendo cores, ângulo e tipo, veja ao vivo e copie o código.
#6366f1#ec4899background: linear-gradient(90deg, #6366f1, #ec4899);Montado localmente
Seguro para marcas não lançadas
Sem conta
Conexão segura
Como funciona
- 1
Escolha as cores
Defina a cor inicial e a final, e acrescente paradas no meio se a transição precisar de direção.
- 2
Defina direção ou formato
Escolha um ângulo para um gradiente linear, ou um formato e posição para um radial.
- 3
Copie o CSS
Leve a declaração `background` gerada direto para a sua folha de estilo.
Por que usar esta ferramenta
Você vê enquanto monta
Um gradiente é julgado pelo meio, não pelas pontas — a prévia ao vivo mostra justamente a parte que costuma dar errado.
CSS pronto para copiar
A saída é uma declaração `background` válida e bem formatada, sem faxina antes de colar.
Linear e radial
Os dois tipos com controle de ângulo ou formato, o que cobre quase todo gradiente de que um site precisa.
Várias paradas de cor
Adicione paradas para guiar o caminho entre as cores em vez de aceitar o que o ponto médio entregar.
Nada é enviado
A declaração é montada no seu navegador — nenhum valor de cor vai para lugar nenhum.
Grátis e sem conta
Sem cadastro, sem limite e sem marca d’água.
O meio embarrado e por que ele acontece
A decepção mais comum com gradientes é que duas cores bonitas produzem entre elas uma faixa apagada cinza-amarronzada. Isso não é falha de design, e sim matemática: navegadores interpolam gradientes em sRGB, misturando os canais vermelho, verde e azul separadamente e em linha reta. Misture assim um azul saturado com um amarelo saturado e o ponto médio fica com quantidades intermediárias dos três canais, que é a definição de cinza. O efeito é pior entre cores distantes no círculo de matizes — azul para amarelo, vermelho para verde — e quase imperceptível entre vizinhas. Reconhecer isso como aritmética e não como gosto é o que torna o problema resolvível.
Resolvendo com uma parada intermediária
O remédio prático é parar de deixar o navegador escolher o caminho. Acrescente uma parada de cor no meio e defina-a no matiz por onde a transição deveria passar — um gradiente de azul para amarelo roteado por um verde ou um turquesa se mantém vivo o percurso inteiro, porque você disse à interpolação para onde ir em vez de deixá-la cortar pelo centro neutro. Escolher essa cor do meio é mais fácil em HSL, onde você pega um ângulo de matiz entre as duas pontas e mantém a saturação alta; o conversor de cor transforma esse valor no HEX que a declaração pede. Uma parada bem colocada resolve a maioria dos gradientes que parecem lavados.
Linear e radial, e quando cada um serve
Um gradiente linear percorre um eixo reto no ângulo que você definir — 180deg de cima para baixo, 90deg da esquerda para a direita, e qualquer valor entre eles. É a escolha certa para o fundo de uma página, uma faixa de destaque ou o preenchimento de um botão, porque o olho lê aquilo como superfície e não como objeto. Um gradiente radial se espalha a partir de um ponto, o que se lê como fonte de luz ou brilho. O radial funciona para um efeito de holofote atrás de um elemento central e falha como fundo de página inteira, onde costuma parecer uma vinheta que ninguém pediu. Se estiver em dúvida, a resposta é quase sempre linear.
Gradientes e texto convivem mal
Um gradiente atrás de texto é uma das falhas de acessibilidade mais constantes da web, por um motivo estrutural: a exigência de contraste vale em cada ponto que o texto atravessa, e um gradiente por definição tem um fundo diferente em cada ponto. Um título que passa de 4,5:1 contra a ponta clara do gradiente pode cair abaixo de 3:1 contra a ponta escura, e a medição aprovada numa ponta não diz nada sobre a outra. Teste a cor do texto contra as duas pontas com o verificador de contraste; se alguma reprovar, a solução é um painel sólido atrás do texto, não outra cor de texto.
É a contenção que faz um gradiente parecer atual
Os gradientes que se leem como contemporâneos são quase sempre sutis: dois tons do mesmo matiz separados por poucos degraus de luminosidade, aplicados a uma superfície grande. Os que se leem como datados são de alto contraste, com vários matizes e aplicados a elementos pequenos. Se você tem uma paleta, o gradiente mais seguro é entre dois degraus vizinhos da mesma escala de cor — acrescenta profundidade sem se anunciar. Uma regra que sobrevive ao contato com interfaces reais: se um visitante descreveria sua página como “aquela do gradiente”, o gradiente está fazendo demais.
Desempenho e onde declarar
Um gradiente CSS é desenhado pelo navegador em vez de baixado, então não custa nenhuma requisição de rede e continua nítido em qualquer tamanho — uma vantagem real sobre uma imagem de fundo e um motivo para preferi-lo em fundos grandes e planos. Valem dois cuidados. Animar um gradiente mudando suas paradas de cor força um repintar a cada quadro e sai caro; anime `opacity` ou `transform` numa camada que contenha o gradiente. E num elemento muito grande, um gradiente com muitas paradas custa mais para pintar do que um de duas, o que pesa em celulares mais modestos, onde o tempo de pintura é o gargalo.
Erros comuns que vale evitar
- Julgar um gradiente pelas duas cores das pontas. As pontas quase sempre ficam boas; a falha está no meio, onde a interpolação em sRGB drena a saturação. Olhe a prévia, não as amostras.
- Aceitar um meio cinza entre matizes distantes. Acrescente uma parada intermediária no matiz por onde você quer que a transição viaje — uma parada resgata a maioria dos gradientes lavados.
- Colocar texto sobre um gradiente e testar só uma ponta. A exigência de contraste vale em cada ponto que o texto atravessa; confira a ponta clara e a escura, e adicione um painel sólido se alguma reprovar.
- Usar gradiente radial como fundo de página inteira. Ele se lê como vinheta e não como superfície; radial é para um brilho atrás de um elemento central, linear é para fundos.
- Animar as paradas de cor. Isso repinta o gradiente a cada quadro — anime opacidade ou transformação numa camada, que o navegador compõe barato.
Comparação
| KeroTools | Ferramentas de desenvolvedor do navegador | Software de design | |
|---|---|---|---|
| Prévia ao vivo enquanto edita | Sim | Sim, numa página real | Sim |
| Saída CSS pronta para copiar | Sim | Sim | Muitas vezes aproximada |
| Funciona antes de construir | Sim | Não — precisa de página renderizada | Sim |
| Valores enviados a um servidor | Nunca | Não | Não |
| Conta ou licença | Nenhuma | Nenhuma | Exige licença |
| Custo | Grátis | Grátis | Pago |
Recursos
Gradientes lineares
Qualquer ângulo em graus, ou as direções por palavra-chave que o CSS aceita.
Gradientes radiais
Circulares ou elípticos, com controle de onde o centro fica.
Várias paradas de cor
Insira cores intermediárias e posicione cada uma com precisão ao longo do eixo.
Prévia ao vivo
O gradiente é desenhado enquanto você edita, então o meio embarrado aparece antes de ir ao ar.
Saída CSS válida
Uma declaração `background` completa, não um pedaço que você precise montar.
Entrada de cor em HEX
Cole os códigos direto de um manual de marca ou de uma paleta.
Sem instalação
Nada para baixar ou instalar — funciona na própria página web.
Compatível com árabe e RTL
Interface completa em oito idiomas, incluindo árabe da direita para a esquerda.
Seguro por padrão
Servido por HTTPS, sem rastreio de arquivos e sem envio a terceiros.
Quem usa
Desenvolvedores front-end
Conseguir uma declaração de gradiente válida sem escrever ângulos e posições de parada na mão.
Designers
Conferir como uma transição de duas cores realmente é desenhada antes de ela chegar a um mockup.
Quem personaliza um template
Produzir um fundo de destaque ou de botão a partir de duas cores de marca que já tem.
Quem está aprendendo
Ver o que mudar um ângulo ou acrescentar uma parada faz, em vez de adivinhar a sintaxe.
Perguntas Frequentes
Não. Tudo roda localmente no seu navegador — nada é enviado, armazenado ou compartilhado.
Sim — totalmente grátis, sem conta e sem limites.