Gerador de gradiente CSS
Cores de um lado, uma declaração do outro.
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.
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.