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

Um gradiente branco vai do branco puro a um off-white só um pouco mais escuro, em geral com um tom suave quente, frio ou perolado. A mudança é pequena de propósito: deve parecer luz caindo sobre uma superfície, não cor. Por isso funciona tão bem em sites limpos, fotos de produto, convites e posts minimalistas. Abaixo você vê qual intensidade usar, uma paleta de off-whites, códigos para copiar e o jeito certo de fazer um fade para branco em CSS.

Quanta variação um gradiente branco precisa

Se for pouca, ninguém vê, principalmente num celular com brilho total. Se for demais, o branco vira um cinza sujo. A tabela traz três intensidades, medidas pela distância da cor final ao branco puro. A maioria dos designs pede a do meio.

Cores off-white para começar

Cinzas puramente neutros no fim de um gradiente branco parecem um pouco sem vida. Um traço de tom faz a diferença: off-whites quentes lembram papel, linho e marfim; os frios lembram porcelana, geada e neve. Escolha o tom que combina com o resto da sua paleta e mantenha o mesmo em todo o conjunto de designs.

Códigos de gradiente branco

Todos começam no branco puro ou perto dele. Papel e marfim são quentes e editoriais. Porcelana e geada são frios e técnicos. Luz da manhã acrescenta um brilho suave num canto, e pérola mistura vários tons quase invisíveis para um iridescente delicado que nunca vira arco-íris.

Se quiser um pouco mais de cor mantendo a mesma leveza, os gradientes pastel são o próximo passo. Para o extremo oposto da escala neutra, veja os códigos de gradiente cinza.

Um gradiente branco atrás de produtos

Fotógrafos iluminam um fundo branco para que ele escureça suavemente em direção às bordas, o que separa o objeto do fundo sem linha de sombra. Um gradiente branco radial faz o mesmo na tela. Ele ajuda muito quando você recorta um produto da foto: um branco chapado atrás parece colado, enquanto uma varredura suave parece estúdio.

Fundos para foto de produto fala de sombras, fundos coloridos e de quando o branco é a escolha errada.

Fade para branco com gradiente CSS

O gradiente branco mais comum na web nem é um fundo: é um fade que suaviza o fim de um artigo cortado, a base de uma lista rolável ou a borda de uma foto. Escreva a ponta transparente como branco com opacidade zero. Os navegadores modernos misturam transparent direito, mas rgb(255 255 255 / 0) diz exatamente o que você quer e evita a faixa acinzentada que alguns motores 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 página é um off-white, e não branco puro, faça o fade para essa cor, ou ele vai terminar numa faixa mais clara visível. Gradiente CSS transparente aprofunda fades e sobreposições.

Branco limpo, não desbotado

Gradientes brancos também formam faixas, embora menos que os escuros; se você vir degraus num monitor grande, um grão bem fino resolve, como explica faixas em gradientes.

Gradientes brancos em designs minimalistas

No design minimalista, tudo depende da tipografia, e o branco não deixa nada se esconder. Use uma tinta forte, quase preta, bastante espaço e um detalhe colorido. Um gradiente branco dá a dimensão exata para a página parecer iluminada e acabada. Fundos minimalistas traz mais ideias nessa linha, e fundos de hero para sites mostra como um gradiente porcelana ou luz da manhã pode sustentar uma landing page inteira.

No Gradiently, Marks claros funcionam como os ousados: o Mark mantém uma área calma atrás das palavras e a tinta Auto escolhe uma cor de texto escura na própria paleta do Mark, então um branco delicado nunca acaba com texto cinza que desaparece.