Gradiente branco: códigos de luz subtil para designs limpos

Um gradiente branco vai do branco puro a um branco sujo só ligeiramente mais escuro, normalmente com um tom suave quente, frio ou perolado. A mudança é pequena de propósito: deve parecer luz a cair sobre uma superfície, não cor. Por isso os gradientes brancos são ideais para sites limpos, fotografias de produto, convites e publicações minimalistas. Aqui encontras a intensidade certa, uma paleta de brancos sujos, códigos para copiar e a forma correta de esbater para branco em CSS.

Quanta mudança precisa um gradiente branco

Se for pouca, ninguém a vê, sobretudo num telemóvel com o brilho no máximo. Se for demasiada, o branco fica cinzento e sujo. A tabela mostra três intensidades, medidas pela distância da cor final ao branco puro. A maioria dos designs pede a do meio.

Brancos sujos para começar

Os cinzentos neutros no fim de um gradiente branco ficam um pouco sem vida. Um vestígio de tom faz toda a diferença: os brancos quentes lembram papel, linho e marfim; os frios lembram porcelana, geada e neve. Escolhe o tom que condiz com o resto da paleta e mantém-no em todo o conjunto de designs.

Códigos de gradiente branco

Todos começam no branco puro ou perto dele. O papel e o marfim são quentes e editoriais. A porcelana e a geada são frias e técnicas. A luz da manhã acrescenta um brilho suave a partir de um canto, e a pérola mistura vários tons quase invisíveis para uma iridescência delicada que nunca vira arco-íris.

Se quiseres um pouco mais de cor mantendo a mesma leveza, os gradientes pastel são o passo seguinte. Para o extremo oposto da escala neutra, vê os códigos de gradiente cinzento.

Um gradiente branco por trás de produtos

Os fotógrafos iluminam um fundo branco para que a luz caia suavemente em direção às margens, o que separa o objeto do fundo sem linha de sombra. Um gradiente branco radial faz o mesmo no ecrã. É especialmente útil quando recortas um produto da fotografia: um branco liso atrás parece colado, ao passo que uma queda suave parece estúdio.

Os fundos para fotografias de produto tratam de sombras, fundos de cor e dos casos em que o branco é a escolha errada.

Esbater para branco com um gradiente CSS

O gradiente branco mais comum na web nem sequer é um fundo: é um esbatido que suaviza o fim de um artigo truncado, a base de uma lista com scroll ou a margem de uma fotografia. Escreve a extremidade transparente como branco com opacidade zero. Os navegadores modernos misturam transparent corretamente, mas rgb(255 255 255 / 0) diz exatamente o que queres e evita a faixa acinzentada que alguns motores mais antigos desenhavam.

/* soften the end of a clipped block of text */
.excerpt {
  position: relative;
  max-height: 12rem;
  overflow: hidden;
}

.excerpt::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, #ffffff 90%);
  pointer-events: none;
}

Se o fundo da tua página for um branco sujo e não branco puro, esbate para essa cor, ou o esbatido acabará numa faixa mais clara visível. O artigo sobre gradiente CSS transparente aprofunda esbatidos e sobreposições.

Branco limpo, não desbotado

Os gradientes brancos também formam faixas, embora menos do que os escuros; se vires degraus num monitor grande, um grão muito fino resolve, como se explica em faixas no gradiente.

Gradientes brancos em designs minimalistas

Os designs minimalistas vivem ou morrem pela tipografia, e o branco não lhe dá onde se esconder. Usa uma tinta forte, quase preta, muito espaço e um detalhe de cor. Um gradiente branco acrescenta a dimensão certa para a página parecer iluminada e acabada. Os fundos minimalistas trazem mais ideias no mesmo espírito, e os fundos de cabeçalho para sites mostram como um gradiente porcelana ou luz da manhã pode sustentar uma página de destino inteira.

No Gradiently, os Marks claros funcionam como os arrojados: o Mark deixa uma zona calma atrás das palavras e a Tinta automática escolhe uma cor de texto escura a partir da paleta do próprio Mark, para que um branco delicado nunca acabe com texto cinzento que desaparece.