Posso criar gradientes radiais e cônicos, não apenas lineares?

Sim. Mude entre Linear, Radial e Cônico no seletor de tipo. Cada um mostra sua configuração específica: ângulo para linear, forma/tamanho/centro para radial, ângulo inicial/centro para cônico.

Posso adicionar mais de duas paradas de cor?

Sim. O botão + adiciona paradas (até 10) com seletor de cor, entrada HEX e controle de posição. O botão × remove; sempre ficam pelo menos 2.

Posso alterar o ângulo e a posição do centro?

Sim. O controle de ângulo ajusta a direção do gradiente linear (0–360°). Os controles X/Y definem o centro para radiais e cônicos. O radial também tem opções de forma e tamanho.

Posso copiar o CSS e usá-lo diretamente?

Sim. A saída mostra uma linha CSS completa (ou classe Tailwind). Clique em Copiar e cole no seu projeto. Os valores são sempre compatíveis com CSS.

Posso usar o gradiente no Tailwind CSS?

Sim. Mude para a aba Tailwind para obter uma classe bg-[...] com valor arbitrário. Adicione-a ao seu elemento HTML.

Posso fazer gradientes semitransparentes com rgba?

Sim. Reduza o alfa de qualquer parada abaixo de 100%; a saída muda automaticamente para rgba() para aquela parada.

Meus dados de cor são enviados a um servidor?

Não. Tudo ocorre completamente no seu navegador. Suas cores e o CSS gerado nunca são enviados ou armazenados.

Gerador de Gradiente CSS — Cônico, Radial e Linear Multicolorido (Grátis)

Tipo de gradiente

Paradas de cor

Posição 0%

Opacidade (alpha) (100%)

Posição 100%

Opacidade (alpha) (100%)

São necessárias pelo menos 2 paradas de cor.

Ângulo (90°)

deg

Presets

Saída CSS

Formato de saída

Formato de cor

