Gerador de Gradientes

Todas as ferramentas

Construa gradientes CSS lineares, radiais e cónicos de raiz com controlo de múltiplos pontos arrastáveis e predefinições selecionadas. Copie CSS pronto a colar instantaneamente.

Pré-visualização em direto
Predefinições
Tipo de gradiente
Ângulo
°
Pontos de cor
Arraste um ponto para o mover, ou clique na barra para adicionar um. Selecione um ponto para editar a sua cor.
Ponto selecionado
%
CSS
background: —;

Tudo é calculado em direto no seu browser — sem registo, completamente gratuito.

Sobre Gerador de Gradientes

O Gradient Generator cria gradientes CSS personalizados a partir do zero. Escolha um tipo linear, radial ou cónico, defina o ângulo e molde a mistura com um editor de múltiplos pontos de paragem: arraste as alças para mover pontos, clique na barra para adicionar novos, e recolora qualquer ponto com um seletor — a pré-visualização ao vivo atualiza-se enquanto trabalha.

Predefinições selecionadas dão-lhe um bom ponto de partida quando não quer começar de uma folha em branco, e ações de um clique — aleatório, inverter, rodar 45° — tornam a exploração rápida. O CSS gerado está sempre visível e mantém-se sincronizado com a pré-visualização, pelo que o que copia é exatamente o que viu.

Tudo é calculado em tempo real no seu navegador, sem qualquer custo. Copie a regra CSS completa ou apenas o valor de fundo e cole-o numa folha de estilos, num estilo de botão ou numa secção hero — um gerador de gradientes CSS direto para fundos, sobreposições e destaques de interface.

Como usar Gerador de Gradientes

  1. Escolha um tipo de gradiente: linear, radial ou cónico.
  2. Comece a partir de uma predefinição ou clique em "Aleatório" para um ponto de partida instantâneo.
  3. Arraste as alças dos pontos de paragem para posicionar cores, clique na barra para adicionar pontos, e edite a cor de cada um.
  4. Ajuste o ângulo, ou use "Inverter" e "Rodar 45°" para reorientar a mistura.
  5. Copie a regra CSS ou o valor de fundo e cole-o no seu projeto.

Perguntas frequentes

Sim. A ferramenta é totalmente do lado do cliente — sem registo, sem créditos e sem limites quanto ao número de gradientes que cria ou copia.

Um gradiente linear mistura cores ao longo de uma linha reta no ângulo escolhido. Um gradiente radial irradia para fora a partir de um ponto central em círculos. Um gradiente cónico varre as cores à volta de um ponto central como um gráfico circular, o que é ótimo para círculos cromáticos e anéis de progresso.

Um gradiente precisa de pelo menos dois pontos de paragem, e pode continuar a clicar na barra para adicionar mais. Cada ponto tem a sua própria cor e posição arrastável, pelo que misturas complexas com várias cores são fáceis de construir.

Os gradientes lineares e radiais são suportados em todo o lado. Os gradientes cónicos são suportados em todos os navegadores modernos, mas não nos muito antigos, por isso forneça uma background-color de reserva se precisar de suportar versões antigas.

Sim — use a ferramenta complementar Gradient Generator from Image, que extrai as cores dominantes de uma imagem carregada e transforma-as em pontos de paragem de gradiente editáveis. Esta ferramenta é a contraparte que começa do zero.
Partilhar
Ferramentas Relacionadas
Gerador de Gradiente a partir de Imagem Extraia um gradiente bonito de qualquer fotografia — largue uma imagem, escolha um mood e as cores dominantes tornam-se pontos de gradiente arrastáveis. Copie CSS pronto a colar instantaneamente. Gratuito
Gerador de Paletas de Cor Construa paletas de cores harmoniosas a partir de uma roda de cores interativa — aplique regras de harmonia como análoga, complementar ou tríade, e copie qualquer valor instantaneamente. Gratuito
Misturador de Cores Misture uma cor inicial com uma cor final em até 10 passos — pré-visualize o gradiente, obtenha cada tom e copie qualquer formato instantaneamente. Gratuito
Emparelhamento de Tipos de Letra e Diretório Google Fonts Explore um diretório selecionado de Google Fonts populares com pré-visualizações em direto, filtre por categoria e pesquise por nome, depois copie CSS pronto a colar e explore emparelhamentos de tipos de letra sugeridos — tudo no seu browser. Gratuito
Extrator de Cores de Imagem Extraia uma paleta refinada e pronta a copiar de qualquer imagem. Gratuito
Ecrã totalmente branco Preencha todo o ecrã com branco puro — perfeito para detetar pixels mortos, limpar o monitor, como caixa de luz ou como luz de preenchimento suave. Grátis e funciona no seu navegador. Gratuito
Pesquisas populares
gerador de gradiente criador de gradiente css gerador de gradiente linear criador de gradiente radial gradiente cônico css gerador de gradiente grátis
Precisa de ajuda?
Encontrou um problema com esta ferramenta? Avise a nossa equipa.
Relatar um problema

Adicione esta ferramenta gratuita ao seu próprio site — copie e cole o código abaixo.