Crie belos gradientes CSS sem esforço
Gere gradientes lineares, radiais e cônicos impressionantes com nossa interface intuitiva. Copie o código CSS e use-o em seus projetos instantaneamente.
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
Conversor de Sass para CSS
Transforme seu código Sass em CSS. Rápido, fácil e seguro.
Ferramenta on-line do gerador de colunas CSS
Crie e visualize funções personalizadas de easing CSS
Calculadora de probabilidade
Calcule probabilidades para vários cenários com nossa calculadora de probabilidade abrangente.
Conversor de unidade de velocidade
Converta entre diferentes unidades de velocidade com precisão para suas necessidades de engenharia, científicas e diárias