Glassmorphism & Frosted Glass UI Styles

Glassmorphism layers translucent surfaces over rich backgrounds — frosted blur, thin light borders, and careful elevation that make interfaces feel physical and premium. Done badly it turns to mud; these styles get the recipe right, with tuned backdrop blur, contrast-safe text on glass, and tokens that keep every layer legible in both light and dark.

4 stylesGlassmorphism UI Prompts →

Claymorphism

粘土拟态

A soft clay-textured design that creates adorable 3D effects through extra-large border radii, combined inner and outer shadows, and gentle gradients, ideal for children's apps and playful products.

MarketingSaaS / B2B

glassmorphic

Fluent Design

流利设计

Microsoft's design system integrating five key elements -- light, depth, motion, material, and scale -- to create natural and intuitive cross-platform experiences.

DashboardAdmin

brand-inspiredglassmorphic

Glassmorphism

玻璃拟态

Premium frosted glass inspired by Apple Liquid Glass. High gaussian blur, saturation boost, multi-layer inner glow and chromatic edges create the sensation of light flowing through real glass.

SaaS / B2BMarketing

glassmorphic

macOS Vibrancy

macOS 毛玻璃

Native macOS dark vibrancy style. Multi-layer dark gray panels, system-level backdrop-blur, and extreme restraint create the calm, professional feel of a desktop application.

SaaS / B2BDashboard

dark-themeglassmorphic