SaintJSONFerramentas sagradas para devs
Ferramenta sagrada

Gerador Glassmorphism Online Grátis

Gere o efeito de vidro fosco (glassmorphism) com sliders de blur e opacidade, preview em tempo real e código CSS backdrop-filter pronto. 100% client-side.

Desfoque (Blur)12px
Opacidade do Fundo25%

Vitral Sagrado

O fundo aparece difuso através do vidro imaculado deste card.

A Liturgia do Backdrop-Filter

.vitral-sagrado {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

Aproximação Tailwind: bg-white/25 backdrop-blur-xl

Glassmorphism: A Iluminação do Vidro Fosco

O glassmorphism dá alma ao design: o fundo aparece difuso através de um painel translúcido. Ajuste o desfoque (backdrop-filter) e a opacidade do fundo com sliders, veja o vitral ganhar vida e copie o CSS imaculado.

Como funciona

1. Ajuste o desfoque (blur) e a opacidade do fundo.

2. Ative a borda de luz divina com o switch.

3. Copie o código CSS ou a aproximação Tailwind. Milagre realizado.

Quando usar

Cards sobre imagens de fundo, modais com profundidade, barras de navegação flutuantes e qualquer ocasião em que o design precise parecer tocado pelo divino.

Perguntas frequentes