Efeito de brilho em design: luz suave sem halos no texto

Um efeito de brilho é uma mancha de luz: um núcleo de cor clara que se esbate devagar num redor mais escuro, como se um candeeiro estivesse mesmo atrás da superfície. Bem usado, dá profundidade a um design plano e puxa o olhar para um produto, um botão ou uma forma. Mal usado, torna-se um anel desfocado à volta do título. A regra desta página é simples: põe o brilho em formas e fundos e mantém as palavras nítidas.

Onde um brilho fica bem e onde não fica

Luz à volta de um objeto diz que esse objeto importa. Luz à volta de letras faz outra coisa: suaviza-lhes as arestas, baixa o contraste entre o traço e o fundo e faz a linha parecer desfocada em ecrãs pequenos. Por isso o brilho deve ficar perto das palavras, nunca a envolvê-las. Se o texto precisa de ajuda para se ler, corrige antes a zona por trás dele; alternativas à sombra de texto mostra as opções mais limpas.

Fundos com efeito de brilho e códigos

O fundo brilhante mais fácil é um gradiente radial que começa claro, desce depressa por um tom médio mais rico e se esbate num fundo quase preto. Deslocar o centro para fora do meio faz com que pareça uma fonte de luz e não um alvo.

Cada um destes tem três partes: um núcleo quase branco ou muito pálido, uma paragem intermédia saturada e um fundo profundo da mesma família. Se saltares a paragem intermédia, o brilho fica cinzento onde encontra o escuro, o problema descrito em gradientes lamacentos. Para saberes mais sobre a forma em si, vê gradientes radiais.

Como fazer um brilho que pareça luz de verdade

1. 1

   Começa com um fundo escuro ou discreto

   A luz precisa de escuridão para se ver. Um preto azulado, um verde profundo ou um tom de papel poeirento funcionam; um fundo branco e brilhante não deixa ao brilho para onde ir.

2. 2

   Dá ao núcleo um tom mais claro e quente

   A luz real é mais brilhante e menos saturada no centro. Faz do núcleo uma versão pálida da cor do brilho, como #fde68a para um brilho laranja.

3. 3

   Deixa-o cair devagar

   O esbatido deve estender-se por uma área grande, muitas vezes metade do enquadramento. Um esbatido curto parece um holofote recortado com tesoura.

4. 4

   Decide de onde vem a luz

   Põe o núcleo perto de uma aresta ou de um canto, ou atrás do objeto que ilumina. Depois mantém o resto do design coerente com essa direção.

5. 5

   Acrescenta grão fino

   É nos esbatidos longos e escuros que o banding mais se vê. Uma camada leve de ruído esconde os degraus; gradientes granulados tem o método.

Mais um teste: desliga o brilho e volta a olhar. Se o design continua a funcionar, o brilho está a dar atmosfera. Se se desfaz, o brilho está a fazer um trabalho que devia ser do layout ou do contraste.

Efeito de brilho em CSS

Há três formas fiáveis de fazer um brilho na web. Uma box-shadow sem deslocamento e com muito desfoque ilumina as arestas de um cartão ou botão. Um gradiente radial num pseudoelemento põe uma poça de luz suave atrás de um objeto. E filter: blur() numa forma colorida dá o resultado mais suave, com um custo de renderização maior. A referência de box-shadow da MDN lista todos os valores.

/* 1. A button that glows at its edges */
.button-glow {
  background: #7c3aed;
  color: #ffffff;
  box-shadow:
    0 0 0 1px rgb(196 181 253 / 0.4),
    0 0 24px rgb(124 58 237 / 0.55),
    0 0 64px rgb(124 58 237 / 0.25);
}

/* 2. A pool of light behind a product image */
.product {
  position: relative;
  isolation: isolate;
}
.product::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: radial-gradient(circle at 50% 55%, rgb(253 230 138 / 0.9), rgb(249 115 22 / 0.35) 35%, transparent 70%);
}

/* 3. A blurred orb in a hero background */
.orb {
  position: absolute;
  width: 480px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0891b2;
  filter: blur(120px);
  opacity: 0.6;
  pointer-events: none;
}

Nos botões, mantém o brilho subtil e a etiqueta nítida: a luz pertence à forma do botão, não às suas palavras. A sintaxe completa das sombras está em sombra de caixa em CSS.

Brilho em publicações, cartazes e stories

Num design estático, o brilho trabalha melhor atrás do assunto ou na metade vazia do enquadramento. Põe a luz onde o olhar deve pousar primeiro e depois coloca o título sobre a parte mais escura e calma do fundo. A luz leva o leitor até às palavras sem lhes tocar.

É exatamente isto que um Mark do Gradiently faz sozinho. A zona mais calma assenta atrás das palavras, as cores junto às letras escurecem ou clareiam, e a tinta automática escolhe texto claro ou escuro por linha a partir da paleta do Mark, por isso não há caixas, sombras nem halos para acrescentar. Vê a ideia em tinta automática.

Brilho, neon e fugas de luz comparados

Estes três confundem-se. Um brilho é luz suave e ampla vinda de uma só fonte. Os gradientes neon são cor elétrica e saturada com uma linha fina e brilhante no coração, mais próximos de uma tabuleta. As fugas de luz são rasgos quentes que imitam película, normalmente a entrar por uma aresta. Os três precisam de um fundo escuro e os três ficam longe do texto. Se quiseres que a luz se desloque e mude, os gradientes de aurora são um parente em movimento.