CSS Glassmorphism Generator (with Backdrop Blur)

Desenha frosted-glass cards CSS com preview ao vivo e código copy-ready

🔒 100% no browser🆓 Grátis pra sempre⚡ Sem sign-up
Nota: A interface da ferramenta abaixo por enquanto está só em inglês. Estamos traduzindo uma por uma. Ver essa ferramenta em inglês →
Glass card
Frosted, saturated, alive
CSS
.glass {
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 20px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
Tailwind classes (closest match)
bg-white/25 backdrop-blur-xl backdrop-saturate-150 border border-white/35 rounded-2xl shadow-xl

Como funciona

  1. 1
    Pick um background

    Escolha um gradient preset ou solta sua própria imagem - o glass fica em cima.

  2. 2
    Ajusta os sliders

    Blur, saturation, alpha do background, border, radius, shadow - o preview atualiza na hora.

  3. 3
    Copy o CSS

    Cola na sua stylesheet ou em Tailwind arbitrary-values ([backdrop-filter:blur(20px)]).

Sobre CSS Glassmorphism Generator (with Backdrop Blur)

CSS glassmorphism generator grátis. Desenha frosted-glass cards com sliders ao vivo pra blur, saturation, transparência do background, border e shadow - sobre sua própria imagem de background ou um preset. Copy CSS production-ready com vendor prefixes. CSS Glassmorphism Generator (with Backdrop Blur) no 712 Tools roda inteiro dentro do seu browser via APIs nativas de JavaScript - nenhum server vê seus dados. Isso significa resultado na hora, privacidade total e nenhum limite de upload.

Seja pra uma sessão de debug, uma checagem rápida ou um incidente em produção, essa ferramenta é grátis e sem limite de uso. Sem watermarks, sem sign-up e sem ads dentro da ferramenta.

Perguntas frequentes

Todos os browsers suportam backdrop-filter?

Sim no Chromium, Safari e Firefox moderno. Firefox antigo precisa de fallback background color - o CSS gerado inclui um.

Por que meu glass tá aparecendo sólido?

backdrop-filter só funciona quando o elemento tem background translúcido. Mantém o alpha do background abaixo de 1 e garante que tem conteúdo real atrás do card.

Funciona no Tailwind?

Sim - Tailwind traz utilities backdrop-blur-*. O generator mostra tanto CSS raw quanto a combo Tailwind mais próxima.

Leia mais

5 min de leitura

The WCAG color contrast checklist every designer should bookmark

AA vs AAA, the math behind the ratios, why gray-on-gray fails on retina screens, and the two-line HTML that makes a color contrast test run in seconds.

5 min de leitura

Glassmorphism, neumorphism, and where 2026 UI is actually heading

The design trends that shipped, the ones that flopped, and what makes modern UI actually feel modern - from frosted glass to soft shadows to conic gradients.

Ferramentas relacionadas

Color Converter

Converte entre HEX, RGB, HSL e CMYK com preview ao vivo

Palette Generator

Gera paletas de cores harmoniosas a partir de uma cor base

CSS Gradient

Desenha gradients CSS linear, radial e conic com preview ao vivo

Box Shadow

Desenha box-shadows CSS multi-layer com preview ao vivo

Contrast Checker

Checa contraste texto/background contra WCAG 2.1 AA e AAA - preview ao vivo

Physics Editor

Editor de hitbox de sprites grátis online - auto-traceia collision polygons e exporta pra Phaser, Matter.js, Rapier ou qualquer engine 2D