Gerador de Gradiente CSS

Crie gradientes CSS bonitos visualmente. Linear, radial, cônico. Exporte código CSS limpo. Grátis, instantâneo.

About CSS Gradients

CSS gradients let you display smooth transitions between two or more colors. They're defined as background-image values:

  • Linear: Colors transition along a straight line (angle-based)
  • Radial: Colors radiate from a center point (circular/elliptical)
  • Conic: Colors rotate around a center point (pie-chart style)

Copy the generated CSS and paste it directly into your stylesheet.

About Gradient Generator

Crie gradientes CSS bonitos visualmente. Gradientes lineares e radiais com múltiplas paradas de cor. Ajuste ângulo, posição e distribuição de cores. Copie código CSS pronto para usar. Perfeito para fundos de sites, botões e design de UI.

Linear e Radial

Alterne entre tipos de gradiente linear e radial. Controle ângulo, posição e forma para resultados perfeitos.

Múltiplas Paradas de Cor

Adicione paradas de cor ilimitadas. Arraste para reposicionar, ajuste cada cor com o seletor. Crie gradientes complexos facilmente.

Saída CSS ao Vivo

Copie o código CSS exato do gradiente. Pronto para colar em suas folhas de estilo, configuração do Tailwind ou sistema de design.

Pré-visualização em Tempo Real

Veja seu gradiente enquanto o cria. A pré-visualização em largura total atualiza instantaneamente a cada mudança de cor ou ângulo.

📋 Common Use Cases

Design Web

Crie fundos de gradiente modernos e acentos para botões, cabeçalhos e seções hero.

Prototipagem de UI

Gere rapidamente estilos de gradiente para mockups e protótipos sem escrever CSS manualmente.

Ativos de Marca

Projete elementos de gradiente da marca e gráficos para redes sociais com as cores da sua marca.

Entrega para Desenvolvedores

Exporte código CSS exato que os desenvolvedores podem colar diretamente em uma folha de estilo.

🪜 How to Use This Tool

  1. Escolha o tipo de gradiente
    Selecione gradiente linear, radial ou cônico.
  2. Escolha suas cores
    Defina as cores inicial e final e adicione paradas de cor, se necessário.
  3. Ajuste a direção
    Altere o ângulo, a posição ou a forma até que o gradiente fique do jeito certo.
  4. Exporte o CSS
    Copie o código CSS gerado e use-o no seu projeto.

📚 Related Guides

Frequently Asked Questions

Esta ferramenta de cores é gratuita?
Sim. Todas as ferramentas de cores são totalmente gratuitas. Não é necessário cadastro.
Como funciona o verificador de contraste?
Ele calcula as taxas de contraste WCAG 2.1 entre as cores de primeiro plano e de fundo, mostrando aprovação/reprovação para AA e AAA em tamanhos de texto normal e grande.