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.

Generador CSS Glassmorphism

Ajustes de Tarjeta

Desenfoque 16px

Opacidad 15%

Borde 20%

Radio 20px

Saturación 180%

Color del Vidrio

Color del Texto

Fondo 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: Guía Completa

Glassmorphism es una tendencia de diseño UI que simula el vidrio esmerilado — una superficie semi-transparente con una vista borrosa de lo que hay detrás. Popularizado por Apple macOS Big Sur en 2020, es ahora uno de los estilos más utilizados en interfaces web modernas, dashboards y diseños de apps.

Usa el generador de arriba para ajustar blur, opacidad, borde y radio visualmente, luego copia el CSS completo para tu componente de glassmorphism.

Cómo Usar Este Generador de Glassmorphism

Elige un fondo — Glassmorphism solo funciona sobre un fondo colorido o fotográfico. Prueba los presets Dark, Violet, Ocean, Mint, Sunset o Peach, o usa el tuyo propio.

Ajusta el vidrio — Regula el blur (12–20px es el punto ideal), opacidad (10–25% para vidrio ligero), borde, radio y saturación hasta que el efecto esmerilado se vea correcto.

Copia el CSS — El generador incluye tanto backdrop-filter como -webkit-backdrop-filter para compatibilidad con Safari automáticamente.

El CSS Principal

Glassmorphism requiere solo cuatro propiedades CSS trabajando 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; }

Preguntas Frecuentes

¿Por qué mi glassmorphism no desenfoca el fondo?

Tres causas comunes: (1) el fondo del elemento es demasiado opaco — mantén el alpha por debajo de 0.3; (2) falta -webkit-backdrop-filter para Safari; (3) el padre tiene overflow: hidden sin contenido real detrás.

¿Cuál es el mejor valor de blur para glassmorphism?

12–20px para la mayoría de trabajos de UI. Por debajo de 8px parece una superposición teñida; por encima de 30px el fondo se vuelve irreconocible.

¿Funciona glassmorphism en Safari?

Sí, pero solo si incluyes tanto backdrop-filter como -webkit-backdrop-filter. El generador de arriba incluye ambos automáticamente.

Glassmorphism vs neumorphism — ¿cuál es la diferencia?

Glassmorphism es transparente y borroso. Neumorphism es opaco y en relieve — sombras suaves hacen que el elemento parezca moldeado del mismo material que el padre.

¿Por qué mi tarjeta de vidrio se ve gris y apagada?

Añade backdrop-filter: blur(16px) saturate(180%) y asegúrate de que haya color detrás del vidrio. Una tarjeta sobre fondo blanco o negro siempre se verá gris.

¿Es accesible el glassmorphism?

Puede serlo con cuidado. Siempre cumple el contraste WCAG 4.5:1. Para usuarios con prefers-reduced-transparency, usa una superficie sólida como alternativa.