Vidro Refrativo Ultra

Pastilha de vidro que fica parada na tela e refrata, pela borda, o conteúdo que rola por baixo, com leve separação de cor.

Ver na loja e baixar

Sobre este efeito

Uma pastilha de vidro que fica parada na tela enquanto o conteúdo rola por baixo: a borda do vidro refrata o que passa, com uma leve separação de cor como uma lente de verdade, e o centro fica limpo pra ler. Menu flutuante, barra de ações, selo sobre galeria, botão fixo. Feito com um mapa de deslocamento desenhado no tamanho exato do elemento e um filtro SVG no backdrop-filter; fora do Chrome vira vidro fosco clássico. Canto, faixa que refrata, força, aberração, desfoque, névoa e saturação ajustáveis. Sem biblioteca.

Ficha

Categoria: Cards
Onde combina: topo (hero), chamada pra ação
Alcance: Área: vive dentro de um bloco da página.
Plano: Exclusivo de quem assina o Ultra (R$ 39,90/mês).
Peso: 4,2 KB de código comprimido. Sem biblioteca externa.
No celular: Leve: usa 9% do processador de um celular intermediário enquanto anima.
Na loja desde: 05/09/2026

Como colocar no seu site

Criando o site com IA (Claude Code, Codex e parecidas): baixe o kit, extraia na pasta do projeto e cole o pedido pronto que a loja entrega. Não precisa saber programar.
Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-vidro-refrativo.

Assuntos

vidro
glass
refração
lente
sticky
menu
backdrop-filter
svg