CodeKitHubO que é esta ferramenta?
Os degradês CSS são imagens geradas pelo navegador a partir de uma lista de cores, em vez de ficheiros que carregas — linear-gradient() faz a transição de cores ao longo de uma linha reta num ângulo determinado, enquanto radial-gradient() faz a transição de cores para fora a partir de um ponto central. Ambos aceitam dois ou mais pontos de cor, cada um opcionalmente fixado a uma posição dentro do degradê.
Escritos à mão, os degradês são fáceis de errar de forma subtil: ordem dos pontos, porcentagens em falta, ou um valor de ângulo na direção errada (os ângulos CSS avançam no sentido horário a partir de 'to top', ao contrário dos ângulos matemáticos). Esta ferramenta mantém a sintaxe fora do teu caminho — ajusta cores e posições com seletores e controlos deslizantes, observa a pré-visualização a atualizar-se em tempo real e copia o CSS resultante quando ficar com bom aspeto.
Fonte: CSS Images Module Level 3, W3C — a especificação que define a sintaxe de linear-gradient() e radial-gradient().
Por que usar?
- A pré-visualização em tempo real atualiza-se instantaneamente a cada mudança de cor, posição e ângulo — não é preciso recarregar a página para ver o resultado.
- Alterna entre degradê linear e radial com um clique; o controlo de ângulo é ocultado automaticamente para degradês radiais, onde não se aplica.
- Adiciona ou remove pontos de cor (de 2 a 4) em vez de ficares limitado a um degradê fixo de duas cores.
- Cada ponto tem o seu próprio controlo de posição, portanto os pontos não precisam de estar distribuídos uniformemente.
- Gera CSS pronto a colar usando a sintaxe padrão linear-gradient()/radial-gradient().
- Funciona inteiramente no seu navegador — nada do que você configura é enviado para lado nenhum. Grátis, sem registo, funciona em celular.
Como usar
- Escolhe Linear ou Radial como tipo de degradê.
- Para um degradê linear, arrasta o controlo de ângulo — 90deg vai da esquerda para a direita, 180deg vai de cima para baixo, e assim por diante.
- Define a cor e a posição de cada ponto; o primeiro ponto é a cor inicial do degradê, o último é a cor final.
- Clica em '+ Adicionar ponto' para adicionar até 4 pontos no total para um degradê multicolor, ou no botão ✕ para remover um (mínimo de 2).
- Copia o CSS gerado e cola-o numa declaração background ou background-image.
Exemplo
Entrada
Linear · Ângulo: 90deg · Pontos: #f97316 a 0%, #ec4899 a 100%Resultado
background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);Um degradê de laranja para rosa da esquerda para a direita — um estilo comum para botões, banners e fundos de secções hero.
Degradês lineares vs. radiais
Um degradê linear faz a transição de cor ao longo de uma linha reta, controlada por um ângulo — útil para banners, botões e fundos direcionais. Um degradê radial faz a transição de cor para fora a partir de um ponto central em anéis expansivos, o que é adequado para efeitos de holofote, distintivos ou fundos com brilho. Esta ferramenta define o degradê radial por padrão como um círculo centrado na caixa, o que cobre o caso de uso radial mais comum; o CSS também suporta formas de elipse e posições descentradas caso precises de editar mais o resultado à mão.
Padrões comuns de degradê
- Destaque de marca subtil: dois tons próximos (por exemplo, duas tonalidades da mesma cor) num ângulo suave para um fundo suave.
- Botão CTA de alto contraste: duas cores saturadas e complementares a 90deg ou 135deg para um visual marcante e clicável.
- Sobreposição numa imagem: um degradê de transparente para uma cor sólida (ajusta a opacidade através de uma cor rgba no hexadecimal subjacente do seletor, ou ajusta depois de copiar) colocado sobre uma background-image.
- Degradê arco-íris/de marca com múltiplos pontos: 3–4 pontos distribuídos por todo o intervalo 0–100% para transições mais suaves e graduais do que um degradê de duas cores permite.
- Holofote radial: um ponto central brilhante próximo de 0% que se desvanece para um ponto de borda mais escuro perto de 100%, útil para secções hero ou destaques de cartões.
Combinar com outras ferramentas CSS
Os degradês são frequentemente combinados com cantos arredondados e sombras no mesmo elemento — um cartão em degradê com uma box-shadow suave e cantos arredondados é um padrão de interface comum. Gera cada peça separadamente e combina as declarações CSS no elemento.
→ Gerador de Box Shadow · Gerador de Border Radius · Seletor de cores
Perguntas frequentes
Qual é a diferença entre linear-gradient() e radial-gradient()?
linear-gradient() faz a transição de cores ao longo de uma linha reta num ângulo especificado. radial-gradient() faz a transição de cores para fora a partir de um ponto central em formas expansivas (círculo ou elipse). Ambos aceitam o mesmo tipo de lista de pontos de cor separados por vírgulas; só a forma da transição é diferente.
Como funcionam os ângulos de degradê em CSS?
Os ângulos de degradê em CSS avançam no sentido horário a partir de 'to top' (0deg apontando para cima). 90deg aponta para a direita, 180deg aponta para baixo e 270deg aponta para a esquerda — a convenção oposta aos ângulos matemáticos padrão, o que é uma fonte comum de confusão ao escrever degradês à mão.
Posso usar mais de 4 pontos de cor?
Sim — os degradês CSS aceitam qualquer número de pontos de cor separados por vírgulas. Esta ferramenta limita o construtor interativo a 4 para manter uma interface gerível, mas podes copiar o CSS gerado e adicionar manualmente mais entradas 'cor posição%' separadas por vírgulas na tua folha de estilos.
Por que o meu degradê fica com faixas em vez de suave?
As faixas geralmente vêm de cores demasiado afastadas em tonalidade com poucos pontos entre elas, ou da própria precisão de cor limitada do navegador em contrastes muito baixos. Adicionar um ponto intermédio com uma cor misturada, ou escolher cores mais próximas em tonalidade, normalmente produz um resultado mais suave.
Posso animar um degradê CSS?
Não diretamente — os degradês não são animáveis nativamente como background-position ou transform, já que os navegadores não conseguem interpolar entre duas definições de degradê arbitrárias. As soluções mais comuns incluem animar background-position num degradê sobredimensionado, ou fazer a transição de background-color se apenas uma única cor estiver a mudar.