Superfície CSS

O que é

Efeitos de superfície translúcida com blur (glass) e halo de luz (glow), pensados pra sobrepor imagem/vídeo de fundo.

Como funciona

O efeito de vidro só aparece de verdade com conteúdo por trás — o backdrop-filter desfoca o que está embaixo do elemento.

Exemplos

Vidro fosco sobre foto Ao vivo

painel de vidro fosco

<!-- o efeito SÓ aparece com conteúdo atrás: é o fundo que ele desfoca -->
<div class="rel">
  <img src="/fundo.jpg" class="abs-fill of-cov" alt="">
  <div class="sw-glass">painel de vidro fosco</div>
</div>

Os três níveis de desfoque Ao vivo

sm

md

lg

<div class="sw-blur-sm">desfoque leve</div>
<div class="sw-blur-md">desfoque médio</div>
<div class="sw-blur-lg">desfoque forte</div>

<!-- diferente do .sw-glass, estes NÃO põem cor nem borda:
     só desfocam o que está por trás -->

<div class="sw-glow">halo na cor primária</div>
<div class="sw-glow-sec">secundária</div>
<div class="sw-glow-suc">sucesso</div>
<div class="sw-glow-err">erro</div>

<!-- bom pra destacar o plano recomendado, o status crítico, etc. -->

Halo no texto Ao vivo

título com halo

<h3 class="sw-glow-text">título com halo</h3>

<!-- o .sw-glow ilumina a CAIXA; o .sw-glow-text ilumina as LETRAS -->

Atributos

Nenhum.

Variantes

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

• Vidro e desfoque dependem de backdrop-filter: sobre fundo liso não há o que desfocar e o painel parece só uma caixa clara. Use sempre com imagem, vídeo ou gradiente atrás.
• backdrop-filter custa processamento: vários painéis de vidro na mesma tela pesam, principalmente em celular antigo.