Gerador de gradiente CSS
Monte um gradiente de fundo em CSS de forma visual: escolha as cores, mexa na posição delas, defina o ângulo e copie o CSS para a sua folha de estilo.
Não precisa de dados
Como usar
- Escolha entre linear, radial e cônico.
- Escolha as cores e arraste a posição de cada uma.
- Defina o ângulo.
- Copie o CSS.
Como funciona
A ferramenta escreve as funções de gradiente padrão do CSS, aceitas por todos os navegadores atuais: linear-gradient(ângulo, cor posição, …), radial-gradient(…) e conic-gradient(from ângulo, …). As paradas são ordenadas por posição, então a saída é sempre válida.
Para o texto continuar legível sobre um gradiente, confira o contraste da cor do texto tanto na parte mais clara quanto na mais escura.
Exemplos
- Fundo de seção principal
- linear-gradient(135deg, #0d6e63 0%, #3cc3b0 55%, #f5d76e 100%)
Usos comuns
- Seções de destaque e botões
- Fundos e cards
- Prototipar ideias de cor
Privacidade e segurança
Esta ferramenta não pede nenhum dado pessoal nem nenhum arquivo. Os resultados são gerados no seu dispositivo. Como cada ferramenta trata os arquivos
Perguntas frequentes
Preciso de prefixos de fabricante?
Não. Os gradientes sem prefixo são aceitos por todos os navegadores principais há anos.
Dá para usar transparência?
Dá — depois de copiar, edite o CSS para usar rgba() ou cores hexadecimais de 8 dígitos.
Última atualização: