Gerador de Gradientes de Cor
Crie gradientes CSS lineares, radiais e cônicos visualmente - na hora e de graça. Adicione até 10 paradas de cor, defina posições exatas, escolha direção e ângulo, e obtenha CSS pronto para produção com um clique. Seis predefinições incluídas para começar. Totalmente privado, sem cadastro.
Presets
Gradient Type
Direction
Color Stops (2)
Click the colour swatch to open the colour picker. Drag the slider to adjust position.
background: linear-gradient(to right, #6366f1 0%, #ec4899 100%);
Por que usar nosso gerador de gradientes de cor?
- Pré-visualização ao vivo e CSS instantâneo: o gerador de gradientes de cor atualiza a pré-visualização ao vivo e a saída CSS a cada alteração - sem botão para pressionar. Veja seu gradiente exatamente como aparecerá no navegador e copie o CSS com um clique.
- Três tipos de gradiente e controle total: crie gradientes lineares, radiais e cônicos com controle total sobre direção, ângulo, forma, tamanho e posição central. Adicione até 10 paradas de cor, defina posições exatas e ative o modo repetido para padrões em mosaico.
- 100% privado - sem upload: toda a geração de gradientes acontece localmente no seu navegador. Suas escolhas de cor nunca saem do seu dispositivo e nunca são enviadas a servidores - seguro para projetos de clientes e design systems proprietários.
- Grátis e sem limites: gere gradientes ilimitados sem cadastro, sem assinatura e sem limites de uso. O gerador de gradientes de cor é totalmente grátis para sempre e sem anúncios bloqueando a interface.
Casos de uso comuns do gerador de gradientes de cor
- Fundos de sites e seções hero: designers web usam o gerador de gradientes de cor para criar fundos chamativos de seção hero, gradientes de página e divisores de seção. Copie o CSS diretamente para a sua folha de estilos com um clique.
- Desenvolvimento de CSS e Tailwind: desenvolvedores frontend usam o gerador para criar e testar o CSS de gradiente antes de adicioná-lo ao seu código. A saída é CSS pronto para produção que funciona em todos os navegadores modernos.
- Tokens de design system: equipes de design system usam o gerador para definir tokens de gradiente para fundos, cartões e componentes de interface. O construtor visual facilita alinhar os gradientes às cores da marca.
- Gráficos de redes sociais e marketing: profissionais de marketing e criadores de conteúdo usam o gerador para criar fundos com gradiente para posts em redes sociais, banners e cabeçalhos de e-mail. A biblioteca de predefinições oferece pontos de partida instantâneos.
- Estilo de botões e cartões: desenvolvedores de UI usam o gerador para criar preenchimentos com gradiente para botões, cartões, badges e barras de progresso. Gradientes radiais e cônicos adicionam profundidade e interesse visual aos componentes de interface.
- Design de landing pages e CTA: otimizadores de conversão usam o gerador para criar CTAs e fundos de seção com gradientes de alto contraste que atraem a atenção e guiam o usuário pela página.
O que é um gradiente CSS?
Um gradiente CSS é uma transição suave entre duas ou mais cores definida inteiramente em CSS - sem necessidade de arquivo de imagem. Os gradientes são criados com a propriedade background ou background-image e funções de gradiente. Nosso gerador de gradientes de cor monta a string CSS do gradiente visualmente e produz CSS pronto para produção que funciona em todos os navegadores modernos, sem prefixos de fornecedor.
Como funciona nosso gerador de gradientes de cor
- Escolha um tipo de gradiente: selecione Linear (transição em linha reta), Radial (circular ou elíptica a partir de um ponto central) ou Cônico (girando ao redor de um ponto central). Use uma predefinição para começar na hora.
- Configure as paradas de cor e as opções: adicione até 10 paradas de cor usando o seletor de cor ou a entrada hexadecimal. Arraste o controle de posição para colocar cada parada com precisão. Defina direção, ângulo, forma, tamanho e posição central do seu tipo de gradiente. Todas as alterações atualizam a pré-visualização na hora.
- Copie o CSS: clique em "Copiar CSS" para copiar a declaração background: pronta para produção para a área de transferência. Cole diretamente na sua folha de estilos.
Os três tipos de gradiente CSS
- Gradiente linear: faz a transição das cores ao longo de uma linha reta. Controle a direção com palavras-chave predefinidas (to right, to bottom, etc.) ou um ângulo personalizado em graus. Use repeating-linear-gradient para padrões de listras.
- Gradiente radial: faz a transição das cores para fora de um ponto central em forma circular ou elíptica. Controle a forma (circle ou ellipse), o tamanho (farthest-corner, closest-side, etc.) e a posição central.
- Gradiente cônico: faz a transição das cores girando ao redor de um ponto central - como uma roda de cores ou gráfico de pizza. Controle o ângulo inicial e a posição central. Ideal para gráficos de pizza, rodas de cores e designs angulares.
Posições das paradas de cor
Cada parada de cor tem uma posição (0%-100%) que determina onde aquela cor aparece no gradiente. Se duas paradas tiverem a mesma posição, o gradiente cria um limite rígido em vez de uma transição suave - útil para efeitos de listras. O gerador de gradientes de cor ordena as paradas por posição automaticamente, então você pode adicioná-las em qualquer ordem.
Perguntas frequentes
Um gerador de gradientes de cor é uma ferramenta visual que monta código CSS de gradiente a partir de paradas de cor configuráveis, do tipo de gradiente e das configurações de direção. Nosso gerador aceita gradientes lineares, radiais e cônicos com até 10 paradas de cor e produz CSS pronto para produção. Toda a geração roda inteiramente no seu navegador sem enviar dados a servidores.
Gradientes lineares fazem a transição das cores ao longo de uma linha reta em uma direção ou ângulo definidos. Gradientes radiais fazem a transição das cores para fora de um ponto central em forma circular ou elíptica. Gradientes cônicos fazem a transição das cores girando ao redor de um ponto central - como uma roda de cores. Cada tipo tem casos de uso e efeitos visuais diferentes.
Sim. Toda a geração de gradientes acontece 100% no lado do cliente, no seu navegador, usando JavaScript. Suas escolhas de cor nunca são enviadas a servidores, nunca são armazenadas e nunca são transmitidas a lugar algum. O gerador de gradientes de cor é totalmente privado e seguro para projetos de clientes.
Sim. O gerador de gradientes de cor é 100% grátis, sem cadastro, sem recursos premium e sem limites de uso. Gere gradientes ilimitados sem restrições nem custos ocultos.
A opção de repetição troca a função do gradiente por repeating-linear-gradient, repeating-radial-gradient ou repeating-conic-gradient. Isso repete o padrão do gradiente por todo o elemento, criando efeitos de listras ou padrões. O tamanho do padrão é determinado pelas posições das suas paradas de cor.
Para criar um limite rígido entre duas cores, coloque duas paradas de cor adjacentes na mesma posição. Por exemplo, se a parada A está em 50% e a parada B também em 50%, o gradiente mudará abruptamente da cor A para a cor B nesse ponto, sem nenhuma mistura.
Sim. Copie o valor do gradiente e use-o em uma classe de valor arbitrário do Tailwind: bg-[linear-gradient(to_right,#6366f1,#ec4899)]. Substitua os espaços por underscores nos valores arbitrários do Tailwind. Como alternativa, adicione o gradiente ao seu tailwind.config.js em theme.extend.backgroundImage.
O gerador de gradientes de cor aceita até 10 paradas de cor por gradiente. O próprio CSS não tem limite rígido de paradas, mas gradientes com mais de 10 raramente são necessários na prática. Você pode remover paradas até um mínimo de 2.
Sim. Gradientes lineares e radiais são suportados em todos os navegadores modernos sem prefixos de fornecedor. Gradientes cônicos são suportados no Chrome 69+, Firefox 83+, Safari 12.1+ e Edge 79+. Para navegadores mais antigos, considere oferecer uma cor sólida de fallback antes da declaração do gradiente.