# Efeito de brilho em design: luz suave sem halos no texto [Canonical HTML page](https://gradiently.design/pt-pt/guide/glow-effect) Um brilho deve parecer luz a cair numa superfície: um núcleo claro, um esbatido longo e um quarto escuro à volta. Põe-no atrás de formas e nos fundos, e longe das arestas das letras. ## The short version - Um efeito de brilho é um núcleo de cor clara que se esbate aos poucos num redor mais escuro, de modo a parecer luz e não tinta. - Os brilhos funcionam melhor em formas, botões, fotografias de produto e fundos, onde dão profundidade e guiam o olhar. - Um halo de brilho à volta do texto esbate as arestas das letras e torna-as mais difíceis de ler, por isso mantém as palavras nítidas e põe a luz noutro sítio. - Em CSS, um brilho suave costuma ser um gradiente radial que se esbate até ficar transparente, ou uma sombra com muito desfoque e sem deslocamento. - Um brilho precisa de um fundo escuro ou discreto para se ver, e um pouco de grão impede que o esbatido longo faça banding. 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](https://gradiently.design/pt-pt/guide/text-shadow-alternatives) mostra as opções mais limpas. ### Evita - Um halo desfocado colado ao título - Brilho da mesma cor do texto - Vários brilhos com a mesma força a competir - Um brilho forte sobre um fundo claro - Brilho em todos os botões, cartões e ícones ### Faz - Luz atrás de um produto, forma ou fotografia - Um brilho para um lado, com as palavras sobre a zona calma - Uma luz principal e, no máximo, um eco mais fraco - Um fundo escuro ou discreto para a luz ter espaço - Brilho reservado para a única coisa que importa ## 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. - Brilho de brasa: `radial-gradient(circle at 70% 30%, #fde68a 0%, #f97316 18%, #7c2d12 42%, #120a06 75%)` - Poça de luz: `radial-gradient(circle at 30% 70%, #a5f3fc 0%, #0891b2 20%, #083344 48%, #030b10 80%)` - Brilho de palco por baixo: `radial-gradient(ellipse at 50% 100%, #f0abfc 0%, #a21caf 22%, #3b0764 50%, #0b0414 85%)` - Sinal lima: `radial-gradient(circle at 80% 20%, #d9f99d 0%, #4d7c0f 22%, #1a2e05 50%, #070b03 80%)` - Luz de janela sobre papel: `radial-gradient(ellipse at 20% 15%, #fff7ed 0%, #fed7aa 20%, #f5e6d8 50%, #efe7df 85%)` - Candeeiro violeta: `radial-gradient(circle at 75% 25%, #c4b5fd 0%, #6d28d9 16%, #1e1b4b 45%, #09071a 80%)` Cinco brilhos escuros e um claro. A versão clara funciona porque o brilho é mais quente e luminoso do que um fundo já pálido, não porque seja mais forte. 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](https://gradiently.design/pt-pt/guide/muddy-gradients). Para saberes mais sobre a forma em si, vê [gradientes radiais](https://gradiently.design/pt-pt/guide/radial-gradient). ## Como fazer um brilho que pareça luz de verdade 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. **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. **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. **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. **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](https://gradiently.design/pt-pt/guide/grainy-gradients) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) lista todos os valores. ```css /* 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; } ``` Três brilhos, nenhum em texto. Empilhar duas ou três sombras de força decrescente dá uma aresta mais suave do que uma sombra grande. | Método | Ideal para | Custo | Atenção a | | --- | --- | --- | --- | | `box-shadow` | Botões, cartões, campos | Baixo | Ser cortada por `overflow: hidden` num elemento pai | | Camada `radial-gradient` | Luz atrás de imagens e secções | Baixo | Banding em esbatidos longos e escuros | | Forma com `filter: blur()` | Fundos de hero, orbes ambientais | Mais alto, sobretudo se animado | Custo de repintura ao deslizar; mantém-no parado ou pequeno | Escolhe o método mais barato que dê o aspeto. A maioria dos brilhos de uma página deve ser gradientes ou sombras, não elementos desfocados. 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](https://gradiently.design/pt-pt/guide/css-box-shadow). ## 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. Um story vertical de evento em que uma mancha clara do fundo fica mesmo atrás do título e o apaga Luz a atravessar o título: a zona mais brilhante cai sobre as letras e achata-as. O mesmo story vertical de evento com o brilho afastado do título e uma zona escura e calma atrás do texto O mesmo story com a luz afastada das palavras. O brilho continua a dar o ambiente e o texto fica nítido. É 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](https://gradiently.design/pt-pt/guide/auto-ink-legibility). - Fundo noturno: #09071a - Queda índigo: #1e1b4b - Luz violeta: #6d28d9 - Núcleo lilás: #c4b5fd - Acento quente: #fde68a - Texto nítido: #f8fafc Uma paleta de brilho em quatro camadas: fundo, queda, luz e núcleo, mais um acento quente e uma cor de texto que nunca apanha o brilho. ## 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](https://gradiently.design/pt-pt/guide/neon-gradients) 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](https://gradiently.design/pt-pt/guide/light-leaks) 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. ## FAQ ### Como faço um efeito de brilho em CSS? Usa uma `box-shadow` sem deslocamento e com muito desfoque, como `0 0 24px` numa cor semitransparente, ou um gradiente radial que se esbate até ficar transparente atrás do elemento. Para o brilho mais suave, desfoca uma forma colorida com `filter: blur()`. ### Devo pôr um brilho à volta do texto? Não. Um halo suaviza as arestas das letras e baixa o contraste, e as palavras ficam mais difíceis de ler. Mantém o texto nítido e põe o brilho atrás de uma forma ou no fundo, ali perto. ### Que fundo faz um brilho destacar-se? Um fundo escuro ou discreto na mesma família de cor do brilho, como um índigo profundo atrás de uma luz violeta. Num fundo branco e brilhante, o brilho não tem para onde ir. ### Porque é que o meu gradiente com brilho tem bandas? Os esbatidos longos e escuros têm poucos degraus de cor com que trabalhar, por isso os ecrãs mostram bandas visíveis. Acrescenta uma camada de grão fino ou exporta com mais qualidade para as esconder. ### Qual é a diferença entre um brilho e um efeito neon? Um brilho é luz ampla e suave vinda de uma só fonte. O neon é cor saturada com uma linha fina e intensamente brilhante ao centro, como o tubo de uma tabuleta.