Ferramentas CSS/Gerador de Gradientes
Gerador de Gradientes
Crie belos gradientes CSS com nosso editor visual
Visualização
Controles
135°
#6366F1
0%
#8B5CF6
50%
#A855F7
100%
Código CSS
Loading...🎨Presets Criativos
💡
Dica Pro
Clique em qualquer preset para aplicá-lo, depois personalize as cores e o ângulo. Use o botão Compartilhar para salvar sua criação como URL.
CSS Gradient Guide
Learn how to use CSS gradients effectively
What is CSS Gradient?
CSS gradients let you display smooth transitions between two or more specified colors. They are generated by the browser, so they look great at any screen size and can be zoomed infinitely without losing quality.
Gradient Types
- Linear: Creates a gradient along a straight line. You can control the direction using angles (0-360°).
- Radial: Creates a gradient that radiates from a center point outward in a circular or elliptical shape.
- Conic: Creates a gradient with color transitions rotated around a center point, like a color wheel.
How to Use This Tool
- Select a gradient type (Linear, Radial, or Conic)
- Adjust the angle or direction using the slider
- Add, remove, or modify color stops
- Copy the generated CSS code to use in your project
Pro Tips
- Use complementary colors for vibrant gradients, or analogous colors for subtle transitions
- Add more color stops at similar positions to create sharper color boundaries
- Radial gradients work great for spotlight effects and button highlights
Browser Support
CSS gradients are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. For older browsers, consider using a solid color fallback.
Perguntas frequentes
Qual a diferenca entre gradiente linear e radial?
Gradientes lineares criam transicoes de cor ao longo de uma linha reta em um angulo especifico. Gradientes radiais irradiam do centro para fora em forma circular ou eliptica. Lineares sao adequados para fundos e botoes, enquanto radiais sao eficazes para efeitos de destaque ou iluminacao.
Por que adicionar mais pontos de cor?
Com dois pontos de cor voce tem uma transicao simples entre duas cores. Adicionar mais pontos cria gradientes mais ricos e complexos. Voce tambem pode colocar pontos proximos para criar linhas de cor nitidas em vez de transicoes suaves.
Por que o gradiente nao aparece no navegador antigo?
Navegadores antigos (especialmente IE9 ou anterior) nao suportam gradientes CSS. Defina uma cor solida de fallback na propriedade background antes do gradiente. O navegador que suporta exibira o gradiente, caso contrario mostrara a cor solida.
O que e gradiente conico?
Gradiente conico cria transicoes de cor rotacionando ao redor de um ponto central, como uma roda de cores. E eficaz para criar graficos de pizza, medidores de progresso e efeitos visuais artisticos.
Os gradientes afetam o desempenho da pagina?
Gradientes CSS sao gerados pelo navegador, entao sao muito leves. Ao contrario de imagens, nao exigem downloads adicionais e nao perdem qualidade ao ampliar. Porem, gradientes muito complexos podem afetar o desempenho de dispositivos moveis antigos.