Gerador de Gradientes CSS
Crie gradientes lineares atraentes e copie o código CSS diretamente para o seu projeto.
CSS Output
background: linear-gradient(90deg, #4F46E5 0%, #EC4899 100%);Preview
Entendendo os gradientes em CSS
Gradientes criam transições suaves entre diferentes cores. No CSS, são tratados como valores de background-image, permitindo criar sobreposições dinâmicas e ricas.
Gradientes lineares (Linear Gradients)
A sintaxe básica combina uma angulação ou direção com pontos de parada de cor. Ajustando o controle deslizante no gerador acima, você acompanha o efeito em tempo real.
Base de Conhecimento & FAQ
Perguntas Frequentes
Respostas e soluções diretas para dúvidas frequentes, desafios técnicos e padrões da indústria.
Por que os gradientes CSS às vezes parecem acinzentados ou opacos no meio?expand_more
Trata-se do fenômeno conhecido como 'zona morta cinza'. Quando o CSS interpola duas cores vibrantes no espaço de cor sRGB padrão, o ponto médio transita por tons de baixa saturação. Soluções:
- Inserir uma parada de cor intermediária harmoniosa (ex: verde entre azul e amarelo).
- Utilizar a sintaxe moderna CSS Color 4 em OKLCH:
background: linear-gradient(in oklch to right, blue, yellow);para manter a luminosidade e vivacidade.
Como animar um gradiente de fundo no hover com CSS?expand_more
Como os navegadores não animam a propriedade
background-image diretamente, a melhor abordagem é ampliar o tamanho do plano de fundo e aplicar transição na propriedade background-position: .gradient-btn {
background: linear-gradient(135deg, #4F46E5, #EC4899);
background-size: 200% 200%;
transition: background-position 0.4s ease;
}
.gradient-btn:hover {
background-position: 100% 100%;
}Qual a diferença entre linear-gradient e radial-gradient no CSS?expand_more
linear-gradient() realiza a transição de cor em linha reta definida por um ângulo (ex:
90deg) ou direção (to bottom right). radial-gradient() irradia a partir de um ponto focal em círculos ou elipses concêntricas, ideal para holofotes e vinhetas.Como criar o efeito moderno de glassmorphism com gradientes CSS?expand_more
O glassmorphism combina sobreposições de gradientes RGBA semitransparentes com desfoque de fundo (blur) acelerado por hardware:
.glass-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
}Gradientes CSS afetam o desempenho ou a bateria de celulares?expand_more
Não. Diferente de imagens estáticas pesadas (PNG/WebP), gradientes CSS são fórmulas matemáticas vetoriais processadas diretamente pela GPU. Não consomem tráfego de rede e usam pouquíssima memória.