Os gradientes passaram de brega a elegante e de volta tantas vezes que os designers ficaram receosos com eles. Mas um bom gradiente é uma das formas mais baratas de fazer uma interface plana parecer ter profundidade e luz. O problema é que a maioria dos gradientes falha exatamente em um lugar — o meio — e essa falha é tão comum que ensinou uma geração de designers a evitar a ferramenta inteiramente. Uma vez que você entende por que o ponto médio fica turvo, você pode consertá-lo deliberadamente, e os gradientes se tornam uma parte confiável do kit em vez de uma aposta. Aqui está o modelo mental e as jogadas que eu realmente uso.
Um gradiente é um caminho, não um par
O erro escondido dentro de cada gradiente turvo é pensar nele como duas cores. Não é. É um caminho entre duas cores, e a pergunta que decide se ele fica bom é: que rota a mescla toma para ir de A a B?
Quando você escreve um gradiente CSS simples como linear-gradient(#3B82F6, #F59E0B) — um azul para um âmbar — o navegador, por padrão, interpola em sRGB caminhando em linha reta através do espaço de cor. Imagine a roda de cores vista de cima. O azul fica de um lado, o âmbar aproximadamente oposto. A linha reta entre eles não segue a borda colorida; ela corta diretamente através do centro cinza dessaturado. Então o ponto médio desse gradiente é um tom acinzentado triste e desbotado. Essa é a turvação. Não é um bug de renderização — é geometria. O caminho mais curto entre dois matizes opostos passa pelo cinza.
Essa única percepção reformula tudo. Se a turvação vem do caminho, então consertá-la significa controlar o caminho. Há três alavancas principais: escolher cores cujo caminho reto já seja bom, redirecionar o caminho com uma parada intermediária, ou mudar o espaço de cor para que o caminho padrão curve ao redor da roda em vez de atravessá-la.
Alavanca um: escolha cores que sejam gentis umas com as outras
O gradiente limpo mais fácil é entre duas cores que estão próximas em matiz — um par análogo. Mescle #3B82F6 (azul) com #6366F1 (índigo) e o caminho em linha reta mal sai da vizinhança azul-violeta, então não há zona cinza na qual cair. O resultado é suave e rico automaticamente.
É por isso que tantos gradientes com aparência premium são sutis: azul para roxo, turquesa para verde, magenta para vermelho-laranja. São análogos, frequentemente dentro de 30–60 graus de matiz, e variam mais a luminosidade do que o matiz. Um gradiente que muda principalmente a luminosidade enquanto mantém o matiz quase constante é quase impossível de tornar turvo. Se você quer um ponto de partida seguro, construa primeiro um conjunto monocromático ou análogo e depois mescle dentro dele.
O corolário: gradientes complementares (cores a 180 graus de distância) são os mais difíceis de manter limpos, precisamente porque seu caminho reto passa direto pelo centro. Eles podem ser feitos — mas precisam de uma das próximas duas alavancas.
Alavanca dois: adicione uma parada para direcionar o caminho
Quando você genuinamente quer duas cores distantes — um azul e um laranja quente, digamos, porque ambas são cores de marca — não deixe o navegador escolher o ponto médio. Escolha-o você mesmo com uma terceira parada.
Em vez de linear-gradient(#3B82F6, #F59E0B), tente rotear através de um matiz que faça a ponte entre eles: linear-gradient(#3B82F6, #C084FC, #F59E0B). Essa parada do meio violeta puxa o caminho ao redor da roda através do roxo e do rosa em vez de pelo cinza. Agora a transição permanece saturada o tempo todo. Você desenhou manualmente a rota colorida que a linha reta se recusou a tomar.
Escolher a cor de ponte é a parte do ofício. Pergunte para que lado da roda você quer viajar — azul para âmbar pode ir através do roxo/magenta (a rota quente) ou através do verde/turquesa (a rota fria), e elas parecem completamente diferentes. A rota quente parece pôr do sol; a rota fria parece tropical. Escolha intencionalmente. Você pode testar cores de ponte rapidamente gerando uma paleta no gerador de paleta de cores e colocando matizes candidatos entre suas extremidades.
Mantenha em uma, talvez duas, paradas intermediárias. Cada parada extra é mais um lugar onde o gradiente pode desenvolver uma costura ou faixa visível. Mais paradas não é mais luxo — a contenção é que se lê como luxo.
Alavanca três: interpole em um espaço de cor melhor
A solução moderna, e cada vez mais o meu padrão, é mudar o espaço onde a mescla acontece. O CSS agora permite especificar o espaço de cor de interpolação diretamente: linear-gradient(in oklch, #3B82F6, #F59E0B).
O OKLCH (e seu primo LCH) é perceptualmente uniforme — passos numéricos iguais parecem passos visuais iguais ao seu olho — e, crucialmente, quando você pede para ele interpolar matiz, ele viaja ao redor da roda de matiz em vez de atravessar o meio cartesiano. O efeito prático é que o mesmo gradiente de duas cores azul-para-âmbar para de mergulhar no cinza e, em vez disso, varre através de matizes intermediários vívidos automaticamente, sem parada manual necessária. A documentação do MDN sobre interpolação de cor de gradiente cobre a sintaxe e as opções shorter hue / longer hue, que permitem controlar em qual direção ao redor da roda a mescla vai.
Algumas ressalvas honestas. O suporte do navegador para in oklch é bom nos navegadores atuais, mas não universal, então forneça um fallback sRGB padrão (background: linear-gradient(#3B82F6, #F59E0B); antes da linha OKLCH). E o OKLCH pode ocasionalmente produzir um ponto médio vívido demais para fundos sutis — para um banner principal de leve presença, sRGB simples entre cores próximas ainda é adequado. Recorra ao OKLCH quando as extremidades estiverem muito distantes e você quiser que elas permaneçam saturadas.
Ângulos, tipos e onde os gradientes pertencem
O caminho é a parte difícil; o resto é gosto, mas há convenções que vale a pena conhecer.
- Linear, de cima para baixo (`180deg`) imita a luz vinda de cima e parece natural em botões e cards. Um botão indo de
#4F8EF7até#3B6FD4parece gentilmente iluminado e tridimensional. - Diagonal (`135deg`) adiciona direção e energia — o padrão para grandes fundos principais porque parece dinâmico sem ser barulhento.
- Gradientes radiais colocam um brilho suave em um ponto; encantadores para destacar um elemento focal ou fingir luz ambiente atrás de um card.
- Gradientes cônicos varrem o matiz ao redor de um centro e são principalmente para gráficos, carregadores e rodas de seletor de cor, em vez de fundos.
Para profundidade, mantenha as duas cores próximas em luminosidade e matiz — um gradiente sutil (#1E293B para #0F172A) numa superfície escura adiciona uma riqueza que nenhum preenchimento plano consegue. Para impacto, deixe o gradiente ser o protagonista e dê-lhe espaço.
Não esqueça do texto
Gradientes e texto têm uma relação complicada. O contraste tem que se manter ao longo de toda a extensão do gradiente, não apenas onde você por acaso colocou o título. Um título que passa no contraste WCAG sobre o topo claro de um gradiente pode silenciosamente falhar sobre o fundo mais escuro. Teste o ponto de pior caso, apoie-se nas razões de contraste WCAG (4,5:1 para texto de corpo, segundo a orientação do W3C), e na dúvida coloque uma sobreposição sólida semitransparente atrás do texto para que seu fundo seja previsível. Ou simplesmente mantenha os gradientes em zonas decorativas e coloque o texto em preenchimentos sólidos.
A versão curta
Pare de pensar num gradiente como duas cores e comece a pensar nele como a linha entre elas. Meios turvos vêm de um caminho reto através do cinza; você os conserta escolhendo cores mais gentis, direcionando com uma parada intermediária, ou interpolando em OKLCH para que o caminho curve ao redor da borda. Domine isso e os gradientes deixam de ser um risco e se tornam uma das formas mais eficientes de adicionar luz, profundidade e personalidade a um trabalho plano. Puxe duas cores do gerador de paleta de cores, coloque-as em um linear-gradient(in oklch, …), e observe uma mescla que teria ficado cinza permanecer viva por todo o caminho.
Perguntas Frequentes
Por que o meio do meu gradiente parece cinza ou turvo?
Quando você mescla duas cores no espaço sRGB padrão, a interpolação corta em linha reta através da roda de cores, em vez de contorná-la. Se suas duas cores estão muito distantes em matiz — digamos um azul e um amarelo — essa linha reta passa pelo centro cinza de baixa saturação, então o ponto médio dessatura e parece turvo. A solução é escolher cores mais próximas em matiz, adicionar uma parada de cor intermediária para rotear a mescla ao redor da roda, ou usar um espaço de cor e um método de interpolação de matiz que viaje ao redor da borda em vez de pelo meio.
Qual espaço de cor devo usar para gradientes CSS?
Para a maioria dos trabalhos modernos, interpolar em OKLCH ou LCH produz gradientes visivelmente mais suaves e uniformes do que o sRGB padrão, porque esses espaços são perceptualmente uniformes — passos numéricos iguais parecem passos visuais iguais. Você opta com uma sintaxe como 'linear-gradient(in oklch, #3B82F6, #F59E0B)'. O sRGB padrão é adequado para mesclas entre cores próximas e semelhantes, mas para gradientes vívidos de duas cores o OKLCH evita o ponto médio opaco e as zonas mortas. Sempre verifique o suporte do navegador e forneça um fallback padrão para navegadores mais antigos.
Quantas paradas de cor um gradiente deve ter?
Duas paradas são suficientes para uma mescla simples e sutil, e é onde vivem a maioria dos gradientes de UI limpos. Adicione uma terceira parada intermediária quando suas duas extremidades estiverem muito distantes em matiz e o ponto médio automático parecer errado — a parada do meio permite direcionar o caminho através de uma cor lisonjeira em vez de pelo cinza. Além de três ou quatro paradas, você geralmente cria faixas e ruído visual em vez de riqueza. Para fundos, menos paradas com uma transição suave quase sempre parecem mais premium do que um arco-íris carregado.
Qual ângulo um gradiente linear deve ter?
Não há um único ângulo correto, mas algumas convenções parecem polidas: um gradiente de cima para baixo (180deg) parece iluminação natural vinda de cima, enquanto uma diagonal em torno de 135deg adiciona uma sensação de direção e energia sem ser caótica. Gradientes verticais sutis funcionam bem para botões e cards porque imitam como a luz cai. Ângulos íngremes ou incomuns chamam a atenção para o próprio gradiente, o que você quer apenas quando o gradiente é o elemento principal em vez de um fundo discreto.
Os gradientes são um problema de acessibilidade para o texto?
Podem ser, porque o contraste do texto precisa se manter em toda a área que o texto cobre, não apenas em um ponto. Um título sobre um gradiente que vai de claro para escuro pode passar no contraste no topo e falhar embaixo. As abordagens seguras são manter o texto apenas na região do gradiente onde o contraste fica acima do limite WCAG, adicionar uma sobreposição sólida ou semitransparente atrás do texto, ou limitar os gradientes a áreas decorativas sem texto. Sempre teste o ponto de pior caso do gradiente, não a média.
Quer experimentar com cores?
Experimente o nosso gerador de paletas de cores gratuito para encontrar a harmonia perfeita — com um verificador de contraste WCAG integrado.
Abrir o Gerador