Gerador de Gradientes CSS

Todas as ferramentas

Crie gradientes CSS lineares, radiais e cónicos com vários pontos de cor e copie o código.

Pré-visualização
Saída CSS
background: —;

Tudo é executado no seu navegador — sem envio, sem registo.

Tipo de gradiente
deg
Pontos de cor Clique na barra para adicionar um ponto, arraste para mover
Ponto selecionado
Cor do ponto
100%
%
Predefinições

Sobre Gerador de Gradientes CSS

O Gerador de Gradiente CSS cria gradientes lineares, radiais e cônicos com controle visual total. Adicione pontos de cor clicando na barra do gradiente, arraste-os para reposicioná-los, e dê a cada ponto sua própria cor, opacidade e posição. Gradientes lineares recebem um controle de ângulo; os radiais, uma forma (círculo ou elipse) e posição; os cônicos, um ângulo inicial.

A pré-visualização ao vivo mostra exatamente o que o navegador vai renderizar, e um botão de aleatorização mais um conjunto de predefinições selecionadas estão à disposição quando você precisa de um ponto de partida em vez de uma tela em branco. Os pontos podem ser adicionados e removidos livremente — um gradiente só precisa de pelo menos dois.

Quando estiver do jeito certo, copie o valor puro do gradiente ou uma regra CSS completa. O gerador roda inteiramente no seu navegador, sem envio de arquivos e sem cadastro, tornando-o um companheiro rápido para botões, fundos de destaque, bordas e efeitos de texto.

Como usar Gerador de Gradientes CSS

  1. Escolha o tipo de gradiente: linear, radial ou cônico.
  2. Defina o ângulo (linear), a forma e posição (radial), ou o ângulo inicial (cônico).
  3. Clique na barra do gradiente para adicionar pontos de cor e arraste-os para posicioná-los.
  4. Dê a cada ponto sua cor, opacidade e posição exata.
  5. Experimente as predefinições ou o botão de aleatorização para inspiração rápida.
  6. Copie o valor do gradiente ou a regra CSS completa.

Perguntas frequentes

Gradientes lineares misturam cores ao longo de uma linha reta em um ângulo. Gradientes radiais irradiam para fora a partir de um ponto central em formato de círculo ou elipse. Gradientes cônicos varrem cores ao redor de um ponto central — o tipo por trás de gráficos de pizza e rodas de cores.

No mínimo dois, sem limite prático superior. Dois ou três pontos criam fundos limpos; pontos muito próximos criam faixas de cor nítidas, que é como efeitos listrados e segmentados são construídos.

Sim — cada ponto tem seu próprio controle de opacidade. Um ponto com 0% de opacidade esmaece o gradiente, que é a forma padrão de mesclar uma sobreposição colorida em uma foto ou esmaecer uma seção de destaque no fundo da página.

Não diretamente — navegadores não conseguem fazer transição entre valores de gradiente. Os truques usuais: animar background-position sobre um gradiente sobredimensionado, girar um gradiente cônico com uma propriedade personalizada, ou fazer fade cruzado entre dois elementos sobrepostos.

Sim, gratuito e ilimitado. Ele roda completamente no seu navegador, então nada do que você projeta é armazenado ou transmitido.
Partilhar
Ferramentas Relacionadas
Construtor de Assinatura de E-mail Crie uma assinatura de e-mail HTML profissional a partir de 30 modelos, personalize-a e guarde-a. Gratuito
Ícone para PNG Converta Bootstrap Icons, Font Awesome e mais em imagens PNG personalizadas — gratuito, no browser. Gratuito
Gerador de ícones de app Gere um conjunto completo de ícones de app prontos a publicar para a App Store e a Google Play — fundos premium com gradientes, mesh e padrões, criados a partir do seu logo. Gratuito
Gerador de favicons Crie um pacote completo de favicons a partir de um logótipo, um ícone ou um monograma — favicon.ico, PNGs modernos, ícone Apple touch, ícones PWA, manifesto web e trecho HTML. Gratuito
Gerador de Box Shadow CSS Crie box-shadows CSS em camadas com controlos deslizantes ao vivo para desvio, desfoque, propagação, cor, opacidade e inserção — pré-visualize num elemento real e copie o CSS pronto a usar instantaneamente. Gratuito
Gerador de Border-Radius CSS Crie visualmente border-radius CSS com pré-visualização em direto e copie código pronto para produção. Gratuito
Pesquisas populares
gerador de gradiente css gerador de gradiente linear css gradiente radial css gradiente cónico css criador de gradiente de fundo css ferramenta de pontos de cor de gradiente seletor de ângulo de gradiente css gerador de gradiente online
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.