Efeito de brilho em design: luz suave sem auréolas em volta do texto

Um efeito de brilho é uma mancha de luz: um núcleo claro de cor que esmaece devagar num entorno mais escuro, como se uma lâmpada estivesse logo atrás da superfície. Bem usado, dá profundidade a um design chapado e leva o olhar a um produto, um botão ou uma forma. Mal usado, vira um anel borrado em volta do título. A regra que esta página inteira segue é simples: ponha o brilho em formas e fundos e mantenha as palavras nítidas.

Onde o brilho cabe e onde não cabe

Luz em volta de um objeto diz que aquele objeto importa. Luz em volta de letras faz outra coisa: suaviza as bordas, reduz o contraste entre traço e fundo e deixa a linha com cara de fora de foco em telas pequenas. Por isso o brilho deve ficar perto das palavras, nunca envolvendo-as. Se o texto precisa de ajuda para ser lido, corrija a área atrás dele; alternativas à sombra de texto trata das 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 esmaece num fundo quase preto. Deslocar o centro para fora do meio faz parecer uma fonte de luz e não um alvo.

Cada um deles tem três partes: um núcleo quase branco ou muito pálido, uma parada média saturada e um fundo profundo da mesma família. Sem a parada média, o brilho fica cinza onde encontra o escuro, o problema descrito em gradientes sujos. Para saber mais sobre a forma em si, veja gradientes radiais.

Como fazer um brilho que pareça luz de verdade

1. 1

   Comece com um fundo escuro ou apagado

   A luz precisa de escuridão para aparecer. Um preto azulado, um verde profundo ou um tom de papel empoeirado funcionam; um fundo branco brilhante não deixa lugar para o brilho.

2. 2

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

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

3. 3

   Deixe a queda ser lenta

   O esmaecer deve cobrir uma área grande, muitas vezes metade do quadro. Um esmaecer curto parece um holofote recortado com tesoura.

4. 4

   Decida de onde vem a luz

   Coloque o núcleo perto de uma borda ou de um canto, ou atrás do objeto que ele ilumina. Depois mantenha o resto do design coerente com essa direção.

5. 5

   Acrescente granulação fina

   Os esmaecimentos escuros e longos são onde as faixas mais aparecem. Uma camada leve de ruído esconde os degraus; gradientes granulados traz o método.

Mais um teste: desligue o brilho e olhe de novo. Se o design ainda funciona, o brilho está acrescentando atmosfera. Se desmorona, o brilho está fazendo um trabalho que o layout ou o contraste deveriam fazer.

Efeito de brilho em CSS

Há três formas confiáveis de fazer um brilho na web. Uma box-shadow com deslocamento zero e desfoque grande ilumina as bordas de um cartão ou botão. Um gradiente radial num pseudoelemento coloca 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;
}

Em botões, mantenha o brilho sutil e o rótulo nítido: a luz pertence à forma do botão, não às palavras. A sintaxe completa das sombras está em box-shadow em CSS.

Brilho em posts, pôsteres e stories

Num design estático, o brilho faz o melhor trabalho atrás do assunto ou na metade vazia do quadro. Ponha a luz onde o olhar deve pousar primeiro e depois coloque o título sobre a parte mais escura e calma do fundo. A luz leva o leitor às palavras sem tocá-las.

É exatamente o que um Mark do Gradiently faz sozinho. Sua região mais calma se acomoda atrás das palavras, as cores perto das letras escurecem ou clareiam e a tinta automática escolhe texto claro ou escuro em cada linha a partir da paleta do Mark, então não há caixas, sombras nem auréolas a acrescentar. Você vê a ideia em tinta automática.

Brilho, neon e vazamentos de luz comparados

Esses três se misturam. O brilho é uma luz suave e ampla vinda de uma só fonte. Os gradientes neon são cor saturada e elétrica com uma linha fina e luminosa no centro, mais próximos de uma placa luminosa. Os vazamentos de luz são faixas quentes que imitam o filme, em geral entrando por uma borda. Os três precisam de fundo escuro e os três ficam longe do texto. Se você quer que a luz se desloque e mude, os gradientes de aurora são um parente em movimento.