🌈

gerador gradiente CSS

Crie gradientes lineares e radiais em CSS visualmente. Adicione paradas de cor, ajuste posições, defina o ângulo e copie o CSS pronto para usar com um clique.

Ferramentas de geração Executa localmente Nenhum dado enviado
Gradiente CSSgradiente lineargradiente radialparadas de cor
Tipo de gradiente
Ângulo
Paradas de cor
Pré-visualizar
Saída CSS
background: linear-gradient(135deg, #7c6af7 0%, #06b6d4 100%);

O que é o gerador gradiente CSS?

O gerador gradiente CSS é uma ferramenta visual para criar gradientes CSS lineares e radiais. Você adiciona paradas de cor, define suas posições em uma escala de 0—00%, escolhe um ângulo para gradientes lineares e vê o resultado ao vivo. A propriedade CSS final está pronta para colar em qualquer folha de estilos.

Como usar o gerador gradiente CSS

  1. Escolha o tipo de gradiente linear ou radial.
  2. Para gradientes lineares, defina o ângulo usando o controle deslizante.
  3. Edite as paradas de cor padrão clicando nos seletores de cor e ajustando as posições.
  4. Adicione mais paradas de cor com o botão "Adicionar parada de cor" se necessário.
  5. Clique em "Copiar CSS" para copiar a propriedade do gradiente para a área de transferência.

Ferramentas relacionadas

🎨
extrair paleta imagem
Extraia uma paleta compacta de cores HEX dominantes de uma imagem
 ☀️
ajustar brilho contraste
Ajuste o brilho e o contraste da foto com pré-visualização instantânea
 🌓
efeito duotone imagem
Mapeie sombras e realces da imagem para duas cores personalizadas
Sintaxe de gradiente CSS ▾
Exemplo
Entrada Linear, 135°, parada 1: #7c6af7 em 0%, parada 2: #06b6d4 em 100%
Saída background: linear-gradient(135deg, #7c6af7 0%, #06b6d4 100%);
Casos de uso comuns
  • Gere gradientes de fundo para landing pages e componentes de UI
  • Crie sobreposições de gradiente para seções hero
  • Crie padrões de paradas de cor para gráficos ou divisores
  • Prototipe ideias de gradiente antes de transferir para uma ferramenta de design
Perguntas frequentes
Quais tipos de gradiente são suportados?

Gradientes lineares com ângulo personalizado (0—60°) e gradientes radiais (formato circular) são suportados.

Posso adicionar mais de duas paradas de cor?

Sim. Clique em "Adicionar parada de cor" para adicionar quantas paradas precisar. Cada parada tem cor e posição independentes.

Como controlo a direção de um gradiente linear?

Use o controle deslizante Ângulo. 0° é de cima para baixo, 90° é da esquerda para a direita e 135° vai na diagonal.

A saída é compatível entre navegadores?

Yes. The tool outputs standard CSS using the linear-gradient() and radial-gradient() functions which are supported by all modern browsers.