Gerador de gradiente CSS

Sobre o Gerador de gradiente CSS

Isso constrói um gradiente CSS visualmente e te dá o código exato para colar na sua folha de estilos. Em vez de adivinhar valores de cor e ângulos manualmente, você escolhe duas cores e uma direção, vê a prévia se atualizar ao vivo, e copia a regra background quando estiver do jeito certo. É útil para botões, seções hero, fundos de cards, banners e qualquer elemento de UI que precise de uma transição de cor suave.

Como funciona

Você escolhe duas cores e um tipo de gradiente:

• Linear — as cores se misturam ao longo de uma linha reta num ângulo que você define (0–360°), então você pode fazer o gradiente ir de cima para baixo, da esquerda para a direita, na diagonal, ou em qualquer direção.
• Radial — as cores se misturam para fora a partir do centro, num círculo.

O painel de prévia mostra o resultado imediatamente, e a caixa de saída te dá um CSS pronto para usar, como background: linear-gradient(45deg, #…, #…);, para copiar direto para seus estilos.

Suposições e comportamento

• Produz um gradiente de duas cores (uma cor inicial e uma final).
• Gradientes lineares usam um ângulo em graus; 0° aponta para cima, 90° para a direita, seguindo a convenção do CSS.
• Gradientes radiais se misturam do centro para fora como um círculo; o controle de ângulo fica oculto já que não se aplica.
• O CSS gerado é padrão e funciona em todos os navegadores modernos sem prefixos de fornecedor.

Limitações

• Apenas duas paradas de cor. Não suporta gradientes com três ou mais paradas, posições de parada personalizadas, ou múltiplos gradientes em camadas — para isso você precisaria editar o CSS manualmente.
• Oferece linear e radial, não gradientes cônicos nem repetidos.
• Gradientes radiais usam o círculo centralizado padrão; não expõe palavras-chave de forma, tamanho ou posição.
• Gera a declaração background; não trata de alternativas para navegadores muito antigos (raramente necessário hoje).

Privacidade

O gradiente e seu CSS são gerados inteiramente no seu navegador. Nada é enviado ou armazenado.