background: linear-gradient(90deg, #7C3AED 0%, #3B82F6 100%);

Ferramentas externas relacionadas

Alguns links são links de afiliados.

Adobe Creative CloudSuíte de apps criativos CanvaDesign gráfico fácil

Ferramentas relacionadas

Gerador de Paleta de CoresGere paletas de cores harmônicas a partir de um HEX base com esquemas complementar, análogo, triádico e mais. Trave cores, regenere o resto e exporte para CSS, Tailwind ou JSON.Conversor de CoresConverta qualquer cor entre HEX, RGB, HSL, HSV e RGBA ao mesmo tempo. Edite um valor, copie com um clique, com alfa e contraste WCAG.Extrator de Cores de ImagemExtraia a paleta de cores dominantes de qualquer imagem no seu navegador, sem enviar nada. Obtenha HEX, RGB e porcentagem (%) de cada cor, escolha quantas cores e exporte como CSS/JSON.Ferramenta de combinação de fontesEncontre combinações curadas do Google Fonts para título e corpo, visualize em tempo real e copie o CSS com um clique.

Este gerador de gradiente CSS gratuito permite criar gradientes lineares, radiais e cônicos com quantas paradas de cor quiser. Adicione paradas, ajuste suas posições, escolha cores com o seletor ou digite um código HEX, e veja uma grande pré-visualização atualizar ao instante. Ajuste o ângulo, a forma e o centro, e quando terminar, copie o CSS de background pronto para uso ou um valor arbitrário do Tailwind com um clique. Sem instalação, sem cadastro, tudo no navegador.

Como usar

Escolha um tipo de gradiente: Linear, Radial ou Cônico.
Edite as paradas de cor: use o seletor ou digite um HEX e arraste o controle de posição (0–100%).
Adicione mais paradas com o botão + (até 10). Remova com ×. Sempre ficam pelo menos 2.
Ajuste as configurações do tipo: ângulo (linear), forma/tamanho/centro (radial), ângulo inicial/centro (cônico).
Comece com um preset ou use Aleatório para explorar e depois ajuste.
Copie o CSS de background gerado (ou o valor do Tailwind) com um clique e cole no seu projeto.

Tipos de gradiente

O CSS tem três funções de gradiente, cada uma com um efeito visual diferente. Esta ferramenta suporta todas as três.

Gradiente linear (linear-gradient)

As cores fluem em linha reta no ângulo indicado. 90° vai da esquerda para a direita, 180° de cima para baixo. É o tipo mais comum para fundos hero, botões e divisores decorativos.

Gradiente radial (radial-gradient)

As cores irradiam de um ponto central para fora. Você pode escolher forma circular ou elíptica, tamanho e posição do centro. Ideal para efeitos de foco, brilhos e fundos suaves.

Gradiente cônico (conic-gradient)

As cores giram ao redor de um ponto central. Você pode definir o ângulo inicial e a posição do centro. Perfeitos para rodas de cores e gráficos circulares. Nota: conic-gradient é uma função CSS relativamente nova, navegadores muito antigos podem não suportá-la.

Funcionalidades

Paradas de cor: adicionar, remover e posicionar

Adicione até 10 paradas com o botão + e remova com ×. Sempre ficam pelo menos 2. Arraste o controle de posição (0–100%) para posicionar cada parada exatamente onde quiser. Duas paradas na mesma posição criam um limite nítido (hard stop).

Ângulo, forma e posição do centro

Gradientes lineares têm controle de ângulo (0–360°). Radiais permitem escolher forma, tamanho e centro com controles X/Y. Cônicos adicionam ângulo inicial e posição de centro.

Seletor de cor e entrada HEX com alfa

Cada parada tem um seletor de cor nativo e entrada HEX. Reduza o alfa para paradas semitransparentes; a saída muda automaticamente para rgba(). Cores inválidas mostram erro em linha sem quebrar o gradiente.

Grande pré-visualização ao vivo

O gradiente é exibido em um grande retângulo no topo, atualizando ao instante ao editar qualquer parâmetro. O que você vê é o que o CSS produz.

Copiar CSS ao instante (background, background-image ou Tailwind)

Escolha o formato e clique em Copiar: background: CSS completo, background-image: apenas o valor, ou bg-[...] para Tailwind. Valores sempre em formato CSS compatível.

Presets e geração aleatória

Clique em um preset para aplicá-lo instantaneamente. Use Aleatório para explorar novos gradientes. Ambos servem como ponto de partida criativo.

Casos de uso

Fundos hero, botões e gradientes de cartões

Defina um gradiente linear para um hero ou botão CTA, copie o CSS e cole na sua folha de estilos. Um radial funciona bem para um brilho suave atrás de um cartão.

Colar diretamente no CSS ou Tailwind

Escolha a saída background: e cole na sua regra CSS. Para Tailwind, mude para essa aba e copie a classe bg-[linear-gradient(...)].

Gradiente cônico para rodas de cores e efeitos de gráfico circular

Adicione múltiplas paradas em intervalos iguais em um gradiente cônico para criar uma roda de cores ou fundo estilo gráfico circular.

Notas e dicas

Direção do ângulo: 0° aponta para cima, 90° vai da esquerda para a direita, seguindo a especificação CSS. Use a pré-visualização para confirmar.
Compatibilidade: linear-gradient e radial-gradient são suportados por todos os navegadores modernos. conic-gradient é mais novo e pode não funcionar em navegadores muito antigos.
Sem posição explícita: se uma parada não tiver posição, o navegador a distribui uniformemente.
Gradientes semitransparentes: reduza o alfa para obter rgba() e criar efeitos de sobreposição.
Seus dados de cor nunca são enviados a um servidor; tudo ocorre localmente no seu navegador.

Perguntas frequentes

Posso criar gradientes radiais e cônicos, não apenas lineares?: Sim. Mude entre Linear, Radial e Cônico no seletor de tipo. Cada um mostra sua configuração específica: ângulo para linear, forma/tamanho/centro para radial, ângulo inicial/centro para cônico.
Posso adicionar mais de duas paradas de cor?: Sim. O botão + adiciona paradas (até 10) com seletor de cor, entrada HEX e controle de posição. O botão × remove; sempre ficam pelo menos 2.
Posso alterar o ângulo e a posição do centro?: Sim. O controle de ângulo ajusta a direção do gradiente linear (0–360°). Os controles X/Y definem o centro para radiais e cônicos. O radial também tem opções de forma e tamanho.
Posso copiar o CSS e usá-lo diretamente?: Sim. A saída mostra uma linha CSS completa (ou classe Tailwind). Clique em Copiar e cole no seu projeto. Os valores são sempre compatíveis com CSS.
Posso usar o gradiente no Tailwind CSS?: Sim. Mude para a aba Tailwind para obter uma classe bg-[...] com valor arbitrário. Adicione-a ao seu elemento HTML.
Posso fazer gradientes semitransparentes com rgba?: Sim. Reduza o alfa de qualquer parada abaixo de 100%; a saída muda automaticamente para rgba() para aquela parada.
Meus dados de cor são enviados a um servidor?: Não. Tudo ocorre completamente no seu navegador. Suas cores e o CSS gerado nunca são enviados ou armazenados.