Escolha o tipo
Selecione linear direcional ou radial a partir do centro.
FREE CSS GRADIENT GENERATOR
Gerador de gradiente CSS grátis
Escolha cores e posições para gerar CSS linear-gradient ou radial-gradient na hora.
A entrada e o resultado não são enviados nem salvos em servidor.
- 1Configurar cores
- 2Ver gradiente
- 3Copiar CSS
1 · Configurar cores
Configure o gradiente
2 · Ver gradiente
Resultado
Prévia do gradiente
Usa HEX sRGB opaco e pontos percentuais. O resultado é CSS, não uma imagem.
Guia grátis de fundo CSS
Crie um fundo suave com pontos de cor
Gere gradientes lineares e radiais grátis, sem conta ou instalação.Ajuste cores
Defina de duas a cinco cores e posições de 0% a 100%.
Copie o CSS
Confira a prévia e cole a declaração background.
Entenda gradientes CSS
O navegador mistura os pontos
CSS cria transições responsivas sem arquivo de imagem.
Linear
O ângulo controla a direção das cores.
Radial
Círculo ou elipse se espalha a partir do centro.
Uma linha CSS
Cole a declaração background no seu estilo.
FREE CSS GRADIENT GENERATOR FAQ
Dúvidas sobre gradiente CSS
Veja uso grátis, cores e resultado.1O gerador é grátis?
Sim. É grátis, sem conta e sem limite de uso.
2Quantas cores posso usar?
De dois a cinco pontos de cor.
3Faz gradiente linear e radial?
Sim. Linear com ângulo e radial central em círculo ou elipse.
4Posso baixar uma imagem?
Esta versão gera CSS responsivo, não um arquivo de imagem.