Why is my glassmorphism not blurring the background?

Three common causes: the background of the glass element is too opaque (keep alpha below 0.3); -webkit-backdrop-filter is missing for Safari; or the parent has overflow hidden with no actual content behind it. Glassmorphism needs visible content rendered behind the element to blur.

What's the best blur value for glassmorphism?

12 to 20 pixels for most UI work. Below 8px the effect looks like a tinted overlay; above 30px the background becomes unrecognizable. Pair the blur with saturate(180%) to keep colors vivid behind the glass.

Does glassmorphism work in Safari?

Yes, but only if you include both backdrop-filter and -webkit-backdrop-filter in your CSS. Safari supported backdrop-filter behind a webkit prefix from version 9; the unprefixed version is fully supported in modern Safari.

Glassmorphism vs neumorphism — what's the difference?

Glassmorphism is transparent and blurred — light passes through, you see the background. Neumorphism is opaque and embossed — soft inner and outer shadows make the element appear molded from the same material as the parent.

Why does my glass card look gray and dull?

Add backdrop-filter: blur(16px) saturate(180%) — saturation boost keeps colors lively through the blur. Also make sure the background behind the glass actually has color; a glass card on a flat background will always look gray.

Is glassmorphism accessible?

It can be — but takes care. Always meet WCAG 4.5:1 contrast for body text, even when the glass sits over a busy background. For users with prefers-reduced-transparency set, fall back to a solid surface using a media query.

Gerador CSS Glassmorphism

Configurações do Cartão

Desfoque 16px

Opacidade 15%

Borda 20%

Raio 20px

Saturação 180%

Cor do Vidro

Cor do Texto

Fundo Predefinido

Dark

Violet

Ocean

Mint

Sunset

Peach

Glassmorphism

A frosted glass effect for modern, elegant UI design.

Get Started

Glassmorphism Preview

Generated CSS

Glassmorphism CSS: Guia Completo

Glassmorphism é uma tendência de design UI que simula vidro fosco — uma superfície semi-transparente com uma visão desfocada do que está atrás. Popularizado pelo Apple macOS Big Sur em 2020, é agora um dos estilos mais usados em interfaces web modernas, dashboards e designs de apps.

Use o gerador acima para ajustar desfoque, opacidade, borda e raio visualmente, então copie o CSS completo para seu componente de glassmorphism.

Como Usar Este Gerador de Glassmorphism

Escolha um fundo — Glassmorphism só funciona sobre um fundo colorido ou fotográfico. Experimente os presets Dark, Violet, Ocean, Mint, Sunset ou Peach, ou use o seu próprio.

Ajuste o vidro — Regule o desfoque (12–20px é o ponto ideal), opacidade (10–25% para vidro leve), borda, raio e saturação até o efeito fosco parecer correto.

Copie o CSS — O gerador inclui tanto backdrop-filter quanto -webkit-backdrop-filter para compatibilidade com Safari automaticamente.

O CSS Principal

Glassmorphism requer apenas quatro propriedades CSS trabalhando juntas:

.glass { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px; }

Perguntas Frequentes

Por que meu glassmorphism não está desfocando o fundo?

Três causas comuns: (1) o fundo do elemento é muito opaco — mantenha o alpha abaixo de 0.3; (2) falta -webkit-backdrop-filter para Safari; (3) o pai tem overflow: hidden sem conteúdo real atrás.

Qual é o melhor valor de desfoque para glassmorphism?

12–20px para a maioria dos trabalhos de UI. Abaixo de 8px parece uma sobreposição tingida; acima de 30px o fundo fica irreconhecível.

O glassmorphism funciona no Safari?

Sim, mas só se incluir tanto backdrop-filter quanto -webkit-backdrop-filter. O gerador acima inclui ambos automaticamente.

Glassmorphism vs neumorphism — qual é a diferença?

Glassmorphism é transparente e desfocado. Neumorphism é opaco e em relevo — sombras suaves fazem o elemento parecer moldado do mesmo material que o pai.

Por que meu cartão de vidro parece cinza e sem vida?

Adicione backdrop-filter: blur(16px) saturate(180%) e certifique-se de que há cor atrás do vidro. Um cartão sobre fundo branco ou preto sempre parecerá cinza.

O glassmorphism é acessível?

Pode ser com cuidado. Sempre cumpra o contraste WCAG 4.5:1. Para usuários com prefers-reduced-transparency, use uma superfície sólida como alternativa.