Breve história dos gradientes no design

A história dos gradientes no design é a história da tecnologia a alcançar a pintura. Os artistas misturaram cor durante séculos; a impressão aprendeu a imitá-la com pontos e tinta dividida; os primeiros ecrãs mal a mostravam; as interfaces brilhantes dos anos 2000 abusaram dela; o design plano eliminou-a; e a meio da década de 2010 voltou e nunca mais saiu. Os gradientes de cada época têm o aspeto que têm por causa das ferramentas do momento.

Esta é uma história breve e prática, com o visual de cada época como gradiente que podes copiar. Para o essencial, vê o que é um gradiente e os tipos de gradientes.

Gradientes antes dos ecrãs: pintura e impressão

Os pintores misturavam cor muito antes de alguém lhe chamar gradiente. Os artistas do Renascimento usavam o sfumato, transições suaves de tom sem contornos duros, uma técnica famosamente associada a Leonardo da Vinci. Os paisagistas usavam a perspetiva atmosférica: as colinas distantes esbatem-se numa neblina pálida e azulada e o céu clareia em direção ao horizonte, que é o gradiente mais antigo que a maioria de nós conhece.

A ciência deu ordem às misturas de cor. As experiências de Isaac Newton com o prisma espalharam a luz branca num espetro contínuo, e a sua Opticks (1704) dispôs as cores num círculo, o antepassado de toda a roda de cores.

A impressão tinha de imitar o tom contínuo. As tramas de meios-tons, desenvolvidas no fim do século XIX, transformavam tons em pontos de tamanhos diferentes. Os impressores também usavam o tinteiro dividido: duas ou mais tintas carregadas lado a lado numa só prensa, misturando-se nos rolos, uma técnica ainda apreciada na serigrafia e na tipografia. O aerógrafo deu aos ilustradores misturas suaves feitas à mão e moldou grande parte dos cartazes e capas de discos dos anos 1970 e 1980.

Os primeiros ecrãs: faixas, pontilhado e imagens em mosaico

Os primeiros ecrãs de computador só conseguiam mostrar um conjunto limitado de cores de cada vez, e as paletas de 256 cores comuns no início dos anos 1990 não conseguiam guardar uma mistura suave. Os gradientes partiam-se em riscas visíveis, chamadas banding, ou eram pontilhados em padrões de pontos que o olho fazia média até formar uma mistura. As mesmas riscas ainda aparecem quando um gradiente é longo e subtil; vê banding em gradientes.

A web dos inícios não tinha função de gradiente nenhuma. Os designers faziam uma imagem de gradiente com um píxel de largura e diziam ao navegador para a repetir pela página. O SVG, uma Recomendação do W3C de 2001, incluía gradientes lineares e radiais, mas os gradientes CSS vieram depois: o WebKit introduziu uma sintaxe com prefixo no final da década de 2000, a versão padrão foi escrita no CSS Images Level 3, e no início da década de 2010 todos os navegadores principais conseguiam desenhar um gradiente sem imagem.

/* Early 2000s: a 1px-wide image, repeated across */
.header { background: #2b7ae0 url(header-bg.png) repeat-x; }

/* 2010s: the browser draws the gradient */
.header { background: linear-gradient(180deg, #6fb4f5, #2b7ae0); }

/* Now: the same blend, interpolated in OKLCH */
.header { background: linear-gradient(180deg in oklch, #6fb4f5, #2b7ae0); }

Os anos 2000 brilhantes: Aqua, Luna e Web 2.0

A Apple apresentou a interface Aqua do Mac OS X em 2000: botões translúcidos e brilhantes que pareciam gotas de gel colorido, com um realce vivo na parte de cima. O Windows XP seguiu-se em 2001 com o tema Luna, barras de título azuis com sombreado em gradiente e um botão Iniciar verde. A meio da década, botões brilhantes, logótipos refletidos e sombras suaves eram tão comuns nos sites que o visual passou a ser sinónimo de Web 2.0.

O vidro Aero do Windows Vista, em 2007, foi mais longe na translucidez. O problema foi a repetição: quando todos os botões, emblemas e logótipos levavam o mesmo realce, o brilho deixou de sinalizar qualidade e passou a sinalizar um modelo. O guia sobre a estética Y2K trata do visual mais amplo desses anos.

A viragem para o design plano: Metro e iOS 7

A linguagem de design Metro da Microsoft, primeiro no Windows Phone e depois em todo o Windows 8, em 2012, usava mosaicos de cor sólida, tipografia simples e nenhum brilho. O iOS 7 da Apple, em 2013, abandonou o couro cosido, o feltro e as texturas das versões anteriores por um design plano e claro. O Material Design da Google, apresentado em 2014, manteve a cor plana mas usou a sombra para mostrar camadas.

Os gradientes não desapareceram; mudaram de caráter. Muitos dos novos ícones de aplicações do iOS 7 usavam gradientes vivos e suaves, de cima para baixo, em vez de brilho, uma pista do que aí vinha.

O gradiente regressa: o Instagram e meados da década de 2010

Em 2016 o Instagram substituiu o ícone da câmara por um simples contorno sobre um gradiente do quente ao violeta, um dos gradientes de marca mais visíveis alguma vez feitos. Por volta da mesma altura, aplicações e marcas começaram a juntar layouts planos a gradientes vivos e ousados, muitas vezes de duas cores misturadas na diagonal. O design plano tinha limpado a decoração; os gradientes voltaram como cor e ambiente, e não como falso brilho.

Esse sucesso teve um custo. Os geradores e as ferramentas de design traziam os mesmos pares e, no fim da década, muitos feeds pareciam iguais, um problema tratado em porque todos os feeds parecem iguais.

Gradientes hoje: malha, grão, shaders e movimento

O capítulo mais recente é sobre riqueza e controlo. Os gradientes de malha, com vários pontos de cor a puxar em direções diferentes, passaram de ferramentas vetoriais especializadas para aplicações de design do dia a dia. O conic-gradient(), definido no CSS Images Level 4, chegou aos navegadores em 2018. Os shaders WebGL permitem que os sites desenhem gradientes que se movem e respondem em tempo real, o grão regressou para fazer a cor digital parecer física e, em 2025, a Apple apresentou o Liquid Glass, um material translúcido em todas as suas plataformas.

A ideia mais recente é que um gradiente pode ser uma identidade com dono, e não um estilo que qualquer pessoa possa copiar. Os Marks da Gradiently são gradientes vivos: cores, materiais, luz, grão e movimento numa só receita, cada um com um código público e exatamente um dono de cada vez. Para saber para onde vamos a seguir, vê as tendências de gradientes 2026.

GR·BBGB·1K

Lilac Pulse

Ver este Mark