Gerador de Gradientes
Crie belos gradientes CSS para seus designs. Gere gradientes lineares, radiais e cônicos com pontos de cor personalizados e copie o código CSS instantaneamente.
Color Stops
Código CSS
background: linear-gradient(90deg, #3B82F6 0%, #10B981 100%); Predefinições
Índice
O que é um gradiente CSS?
Um gradiente CSS é uma transição suave entre duas ou mais cores. Os gradientes são uma ferramenta de design poderosa que pode adicionar profundidade, dimensão e interesse visual aos seus designs web.
Os gradientes CSS são amplamente suportados em todos os navegadores modernos e podem ser usados para fundos, bordas, efeitos de texto e muito mais.
Tipos de gradientes explicados
Gradiente linear
Os gradientes lineares fazem a transição de cores ao longo de uma linha reta. Você pode controlar a direção usando um ângulo ou palavras-chave direcionais.
Exemplo: linear-gradient(90deg, #3B82F6, #10B981)
Gradiente radial
Os gradientes radiais fazem a transição de cores de um ponto central para fora em um padrão circular ou elíptico. Perfeitos para efeitos de holofote.
Exemplo: radial-gradient(circle at center, #3B82F6, #10B981)
Gradiente cônico
Os gradientes cônicos fazem a transição de cores ao redor de um ponto central, como uma roda de cores. Ótimos para gráficos de pizza.
Exemplo: conic-gradient(from 0deg at center, #3B82F6, #10B981)
Casos de uso
Os gradientes CSS são versáteis e podem ser usados em muitos contextos de design:
- Fundos: Crie fundos atraentes para sites, seções ou componentes
- Botões: Adicione profundidade e interesse visual a botões e elementos de chamada para ação
- Cartões: Melhore os designs de cartões com fundos de gradiente sutis ou ousados
- Efeitos de texto: Aplique gradientes ao texto para tipografia moderna e estilosa
- Bordas: Crie bordas com gradiente usando background-clip ou border-image
- Sobreposições: Use gradientes como sobreposições em imagens para melhorar a legibilidade do texto
- Visualização de dados: Crie gráficos e visualizações com cores gradientes
- Identidade de marca: Incorpore gradientes na identidade visual da sua marca
Pontos de cor
Os pontos de cor definem onde as cores começam e terminam em um gradiente.
Posição
O valor de posição determina onde a cor aparece no gradiente. Os valores variam de 0% (início) a 100% (fim).
Múltiplos pontos
Você pode adicionar múltiplos pontos de cor para criar gradientes complexos e multicoloridos.
Formato de cor
Os pontos de cor aceitam qualquer valor de cor CSS válido, incluindo códigos hex, valores RGB, valores HSL e cores nomeadas.
Melhores práticas
Mantenha sutil
Embora gradientes ousados possam ser chamativos, gradientes sutis geralmente funcionam melhor para designs profissionais.
Considere o contraste
Garanta contraste suficiente entre as cores do gradiente e qualquer texto ou conteúdo colocado sobre ele.
Use cores apropriadas
Escolha cores que funcionem bem juntas. Cores complementares frequentemente criam os gradientes mais harmoniosos.
Limite os pontos de cor
2-4 pontos geralmente criam os gradientes mais limpos e eficazes.
Teste em diferentes telas
Os gradientes podem aparecer diferentes em várias telas e dispositivos.
Considerações de desempenho
Os gradientes CSS são eficientes e não requerem arquivos de imagem.
Perguntas frequentes
Os gradientes lineares fazem a transição ao longo de uma linha reta. Os radiais de um ponto central para fora. Os cônicos ao redor de um ponto central como uma roda de cores.
Sim! Os gradientes CSS são uma tecnologia web padrão e podem ser usados livremente em qualquer projeto.
Use background-clip: text junto com -webkit-background-clip: text e -webkit-text-fill-color: transparent.
Sim! Você pode animar gradientes usando animações ou transições CSS.
Os gradientes lineares e radiais são suportados em todos os navegadores modernos. Os cônicos têm excelente suporte em navegadores modernos.
Para a maioria dos designs, 2-4 pontos de cor funcionam melhor.
Atualmente, os gradientes não são salvos automaticamente. Você pode copiar o código CSS e salvá-lo manualmente.