Gerador de Gradiente CSS
O que é Gerador de Gradiente CSS
Um gerador de gradiente CSS permite criar um degradê linear ou radial visualmente e copiar o CSS exato. Escolha o tipo de gradiente, defina o ângulo (linear) ou o formato e a posição (radial), adicione quantas paradas de cor precisar e ajuste cada uma na posição certa. A pré-visualização atualiza na hora, e a caixa de saída sempre mostra uma declaração background pronta para colar.
Como usar
- Escolha Linear ou Radial como tipo de gradiente.
- Ajuste o controle de ângulo para gradientes lineares, ou escolha o formato e a posição para radiais.
- Defina a cor e a posição de cada parada, e adicione mais com o botão Adicionar parada de cor.
- Copie o CSS gerado na caixa de saída e cole no seu arquivo de estilos.
Quando usar
Está montando uma seção hero e precisa de um fundo azul para rosa suave? Defina duas paradas em 0% e 100%, escolha um ângulo e copie background: linear-gradient(90deg, #3B82F6 0%, #EC4899 100%); direto para o seu CSS. Útil também para overlays de cards, estados de hover em botões ou um brilho radial atrás de uma logo, sem ajustar a sintaxe do gradiente na mão no devtools.
Perguntas frequentes
Qual a diferença entre gradiente linear e radial?
Um gradiente linear transiciona as cores ao longo de uma linha reta em um ângulo fixo, como um pôr do sol passando de laranja para roxo. Um gradiente radial transiciona as cores a partir de um ponto central, em círculo ou elipse, como um holofote ou um efeito de brilho.
Quantas paradas de cor posso adicionar?
Quantas quiser. Todo gradiente precisa de pelo menos duas paradas para renderizar, e você pode adicionar mais com o botão Adicionar parada de cor para criar transições com várias cores, como arco-íris ou paletas de marca.
O que significa a porcentagem de posição em cada parada?
A posição indica onde aquela cor atinge força total ao longo do gradiente, de 0% (início) a 100% (fim). Mover a posição de uma parada muda onde sua cor domina e como ela se mistura com as vizinhas.
O CSS gerado funciona em todos os navegadores?
Sim. linear-gradient() e radial-gradient() são funções CSS padrão suportadas por todos os navegadores modernos, sem precisar de prefixos.
Posso compartilhar esta ferramenta com meu gradiente preenchido?
Sim. A URL é atualizada automaticamente enquanto você monta o gradiente. Copie da barra de endereço ou use o botão Compartilhar, e quem abrir verá exatamente o mesmo gradiente.
Ferramentas relacionadas
Calculadora de Proporção
Calcule a proporção, encontre a largura ou altura que falta e redimensione imagens e vídeos mantendo as mesmas proporções. Grátis.
Gerador de Código de Barras
Gere códigos de barras EAN-13 ou Code 128 online. Digite o número ou texto e baixe como SVG ou PNG. Grátis, sem cadastro.
Decodificador Base64
Decodifique strings Base64 para texto simples instantaneamente. Suporta saída Unicode completa com emojis. Decodificador Base64 gratuito.