Preview
CSS gerado
Controles de gradiente
Predefinições populares
Exemplos de gradiente
Explore esses exemplos impressionantes de gradiente e inspire-se para o seu próximo projeto. Clique em qualquer gradiente para carregá-lo no gerador.
Blush do pôr do sol
Um gradiente quente inspirado em belos pores do sol.
Brisa do oceano
Um gradiente calmo que evoca a sensação das águas costeiras.
Fusão de hortelã
Um gradiente fresco e moderno que combina menta e azul celeste.
Jardim exuberante
Um gradiente vibrante que representa a beleza da natureza.
Sonho Cósmico
Um gradiente mágico inspirado no céu noturno.
Hora de Ouro
Um gradiente quente que captura a essência do crepúsculo.
Documentação de gradiente
O que são gradientes CSS?
Os gradientes CSS permitem que você exiba transições suaves entre duas ou mais cores. Eles podem ser usados como plano de fundo para elementos e vêm em três tipos diferentes:
- Gradientes lineares:Cores de transição ao longo de uma linha reta.
- Gradientes radiais:Cores de transição de um ponto central para fora.
- Gradientes cônicos:Cores de transição em torno de um ponto central em um círculo.
Como usar gradientes
Depois de gerar um gradiente usando nossa ferramenta, você pode usar o código CSS em seus projetos:
- Copie o código CSS do gerador.
- Cole-o em seu arquivo CSS ou use-o embutido em seus elementos HTML.
- Aplique o gradiente a qualquer elemento usando o
backgroundproperty.
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
- Use mais de duas cores para um efeito de gradiente mais complexo.
- Ajuste as posições das cores para controlar onde as transições ocorrem.
- Combine vários gradientes para efeitos ainda mais criativos.
- Para gradientes cônicos, alterar o centro cria padrões interessantes.
- Salve seus gradientes favoritos para uso posterior.
Suporte ao navegador
Os gradientes CSS são amplamente suportados em navegadores modernos. No entanto, navegadores mais antigos, como o Internet Explorer, podem não renderizá-los corretamente. Sempre forneça uma cor alternativa:
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
Chrome
26+
Firefox
16+
Safari
6.1+
Edge
12+
Sobre esta ferramenta
Nosso gerador de gradiente CSS foi projetado para ajudar desenvolvedores e designers a criar belos gradientes sem esforço. Esteja você trabalhando em um site, aplicativo ou apenas deseja experimentar cores, essa ferramenta facilita a geração do gradiente perfeito para o seu projeto.
Features
Fácil de usar
Interface intuitiva para criar gradientes.
Design responsivo
Funciona perfeitamente em todos os tamanhos de tela.
Pronto para copiar e colar
Obtenha código CSS limpo instantaneamente.
Predefinições disponíveis
Comece com belos gradientes predefinidos.
Related Tools
Conversor SCSS para CSS
Transforme seu código SCSS em CSS. Rápido, fácil e seguro.
Gerador de transição CSS3
Transição suave de opacidade
Gere transformações CSS3 com facilidade
Uma ferramenta poderosa e intuitiva para criar transformações CSS3 complexas sem escrever código. Visualize as alterações em tempo real e copie o CSS gerado para usar em seus projetos.
Conversor SCSS para CSS
Transforme seu código SCSS em CSS. Rápido, fácil e seguro.
Gerador de transição CSS3
Transição suave de opacidade
Binário para Decimal
Converta código binário em números decimais sem esforço