Glassmorphism
Visual LanguageA design style featuring translucent, frosted-glass elements with blur effects, creating a sense of depth through transparency and layered surfaces.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Glassmorphism coming soon.
How It Works in Apps/Websites
Glassmorphism creates the illusion of frosted glass UI elements floating above colorful backgrounds. Key properties: background blur (backdrop-filter: blur), semi-transparent background (rgba with alpha), subtle border (light border adds definition), and shadow for elevation. Works best over colorful or gradient backgrounds.
How AI Interprets This Term
When you say 'glassmorphism', AI expects: elements with frosted glass appearance - semi-transparent white/gray background (rgba(255,255,255,0.2)), strong backdrop blur (10-20px), subtle white border, soft shadow. Behind it, a colorful gradient or image that shows through blurred.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a glassmorphism card floating over a gradient background
Design a glassmorphism login card: background rgba(255,255,255,0.15), backdrop-filter blur(12px), 1px white/30% border, 20px border radius, subtle shadow. Place over purple-to-blue gradient background. White text with slight shadow for readability.
Show the same card in glassmorphism vs neumorphism vs flat design styles
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Modern, premium UI designs
- •Cards and modals over imagery
- •Creative/portfolio sites
- •Music/media applications
When NOT to Use
- •Text-heavy interfaces (readability)
- •Performance-critical applications
- •Accessibility-focused designs
- •Browsers without backdrop-filter
Related Terms
Card
A contained, flexible component that groups related information and actions, typically with a border, shadow, or background that visually separates it from the page.
Neumorphism
A design style combining flat design with subtle 3D effects, using soft shadows to create elements that appear to extrude from or sink into the background.