Gerador de gradientes CSS
Crie gradientes lineares, radiais ou cônicos, ajuste cada cor e copie o CSS pronto para usar.
- Prévia instantânea
- Sem cadastro
- Grátis
Prévia do gradiente
linear-gradient(to right, #667EEA 0%, #764BA2 100%)Cores intermediárias
Como criar gradientes CSS
Escolha o tipo e a direção do gradiente e edite as cores e posições. A prévia e o CSS são atualizados imediatamente. Você pode copiar a regra completa, somente o valor do gradiente ou baixar um arquivo CSS.
O gradiente linear distribui cores em uma linha, o radial parte de um ponto e o cônico gira ao redor de um centro. O gerador permite testar visualmente os três tipos.
Clique em Adicionar cor, edite o código HEX e escolha uma posição entre 0% e 100%. É possível usar até seis cores, remover pontos, inverter a ordem ou aplicar uma combinação pronta.
Sim. Ative Repetir gradiente para gerar a função repeating correspondente. Ajuste as posições das cores para controlar o espaçamento do padrão.