Gerador de Gradientes CSS
Crie belos gradientes CSS visualmente. Escolha o tipo linear, radial ou cônico, adicione paradas de cor, ajuste o ângulo e obtenha uma pré-visualização ao vivo. Copie o CSS pronto com um clique.
Paradas de cor
Pré-visualização
CSS
Tudo roda no seu navegador — nenhum dado é enviado.
Como usar o gerador de gradientes
- Escolha o tipo de gradiente — linear, radial ou cônico.
- Defina suas cores e posições com os seletores de cor e controles de parada.
- Ajuste o ângulo (linear) ou a forma (radial), depois copie o CSS.
Gradientes CSS Explicados
Gradientes CSS são renderizados pelo navegador usando matemática, não pixels — são infinitamente escaláveis e carregam instantaneamente.
Gradientes lineares são os mais comuns. Com múltiplas paradas, você pode criar efeitos complexos como céus de nascer do sol ou gradientes de marca.
Gradientes cônicos rotacionam cores em torno de um ponto central — perfeitos para gráficos de pizza, rodas de cores e padrões em estrela.
Perguntas frequentes
O que é um gradiente CSS? ▼
Uma transição de cor suave gerada em CSS com linear-gradient(), radial-gradient() ou conic-gradient() — sem arquivo de imagem.
Diferença entre linear, radial e cônico? ▼
Linear: ao longo de uma linha reta. Radial: de um ponto central para fora. Cônico: girando em torno de um ponto central.
Como mudo o ângulo de um gradiente linear? ▼
Use o campo de ângulo (0–360°). A 90deg o gradiente vai da esquerda para a direita; a 180deg de cima para baixo.
O que são paradas de cor? ▼
Cada parada define uma cor e sua posição (0%–100%). Múltiplas paradas criam gradientes multicoloridos.
Como crio um gradiente transparente? ▼
Defina o alfa de qualquer parada de cor como 0 usando rgba() ou a palavra-chave CSS transparent.
Compatibilidade com navegadores? ▼
Todos os navegadores modernos suportam gradientes lineares, radiais e cônicos sem prefixos de fornecedor.
Posso usar gradientes como preenchimento de texto? ▼
Sim: defina o fundo como seu gradiente, depois aplique background-clip: text e color: transparent.
Como crio um gradiente repetitivo? ▼
Use repeating-linear-gradient() ou repeating-radial-gradient() com paradas de cor definidas.
Ferramentas relacionadas
Gerador de Sombras CSS
Crie sombras box-shadow visualmente com pré-visualização ao vivo. Ajuste deslocamento, desfoque, propagação e cor e copie o CSS pronto para usar instantaneamente.
Gerador de Glassmorfismo
Gere efeitos CSS de glassmorfismo com controles de desfoque e transparência. Pré-visualização ao vivo e CSS pronto para copiar para designs de vidro fosco.
Gerador de Triângulos CSS
Crie triângulos CSS puros usando a técnica do border hack. Escolha direção, tamanho e cor com pré-visualização e CSS pronto para copiar.