Como usar
- Em Tipo, escolha Linear, Radial ou Cônico.
- Defina as cores em Paradas de cor usando o seletor ou valores hexadecimais.
- Ajuste Ângulo para Linear ou Cônico; para Radial, escolha Forma.
- Clique em + Adicionar parada de cor se precisar de mais uma cor.
- Clique em Copiar CSS e cole a declaração na sua folha de estilos. Para usar só a função do gradiente, clique em Copiar valor.
Exemplos
Sobreposição escura para foto de produto
Entrada
Linear, 180° · #000000 em 0%, opacidade 0% · #000000 em 100%, opacidade 80%
Saída
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
Fundo para banner de loja
Entrada
Radial, Elipse, em cima à esquerda · #DBEAFE em 0% · #2563EB em 60% · #1E3A8A em 100%
Saída
background: radial-gradient(ellipse at top left, #DBEAFE 0%, #2563EB 60%, #1E3A8A 100%);
Listras para uma faixa promocional
Entrada
Linear, 45°, Repetir · #FDE047 em 0% e 10% · #166534 em 10% e 20%
Saída
background: repeating-linear-gradient(45deg, #FDE047 0%, #FDE047 10%, #166534 10%, #166534 20%);
Dicas
- Escolha cores exatas e confira o contraste com Códigos de cores HTML.
- Teste o gradiente em uma página com o Editor HTML.
Perguntas frequentes
Por que Repetir não muda o gradiente?
A repetição não tem efeito visível quando a última parada está em 100%. Mova essa parada para uma posição menor, como 25%.
Posso usar cores em RGB ou HSL?
Os campos aceitam apenas hexadecimal ou cores escolhidas pelo seletor. Você pode inserir #RGB, #RGBA, #RRGGBB ou #RRGGBBAA; nas formas com canal alfa, a transparência é convertida em opacidade.
Posso baixar o gradiente como PNG?
A ferramenta gera CSS, não imagens PNG ou JPG. O resultado é uma declaração background para usar na sua folha de estilos.
Meu gradiente fica salvo?
O último estado válido fica salvo no localStorage do seu navegador e é restaurado na próxima visita. Clique em Redefinir para apagar esse estado; as cores e o CSS não são enviados ao Google Analytics.