Gerador de gradiente CSS

Sobre os gradientes CSS

Os gradientes CSS permitem exibir transições suaves entre duas ou mais cores, sem usar imagens. São gerados pelo navegador, o que significa que se adaptam perfeitamente a qualquer resolução e não adicionam peso ao carregamento da página. Os gradientes são definidos pela propriedade background com as funções linear-gradient() ou radial-gradient().

Uma breve história dos gradientes CSS

Os gradientes CSS são definidos no CSS Image Values and Replaced Content Module Level 3, mantido pelo W3C CSS Working Group e editado por Tab Atkins Jr. e Elika J. Etemad, entre outros. O First Public Working Draft foi em 12 de julho de 2011; a spec atingiu Candidate Recommendation em 17 de abril de 2012, fixando a sintaxe moderna sem prefixo, incluindo a convenção de que 0deg aponta para cima e to right equivale a 90deg. Ordem de envio dos navegadores: WebKit primeiro de longe, com -webkit-gradient() utilizável no Safari 4 (2009) numa sintaxe pesada em chamadas de função. Firefox enviou -moz-linear-gradient() no Firefox 3.6 em 21 de janeiro de 2010; Internet Explorer 10 enviou as formas sem prefixo em 2012; a sintaxe sem prefixo estabilizou em todos os motores principais no final de 2013. conic-gradient() foi especificado mais tarde em CSS Images Level 4, Lea Verou rascunhou a proposta em 2011, Tab Atkins a adicionou à spec em 2012, e o envio nativo chegou em Chrome 69 (4 de setembro de 2018), Safari 12.1 (25 de março de 2019) e Firefox 83 (17 de novembro de 2020). Em 2026 você pode escrever background: linear-gradient(...) e background: radial-gradient(...) com confiança, sem prefixos e sem fallbacks, para qualquer navegador que valha a pena suportar.

linear-gradient: ângulos, lados e a sutileza diagonal

A gramática formal é linear-gradient([<angle> | to <side-or-corner>], <color-stop>, ...). A convenção de ângulos frequentemente tropeça desenvolvedores porque difere da convenção SVG/canvas. 0deg equivale a to top, a linha do gradiente aponta para cima, então a última cor aparece no topo. 90deg equivale a to right. 180deg equivale a to bottom (o padrão se nenhuma direção for dada). 270deg equivale a to left. 135deg é a diagonal canônica, do canto superior esquerdo ao inferior direito, a direção de gradiente mais comum no design web moderno. Ângulos crescentes giram em sentido horário a partir do topo, oposto à convenção matemática (onde 0 está à direita e os ângulos crescem em anti-horário) e oposto ao <linearGradient> do SVG. Uma sutileza útil: to right e 90deg são equivalentes apenas em caixas quadradas. Em uma caixa não-quadrada, to top right produz uma linha de gradiente exatamente perpendicular à diagonal a partir do canto inferior esquerdo, o que significa que o gradiente atinge o canto limpamente, enquanto 45deg é sempre literalmente 45 graus independentemente da razão de aspecto. Para a maioria dos fundos de hero essa distinção não importa; para designs precisamente alinhados pode importar.

radial-gradient: formas, tamanhos e posição

A gramática é radial-gradient([<shape> || <size>] [at <position>]?, <color-stop>, ...). Dois valores de forma: circle (círculo perfeito escalado para a caixa) e ellipse (padrão, esticada para a razão de aspecto da caixa). O tamanho pode ser uma de quatro palavras-chave de extensão ou comprimentos/porcentagens explícitos. closest-side: a forma final toca o lado mais próximo. closest-corner: a forma final passa exatamente pelo canto mais próximo. farthest-side: a forma final toca o lado mais distante. farthest-corner (o padrão): a forma final passa pelo canto mais distante. A cláusula at <position> move o centro, at top left, at 30% 70%, etc. O centro padrão é at center center. Gradientes radiais são como você faz efeitos de holofote, brilhos suaves, fundos «vinheta» onde as bordas escurecem em direção ao preto, e fundos de selo circulares. São consideravelmente menos comuns que gradientes lineares em uso de produção em 2026, a maioria dos fundos «gradiente» que você vê em landing pages são lineares, mas são indispensáveis para os casos em que o linear não alcança.

Color stops, o coração de um gradiente

