Gerador de gradiente CSS
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Por que usar um gerador visual de gradientes?
Escrever gradientes CSS manualmente é tedioso — memorizar a sintaxe de linear-gradient(), radial-gradient() e conic-gradient() com múltiplas paradas de cor e posições é propenso a erros. Nosso gerador visual permite gerenciar paradas de cor com seletores e controles deslizantes de posição, com pré-visualização ao vivo que atualiza instantaneamente, tornando a criação de gradientes rápida e intuitiva.
3 tipos de gradiente
Gradientes lineares, radiais e cônicos todos suportados com controles específicos para cada tipo
Gradientes com múltiplas cores
Adicione paradas de cor ilimitadas e arraste suas posições para criar gradientes multicoloridos complexos
Pré-visualização ao vivo
Veja seu gradiente renderizado em tempo real enquanto ajusta cores, posições e o ângulo
Como criar um gradiente CSS
Escolha o tipo de gradiente
Selecione um gradiente linear, radial ou cônico e defina o ângulo ou direção
Configure as paradas de cor
Use os seletores para definir a cor de cada parada e os controles deslizantes para posicioná-las
Copie o CSS
Clique em 'Copiar CSS' para a propriedade background completa pronta para sua folha de estilos
Casos de uso dos gradientes CSS
Fundos hero
Crie impressionantes fundos de página inteira com gradientes diagonais ou radiais
Texto com gradiente
Aplique gradientes ao texto com background-clip: text para efeitos tipográficos marcantes
Bordas com gradiente
Use gradientes com border-image para criar bordas coloridas nos elementos
Sobreposições de imagem
Sobreponha gradientes sobre imagens para criar sobreposições escuras que permitam legibilidade do texto
Boas práticas para gradientes CSS
✓ Use 135deg para gradientes diagonais
Um ângulo de 135 graus cria uma diagonal clássica de cima-esquerda para baixo-direita que parece natural e dinâmica — uma escolha popular para seções hero.
✓ Mantenha gradientes sutis para UI
Para elementos de UI (botões, cartões), use gradientes muito sutis do mesmo tom com 10-20% de diferença de luminosidade para adicionar profundidade sem ruído visual.
✓ Forneça uma cor de fallback
Adicione um background-color sólido antes do seu gradiente como fallback: background-color: #6366f1; background: linear-gradient(...).
✓ Anime a posição do gradiente
Gradientes CSS não podem ser animados diretamente, mas você pode animar background-position em um gradiente maior para criar um efeito fluido.
❓ Perguntas frequentes
Qual é a diferença entre gradientes lineares, radiais e cônicos?
Gradientes lineares fazem a transição ao longo de uma linha reta em um ângulo. Gradientes radiais irradiam de um ponto central em círculos ou elipses. Gradientes cônicos giram em torno de um ponto central como um gráfico de pizza — ideal para anéis de progresso e rodas de cores.
Como criar um gradiente transparente?
Use transparent como parada de cor: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent). Isso cria um gradiente de cor semiopaca para completamente transparente — perfeito para sobreposições de imagens.
Por que meu gradiente tem faixas ou listras?
O banding (faixas visíveis entre cores) aparece em telas de baixa qualidade ou em transições entre tons similares. Adicione uma parada de cor intermediária em um tom complementar para suavizar a transição.
Posso usar gradientes como bordas?
Sim, use border-image: linear-gradient(...) 1. Isso define o gradiente como imagem de borda. Alternativamente, use um pseudoelemento ::before com fundo de gradiente e z-index negativo para simular bordas com gradiente.