Nenhuma ferramenta usada recentemente
Nenhuma ferramenta favorita ainda

Gerador Gradiente CSS Grátis: Criar Degradês Lineares Radiais

36 usos
135°

Dicas Gradientes

Linear e radial
Linear: linha reta. Radial: do centro para fora. Ajuste ângulo.
Cores personalizáveis
Escolha cores e posições. Múltiplas paradas.
CSS pronto
linear-gradient() ou radial-gradient(). Copie e cole.

Perguntas Frequentes

Q Como criar gradiente?
A Selecione tipo, cores, ângulo e copie CSS.
Q Que tipos?
A Linear e radial. Múltiplas cores.
Q Mais de duas cores?
A Sim, adicione paradas de cor.
Q Qual é a diferença entre gradientes lineares e radiais gerados aqui?
A Gradientes lineares fluem em linha reta, seja horizontal, vertical ou diagonalmente. Você controla a direção com o controle deslizante de ângulo, como defini-lo para 90 graus para um desvanecimento vertical. Gradientes radiais se expandem para fora de um ponto central, criando um efeito circular ou elíptico. Você não pode controlar diretamente a forma além do circular com esta ferramenta, mas pode escolher onde o centro está.
Q O código de gradiente funciona em todos os navegadores?
A A ferramenta gera CSS padrão que funciona no Chrome, Firefox, Safari e Edge. Internet Explorer 9 e anteriores não exibem gradientes, mas isso representa menos de 1% do tráfego global hoje. Para navegadores antigos, adicione uma cor de fundo sólida como fallback no seu CSS antes da propriedade de gradiente. Assim, os usuários veem uma cor chapada se os gradientes não forem suportados. Teste rápido: cole o código nas ferramentas do desenvolvedor de qualquer navegador moderno para verificar.

Como Usar

Ferramentas Relacionadas