Efeitos de brilho são fundamentais no design, adicionando estética e criando uma atmosfera única. Desde letreiros neon a filmes de ficção científica, eles são versáteis e podem melhorar tanto grandes apresentações quanto micro-interações, como o efeito de passagem do mouse em um botão.

É possível criar esses efeitos facilmente com CSS. Para incrementar, bibliotecas JavaScript como GSAP oferecem ainda mais possibilidades. Vamos explorar uma coleção de efeitos de brilho radiantes.

Neuro Noise: Fundo Animado com GLSL Shader

Criação de Ksenia Kondrashova

Este fundo animado cria uma atmosfera assustadora, semelhante aos Arquivos X. A apresentação é interativa, permitindo que o brilho verde mude ao mover o dispositivo apontador.

See the Pen Neuro Noise (GLSL Shader) by Ksenia Kondrashova

Cartões de Brilho com Deslocamento CSS

Criação de Jhey

Layouts de cartões são infinitamente flexíveis. Aqui, os efeitos de brilho são o destaque, com o GSAP aplicando uma nova cor a cada cartão conforme você rola. A iluminação e sombreamento tornam tudo misterioso e legível.

See the Pen CSS Scroll-Driven Glow Cards ⚡️ by Jhey

Relógio Digital Neon com CSS e JavaScript

Criação de wheatup

Um belo brilho cobalto complementa perfeitamente um relógio digital. Os caracteres dentro da sombra mudam junto com as horas, minutos e segundos. É uma maneira poderosa de exibir o tempo.

See the Pen Neon Clock (CSS) by wheatup

Animação com Múltiplos Efeitos de Brilho

Criação de Simon Goellner

Um exemplo prático de efeitos de brilho em ação. Escolha entre meia dúzia de efeitos de passar o mouse neste botão brilhante. Sua borda ilumina progressivamente com o padrão escolhido, garantindo a atenção do usuário.

See the Pen Multiple Glow effects Button by Simon Goellner

Gradientes de Smoothie Arco-Íris com Rolagem Suave

Criação de Denise Trocchi

Este exemplo de rolagem suave adiciona luminescência. Cada smoothie virtual tem sua própria identidade de cor. Gradientes ajudam a dar brilho, enquanto a navegação também exibe um efeito de passagem do mouse.

See the Pen Rainbow Smoothie (Smooth Scrolling #CodePenChallenge) by Denise Trocchi

Bilhete Animado Supabase com Aparência de Vidro

Criação de Gambhir Sharma

Confira os detalhes hipnotizantes deste bilhete virtual. O ícone de raio apresenta um efeito de mudança de cor prismático. Um estilo semelhante a vidro une toda a apresentação.

See the Pen Supabase Ticket | CSS | by Gambhir Sharma

Brilho Cinza Pulsante Infinito

Criação de Shane Burns

Esta animação oferece um visual retrô assombroso. O brilho cinza pulsante dá a sensação de viajar pelo espaço em alta velocidade.

See the Pen Infinite by Shane Burns

Página de Destino Moderna com Glassmorphism

Criação de Juxtopposed

Exemplo de como os efeitos de brilho podem dar vida a uma página. Cores suaves aparecem atrás do texto e botões principais, adicionando personalidade a elementos genéricos.

See the Pen Glassmorphic Modern Landing page with Squircle Buttons (Responsive) by Juxtopposed

Explorando as Possibilidades

Efeitos de brilho são o toque final perfeito para um componente, destacando até mesmo pequenos elementos e melhorando a experiência do usuário (UX). CSS facilitou a implementação desses efeitos, e um pouco de JavaScript pode criar algo imersivo. Os exemplos acima demonstram as possibilidades, inspirando o uso de efeitos de brilho de novas maneiras!

Para ver ainda mais exemplos de efeitos de brilho, confira nossa coleção no CodePen.