Gerador de gradiente CSS
Cores de um lado, uma declaração do outro.
Os exemplos substituem temporariamente os dados e as configurações. Você pode restaurar seu trabalho anterior.
0 caracteres
Resultado
Cole ou digite acima para ver o resultado aqui.
Seus arquivos ficam no seu dispositivo
Esta ferramenta roda inteiramente no seu navegador. O que você cola é processado no seu dispositivo e nunca é enviado a um servidor, então é seguro usar com tokens, chaves e textos não publicados.
Exemplo
Exemplo prático — Gerador de gradiente CSS
Insira as linhas na ordem e use as configurações abaixo. Compare o resultado com as linhas de saída.
| Item | Valor |
|---|---|
| Entrada 1 | #ff0000 |
| Entrada 2 | #0000ff |
| Tipo | Linear |
| Ângulo (graus) | 90 |
| Repetido | Desativado |
| Saída 1 | background: #ff0000; |
| Saída 2 | background: linear-gradient(90deg, #ff0000, #0000ff); |
| Saída 3 | background-image: linear-gradient(90deg, #ff0000, #0000ff); |
O gradiente linear de 90 graus vai do vermelho à esquerda ao azul à direita. O vermelho sólido serve como alternativa.
Como funciona
- Uma cor por linha. Vale qualquer cor CSS — hex, rgb(), hsl(), um nome de cor.
- Acrescente uma posição depois de uma cor para fixá-la: “#000 80%”.
- Escolha linear, radial ou cônico, e o ângulo ou o centro.
- Copie a declaração.
Perguntas frequentes
- Por que vem uma cor chapada primeiro?
- É a reserva. Tudo que não souber ler o gradiente — um navegador antigo, um cliente de e-mail, um renderizador de PDF — pega a primeira declaração e ignora a segunda. Sem ela, esses leitores ficam sem fundo nenhum.
- Para onde aponta 180deg?
- Para baixo. No CSS, 0deg aponta para cima e o ângulo corre no sentido horário, o oposto da velha sintaxe -webkit- e da maioria das ferramentas de design. É a coisa que mais se inverte por aqui.
- Por que texto em vez de uma tela para arrastar?
- Porque não dá para colar uma tela numa revisão de código. O que sai aqui é uma declaração: dá para comparar, versionar e ler pela próxima pessoa que abrir o arquivo.
- Alguma coisa é enviada para um servidor?
- Não. Roda no navegador, então o que você colar fica no seu computador.