Um color stop é um valor de cor com uma posição opcional ao longo da linha do gradiente. linear-gradient(red, blue) coloca vermelho em 0% e azul em 100%, com uma interpolação suave entre eles. linear-gradient(red 0%, yellow 50%, blue 100%) adiciona um stop amarelo no meio. Stops com posições explícitas podem ser colocados em qualquer lugar de 0% a 100%, e stops sem posições explícitas são distribuídos uniformemente entre seus vizinhos com posição explícita. Hard color stops, dois stops na mesma posição, como linear-gradient(red 50%, blue 50%), produzem uma transição instantânea em vez de uma mistura suave. Esse é o truque por trás de cada padrão CSS: listras, tabuleiros de xadrez, pontos, todos construídos a partir de pilhas de gradientes com hard stops. Color interpolation hints (CSS Images Level 4): inserir uma porcentagem solta entre dois stops enviesa onde o ponto médio da interpolação cai. linear-gradient(red, 25%, blue) desloca o ponto médio perceptual para 25% em vez dos 50% padrão, útil para ponderar sutilmente uma cor sobre a outra. Interpolação moderna em espaço de cor (CSS Color Module 4, baseline 2023+): linear-gradient(in oklch, red, blue) interpola no espaço de cor perceptualmente uniforme Oklab em vez de sRGB com codificação gama, produzindo transições mais suaves no meio sem a «zona morta» cinzenta turva que a interpolação sRGB produz entre cores complementares de alta croma. O padrão ainda é in oklab (ou in srgb em navegadores mais antigos), para gradientes feitos à mão você pode optar.

Espaços de cor modernos, por que os gradientes oklch ficam melhores

Por duas décadas, cada gradiente CSS interpolou valores de cor em sRGB, o espaço de cor com codificação gama com o qual a web cresceu. A interpolação sRGB tem um modo de falha bem conhecido: gradientes entre cores complementares de alta croma (vermelho ↔ verde, azul ↔ amarelo, magenta ↔ ciano) passam por um ponto médio cinzento turvo. Tente linear-gradient(red, green) em sRGB e o meio é marrom, não o verde-oliva vivo que seus olhos esperam. Oklab (Björn Ottosson, dezembro de 2020) é um espaço de cor perceptualmente uniforme projetado especificamente para corrigir isso. OKLCH é a forma cilíndrica do Oklab, as três coordenadas são Lightness (0-100%), Chroma (0+) e Hue (0-360°). Gradientes em OKLCH ficam perceptualmente suaves em toda a transição, com o brilho rampando uniformemente e o matiz rotacionando previsivelmente pela roda de cores. A especificação CSS Color Module 4 adicionou <color-interpolation-method> como parâmetro das funções de gradiente: linear-gradient(in oklch, red, blue). O suporte dos navegadores atingiu baseline no meio para o final de 2023 (Safari 16.4 março de 2023, Chrome 111 março de 2023, Firefox 113 maio de 2023). Para gradientes usados em sistemas de design em produção, a opção OKLCH é cada vez mais a escolha certa; este gerador atualmente emite gradientes com sRGB padrão e o toggle OKLCH está no roadmap.

Performance, gradientes são baratos mas não grátis

Gradientes CSS são acelerados por GPU em todo navegador moderno, o que os torna dramaticamente mais rápidos que imagens bitmap em mosaico na maioria dos casos de uso, sem requisição HTTP, sem decodificação, independentes de resolução vetorial, instantaneamente recoloríveis através de variáveis CSS. Os compromissos a conhecer: o custo de paint escala com os pixels tocados e a complexidade do gradiente; gradientes estão entre as coisas mais caras que um navegador pode pintar, e empilhar muitas camadas de gradiente em um hero de viewport completo pode custar frames em GPUs de gama baixa. Animar cores de gradiente dispara um repaint completo a cada frame, muito mais caro do que animar transform ou opacity. O fix moderno é usar propriedades customizadas registradas com @property (Houdini Properties and Values API), que deixa o navegador interpolar valores de cor na thread compositora em vez da thread principal; suportado no Chrome 78+ (nov 2019), Safari 16.4+ (mar 2023), Firefox 128+ (jul 2024). A alternativa tradicional mais barata é animar background-position em um gradiente fixo, uma verdadeira animação só-compositor que roda a 60fps em todo lugar. A heurística geral de performance: se sua página tem um único gradiente estático, você nunca vai notar; se está empilhando cinco camadas de gradientes animados em cada cartão de uma lista longa, perfile antes de enviar.

Onde os gradientes ganham seu lugar

