Como usar
- Escolha um Tipo de gradiente: uma linha que muda de cor (linear), uma difusão a partir do centro (radial) ou uma volta em torno de um ponto (cônico).
- Defina o Ângulo para um gradiente linear ou cônico. Ele não se aplica a um radial.
- Escolha cada cor em Paradas de cor e informe a posição dela em porcentagem. Adicione ou remova paradas, de duas a seis.
- Clique em Copiar sob CSS e cole a linha na sua folha de estilos, ou parta de uma das predefinições.
Os três tipos de gradiente
- Linear: a cor muda ao longo de uma reta. Um ângulo de 0deg aponta para cima, e o ângulo gira no sentido horário, então 90deg vai da esquerda para a direita e 180deg de cima para baixo.
- Radial: as cores se espalham a partir do centro em um círculo, da primeira parada até a última.
- Cônico: as cores giram em torno do centro, como os ponteiros de um relógio. O ângulo define onde a primeira cor começa.
Paradas de cor e suas posições
Uma parada de cor é uma cor em uma posição de 0% a 100% ao longo do gradiente. O editor escreve as paradas em ordem de posição, então a ordem em que você as digita não muda a imagem. Entre duas e seis paradas, o gradiente fica fácil de ler e o CSS fica curto.
O código é a sintaxe CSS padrão que os navegadores atuais leem, e a visualização é desenhada pelo seu navegador a partir do mesmo valor, então o que você vê é o que a folha de estilos recebe.
Exemplo resolvido: a predefinição Nascer do sol
A predefinição Nascer do sol é um gradiente linear de 135deg, que vai do canto superior esquerdo em direção ao canto inferior direito. Tem três paradas: laranja em 0%, amarelo em 50% e rosa em 100%.
O CSS que ela gera é: background: linear-gradient(135deg, #f97316 0%, #facc15 50%, #ec4899 100%);
Perguntas frequentes
O que quer dizer 0deg em um gradiente linear?
0deg aponta para cima, então com esse ângulo as cores mudam de baixo para cima. O ângulo gira no sentido horário: 90deg vai da esquerda para a direita, e 180deg vai de cima para baixo.
Por que minhas paradas aparecem em outra ordem no código?
O código escreve as paradas em ordem de posição, porque o CSS as lê nessa ordem. Se você digitar 80% antes de 20%, o código mostra 20% primeiro, e a imagem continua a mesma.
Posso usar uma cor transparente?
Este editor aceita cores sólidas escritas em hexadecimal. Para transparência, edite o código à mão e use uma cor com valor alfa.
Quantas paradas de cor posso usar?
De duas a seis. O editor mantém o número nessa faixa, então o gradiente sempre tem um início e um fim.
O código funciona em todos os navegadores?
A sintaxe é a forma padrão que os navegadores atuais aceitam. Confira o resultado nos navegadores que seus visitantes usam, principalmente se você quer dar suporte a versões antigas.
O meu projeto é enviado para algum lugar?
Não. O gradiente é montado no seu navegador. Nada é guardado nem enviado para um servidor.
Posso usar um gradiente para a cor do texto?
Esta ferramenta escreve somente a declaração de fundo. Colocar um gradiente atrás de um texto é possível, mas exige mais CSS do que esta ferramenta escreve.
Fontes
- MDN (em inglês): linear-gradient(), the angle and colour stop syntax
- MDN (em inglês): radial-gradient(), the ending shape and position
- MDN (em inglês): conic-gradient(), the from angle and stop positions
Números e texto verificados pela última vez em terça-feira, 10 de novembro de 2026.