Sobre a ferramenta: Gerador de gradiente CSS
Um gradiente CSS (degradê) faz duas ou mais cores se misturarem suavemente usando só CSS, sem arquivo de imagem. É usado em botões, banners e fundos de cards: é mais leve que uma imagem e fica nítido em qualquer tamanho de tela.
Neste gerador, ao arrastar o dial de ângulo ou os pontos de cor, a prévia e o código linear-gradient, radial-gradient ou conic-gradient mudam juntos.
Como usar
- Escolha o tipo de gradiente: Linear, Radial ou Cônico.
- No linear e no cônico, gire o dial ou use o controle deslizante ou o número para definir o ângulo. No radial, escolha a forma e a posição do centro.
- Arraste os círculos da barra de cores para mover as cores e toque em um espaço vazio ou em + Cor para adicionar mais. Você também pode digitar a cor e a posição (%) exatas na lista.
- Quando gostar do resultado, toque em Copiar CSS e cole na sua folha de estilos.
Tipos de gradiente e sintaxe
| Tipo | Exemplo de código |
|---|---|
| Linear | linear-gradient(90deg, #4f46e5 0%, #22c1c3 100%) |
| Radial | radial-gradient(circle at center, #fff 0%, #000 100%) |
| Cônico | conic-gradient(from 0deg at center, red, yellow, red) |
No gradiente linear, 0deg vai de baixo para cima (↑), 90deg da esquerda para a direita (→) e 180deg de cima para baixo (↓). A porcentagem depois de uma cor é o ponto em que ela aparece pura. Colocando duas cores na mesma posição, você cria uma borda nítida — é assim que se fazem listras.
Dicas de design
- Duas cores complementares muito saturadas costumam gerar um cinza sem vida no meio. Use cores próximas no círculo cromático ou adicione uma cor mais clara entre elas.
- Ao colocar texto sobre um gradiente, confira se ele fica legível tanto na parte mais clara quanto na mais escura. O verificador de contraste do conversor de cores ajuda nisso.
- A primeira linha, background: cor sólida;, é uma cor reserva para navegadores muito antigos.
Perguntas frequentes
Funciona em todos os navegadores?
linear-gradient e radial-gradient funcionam sem o prefixo -webkit- em todos os navegadores atuais. conic-gradient é suportado a partir do Chrome 69, Safari 12.1 e Firefox 83.
Dá para aplicar gradiente no texto?
Sim. Junte o código background copiado com background-clip: text; -webkit-background-clip: text; color: transparent; e o texto ganha o gradiente.
Quantas cores posso adicionar?
Esta ferramenta permite até 12 pontos de cor. O CSS em si não tem limite.