Generador de glassmorphism

Diseña y previsualiza estilos glassmorphic visuales y obtén el código CSS limpio.

Blur: 16px

Opacity: 25%

Frosted Glass Live Canvas

Next DevUtilities

Glass Card

Subsurface frosted glass card with adaptive backdrop-filter blur and vibrant saturation boost.

16px blur25% opacity

Generated CSS & Tailwind Classes

Pure CSS Output

background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(16px) saturate(150%);
-webkit-backdrop-filter: blur(16px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.20);
border-radius: 20px;
box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15);

Tailwind CSS Classes

bg-white/[0.25] backdrop-blur-[16px] border border-white/[0.20] rounded-[20px] shadow-lg backdrop-saturate-[150%]

Fine-tune Backdrop & Surface Controls

Backdrop Blur:16px

Background Opacity:25%

Border Opacity:20%

Border Radius:20px

Saturation Boost:150%

Tint Color:#ffffff

Generador de glassmorphism

Frosted Glass Live Canvas

Generated CSS & Tailwind Classes

Fine-tune Backdrop & Surface Controls

Curated Glassmorphism Styles

Generador de glassmorphism

Frosted Glass Live Canvas

Generated CSS & Tailwind Classes

Fine-tune Backdrop & Surface Controls

Curated Glassmorphism Styles