Skip to content
Ferramenta GratuitaDesign

Crie lindos gradientes e exporte como CSS ou imagens

Escolha cores, adicione limites e ajuste o ângulo ou ponto central para criar o gradiente exato que você precisa. A ferramenta oferece suporte a gradientes lineares, radiais e cônicos com paradas de cores ilimitadas. Copie o código CSS da sua folha de estilo ou baixe o gradiente como PNG de alta resolução para uso em projetos de design.

Use esta ferramenta gratuitamente

Características

1

Três tipos de gradiente

Crie gradientes lineares com qualquer ângulo, gradientes radiais com centro e forma ajustáveis ​​ou gradientes cônicos que giram em torno de um ponto. Alterne entre os tipos e a visualização será atualizada instantaneamente.

2

Paradas de cores ilimitadas

Adicione quantas paradas de cores forem necessárias ao longo da barra de gradiente. Arraste as paradas para reposicioná-las, clique duas vezes para alterar a cor ou clique com o botão direito para excluí-las. Cada parada suporta opacidade para gradientes semitransparentes.

3

Saída de código CSS

A ferramenta gera código de imagem de fundo CSS válido com prefixos de fornecedor. Copie o código e cole-o diretamente na sua folha de estilo. A saída é atualizada em tempo real conforme você edita o gradiente.

4

Exportação de imagem PNG

Baixe o gradiente como PNG em qualquer resolução – de miniaturas de 100 px a banners de 4.000 px. Use a imagem como plano de fundo, sobreposição ou elemento de design em ferramentas que não oferecem suporte a gradientes CSS.

Como usar

1

Escolha o tipo de gradiente

Selecione linear, radial ou cônico. Para linear, defina o ângulo; para radial, defina o ponto central e a forma.

2

Adicione e ajuste cores

Clique na barra de gradiente para adicionar limites de cores. Arraste para reposicionar, clique duas vezes para alterar a cor e ajuste a opacidade de cada parada.

3

Copie CSS ou baixe

Copie o código CSS gerado para uso na web ou defina uma resolução e baixe o gradiente como uma imagem PNG.

Especificações

Tipos de gradienteLinear, radial, cônico
A cor paraIlimitado
Faixa de ângulo0–360°
Saída CSSPadrão + prefixos de fornecedor
Exportação PNGAté 4.000 × 4.000 pixels
ProcessamentoLado do cliente (instantâneo)

Related Magic Eraser Tools

Perguntas comuns

Posso criar um gradiente com transparência?

+

Sim. Cada parada de cor possui um controle deslizante de opacidade. Defina a opacidade abaixo de 100% para criar áreas semitransparentes no gradiente. A saída CSS usa valores rgba e a exportação PNG preserva o canal alfa.

O que é um gradiente cônico?

+

Um gradiente cônico irradia pontos de cor em torno de um ponto central, como o movimento do ponteiro de um relógio. É útil para efeitos de gráfico de pizza, rodas de cores e fundos decorativos. O suporte do navegador é excelente em navegadores modernos.

Posso usar o CSS gerado em qualquer framework?

+

Sim. A saída é CSS padrão que funciona em HTML simples, React, Vue, Tailwind e qualquer outra estrutura que suporte CSS embutido ou baseado em folha de estilo.

Precisa de um gradiente sobre uma foto?

AI Enhance pode ajustar o tom da cor e a iluminação de suas fotos, e nossa ferramenta de sobreposição de imagem permite misturar um gradiente na parte superior de qualquer imagem para obter uma aparência sofisticada.

Experimente gratuitamente

More free tools

Explore our other limited free edits after sign-in photo and image tools.