What Is Glassmorphism? Definition, History & CSS Guide (2026)
Glassmorphism is a UI design trend using frosted-glass effects with CSS backdrop-filter. Learn the history, how to implement it, and browse free glassmorphic UI components.
Lead Developer, UIsen
What Is Glassmorphism?
Glassmorphism (also called glass morphism or glass UI) is a user interface design trend that creates a frosted-glass visual effect using CSS backdrop-filter: blur() combined with semi-transparent backgrounds. The result is a layered, translucent look where background content is visible through a soft blur.
The technique relies on three key CSS properties: backdrop-filter for the blur, background: rgba() for transparency, and border with low opacity for edge definition.
History and Origin
Glassmorphism was popularized by Apple's macOS Big Sur release in 2020, which featured frosted-glass panels throughout the operating system. The design trend was named and documented by Michal Malewicz on the Hype4Academy blog. By 2021, Microsoft adopted similar effects in Windows 11's "Mica" and "Acrylic" materials. In 2026, glassmorphism remains one of the most popular UI design trends, particularly for dashboards, modal dialogs, and card components.
How to Create Glassmorphism in CSS
``css
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
``
Requirements for the effect to work: 1. The element must have a semi-transparent background (not fully opaque) 2. There must be visible content behind the element 3. The parent container needs a colorful or patterned background
Browse glassmorphic components in the UIsen cards collection — filter by the "glassmorphism" tag.
Browser Support
As of 2026, backdrop-filter is supported in all major browsers including Chrome, Firefox, Safari, and Edge. The -webkit-backdrop-filter prefix is still recommended for broader compatibility. Full support reached ~96% of global users according to Can I Use.
Frequently Asked Questions
What is glassmorphism in web design?
Glassmorphism is a UI design trend that creates frosted-glass effects using CSS backdrop-filter: blur() with semi-transparent backgrounds. It produces a layered, translucent look popularized by Apple's macOS Big Sur in 2020.
How do I create a glassmorphic card in CSS?
Apply background: rgba(255,255,255,0.1), backdrop-filter: blur(16px), a thin semi-transparent border, and border-radius. The element must be over a colorful background for the blur effect to be visible.
Related Articles
The Complete Guide to CSS Button Hover Effects (2026)
Learn 10+ CSS button hover effects with code examples: gradient slides, glow effects, 3D press, ripple animations, and more. Includes copy-paste code and accessibility tips.
ComparisonsBest Free UI Component Libraries in 2026 — The Definitive Guide
Compare the top free UI component libraries for 2026 including UIsen, shadcn/ui, Radix, Headless UI, and more. Includes feature comparisons, pros/cons, and use cases for each library.