• Fundos de seção hero. Gradientes suaves com cores de marca atrás do título da página, frequentemente com overlays radiais sutis para profundidade atmosférica. Stripe, Linear e a maioria das landing pages SaaS modernas se apoiam nisso.
• Estilização de botões. Gradientes sutis em botões CTA primários adicionam profundidade tátil que cores sólidas planas não têm. Adicione um gradiente de estado hover ligeiramente mais escuro e o botão parece vivo.
• Overlays de imagem para legibilidade de texto. Um linear-gradient vertical desvanecendo de transparente no topo para escuro embaixo, sobreposto a uma imagem hero com texto branco na zona escura, torna o texto legível independentemente de como a foto se parece.
• Fundos de cartões. Gradientes sutis em fundos de cartões adicionam profundidade sem box-shadow pesada.
• Esqueletos de carregamento e indicadores de progresso. O esqueleto shimmer clássico é um gradiente linear com branco semi-transparente movendo-se através de um fundo cinza, animado via background-position.
• Glassmorphism e estilização UI moderna. O efeito vidro fosco popularizado pelo macOS Big Sur e iOS, um fundo semi-transparente com backdrop-filter blur, frequentemente sobreposto com um gradiente sutil para o efeito de destaque.
• Parecidos com mesh-gradients. Mesh gradients CSS reais ainda não são padrão (CSS Images Level 5 eventualmente os adicionará), mas empilhar 3-5 grandes gradientes radiais com cores semi-transparentes produz um efeito de mesh-gradient convincente hoje.

Escopo honesto: o que este gerador faz e não faz

Esta ferramenta gera gradientes CSS lineares e radiais com pré-visualização ao vivo, ângulo configurável (para linear) ou posição (para radial), e qualquer número de color stops com posições. Emite a sintaxe moderna sem prefixo. O que esta ferramenta não faz atualmente, e que geradores mais elaborados lidam: gradientes cônicos (a variedade rotativa-em-torno-de-um-centro, usada para gráficos de pizza, sois e rodas de cores), ver o CSS Pattern Generator do Absolutool para alguns exemplos de padrões cônicos; gradientes repetitivos (repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient) para listras e preenchimentos estilo padrão, também tratado no CSS Pattern Generator; toggle de interpolação OKLCH / Oklab (o espaço de cor perceptualmente uniforme moderno), atualmente emite sRGB padrão; sintaxe color hint para enviesar o ponto médio entre stops; keyframes de animação multi-stop. Para a maioria dos gradientes de produção (fundos de hero, estilos de botão, efeitos de overlay), linear + radial cobre o caso de uso; para os casos mais exóticos, o CSS Pattern Generator é a ferramenta complementar certa.

Perguntas frequentes

Os gradientes CSS são suportados em todos os navegadores ?

Sim. Os gradientes CSS são suportados em todos os grandes navegadores desde 2013, com mais de 98 % de cobertura mundial. Você não precisa mais de prefixos de fornecedor como -webkit- para uso moderno.

Qual ângulo usar para um gradiente diagonal ?

135 graus cria uma diagonal do topo-esquerdo para o inferior-direito, a mais comum. 45 graus parte do inferior-esquerdo para o topo-direito. 90 graus vai da esquerda para a direita, e 180 graus do topo à base.

Posso usar mais de duas cores ?

Com certeza. Clique em « Adicionar parada » para adicionar até 8 paradas de cor. Você pode controlar cada cor e sua posição ao longo do gradiente. Os gradientes com várias paradas criam efeitos visuais mais ricos e dinâmicos.

Por que não há opção de gradiente cônico?

Gradientes cônicos (a variedade rotativa-em-torno-de-um-centro, usada para gráficos de pizza, sois e rodas de cores) são um problema de design diferente de gradientes lineares e radiais, os parâmetros são ângulos ao redor de um centro em vez de posições ao longo de uma linha. Para exemplos e padrões de gradiente cônico, use o CSS Pattern Generator do Absolutool, que lida com os casos mais exóticos (cônico, repeating-linear, repeating-conic) para preenchimentos estilo padrão. Este gerador foca nos casos linear+radial que cobrem a maior parte dos gradientes hero-e-botão de produção.

Os gradientes CSS são mais rápidos que fundos de imagem?

Na maioria dos casos, sim, um gradiente CSS elimina uma requisição HTTP, uma passada de decodificação e o envio de assets multi-resolução exigido para telas retina. O gradiente também é perfeito em vetor em qualquer zoom e trivialmente recolorível via variáveis CSS. Compromissos: gradientes são pintados em GPU, mas o custo de paint escala com a área em pixels e a complexidade dos stops; empilhar muitas camadas de gradiente em um hero de viewport completo pode custar frames em GPUs de gama baixa. Para animação, anime background-position (só-compositor, barato) em vez dos color stops do gradiente (repaint completo, caro). Gradientes estáticos únicos em cartões ou seções hero, nunca perceptível.

Meus dados são enviados a algum lugar?

Não. A geração roda inteiramente no seu navegador, seletores de cor, slider de ângulo e geração de código CSS todos rodam localmente. Não há requisições saindo quando você usa os controles. O CSS gerado é seu para colar onde quiser.

Ferramentas relacionadas