2020–present
Glassmorphism
Depth through transparency. Structure through blur. The interface as frosted window.
Principles
Transparency as Depth
A solid surface hides what's behind it. A glass surface reveals it — blurred, softened, but present. This creates depth without shadow, hierarchy without weight.
Every panel on this page is a window. The background bleeds through, reminding you that layers exist. Nothing is opaque. Nothing is isolated.
Blur as Boundary
How do you separate foreground from background without a hard edge? You blur the boundary. The frosted glass effect creates a soft division — present but not aggressive.
This is the opposite of Art Deco's sharp lines. Here, boundaries are suggestions, not declarations.
Light and Glow
Glass catches light. It refracts, reflects, glows at the edges. In this style, borders are not lines — they are light leaks. Subtle white or colored borders at partial opacity simulate the way real glass catches ambient light.
The accent color doesn't sit flat — it radiates. Hover states glow. Active elements pulse.
Rounded Everything
Sharp corners belong to the physical world — to cut glass, to machined metal. Digital glass has no manufacturing constraints. Every corner is rounded, every edge is soft.
The radius is generous but not extreme. It says approachable, not childish.
Why This Style Exists
Glassmorphism has no single inventor and no founding manifesto. It emerged gradually from Apple's iOS 7 (2013), matured through Microsoft's Fluent Design acrylic material (2017), and crystallized as a named trend around 2020.
The style answers a specific problem: how do you create hierarchy in a flat design world? Flat design removed shadows and depth — glassmorphism brings them back, but through transparency rather than elevation.
Where it appeared
- Apple's Control Center and notification panels — frosted backgrounds revealing the app beneath
- Microsoft's Fluent Design acrylic material — translucent navigation surfaces
- Dribbble and Behance portfolios (2020–2022) — the style's explosion as a design trend
Legacy
Glassmorphism proved that flat design was not the final answer. Depth, hierarchy, and visual richness can coexist with modern simplicity.
Its influence continues in every major design system — Apple's visionOS, Windows 11's Mica material, and countless SaaS dashboards that layer translucent panels over gradient backgrounds.
Typography in Glass
Glassmorphism typography is clean, modern, and invisible. The font should never compete with the translucent surfaces — it should feel like text floating on glass.
Weight contrast replaces decorative fonts. A bold heading and a light body create hierarchy without needing different typefaces.
- Single font family — one typeface at multiple weights. Simplicity is the point.
- Weight as hierarchy — semibold headings, regular body. No decorative fonts.
- Negative letter-spacing on headings — tight, modern, confident.
- High line-height on body — air and readability on translucent backgrounds.
Colors Through Glass
Glassmorphism color is not about the surface — it's about what shows through the surface. The background gradient defines the mood. The glass panels are always near-transparent.
Every palette here shares the same principle: a rich, dark or gradient background with translucent white or colored overlays.
- Dark backgrounds — glass needs contrast to be visible. Light-on-light glass disappears.
- RGBA surfaces — never fully opaque. The background must bleed through.
- Single accent color — used sparingly for glow effects, borders, and interactive states.
Shapes
Glassmorphism has one shape rule: everything is rounded. Not aggressively — not pill-shaped — but consistently soft. The border-radius is the signature.
There are no ornaments in this style. No dividers, no decorative elements. The glass panels themselves are the decoration. Their translucency, their borders catching light, their layered depth — that is all the ornament you need.
The shape language is minimal: rectangles with rounded corners, stacked at slight offsets to create depth. Complexity comes from layering, not from geometry.
- Generous border-radius — 12px to 24px. Enough to feel soft, not enough to feel childish.
- No ornament — the glass effect is the ornament. Adding decorative elements would compete with the translucency.
- Layered panels — depth comes from overlapping translucent surfaces, not from shadows or borders.
- Subtle borders — 1px at low opacity. They catch light like the edge of real glass.
Contrast
Glassmorphism contrast is layered and atmospheric. Not the binary black/white of Bauhaus or the dramatic gold-on-black of Art Deco. Here, contrast is created through depth — foreground panels against background gradients, light borders against dark surfaces.
Opaque and translucent
Text is fully opaque. Surfaces are translucent. This single contrast creates the entire illusion — solid content floating on glass. The text anchors the eye; the surface reveals what lies beneath.
Sharp and blurred
Text is pixel-sharp. Backgrounds are blurred. The contrast between crisp foreground and soft background creates depth without traditional shadow or perspective.
Glow and dark
The accent color glows — borders at low opacity, hover states that radiate. Against the dark background, these glows feel like light sources. The contrast is not between colors but between lit and unlit.
Rhythm
Glassmorphism rhythm is floating and layered. Panels appear at different depths, creating a z-axis rhythm that other styles achieve only on the x and y axes.
The layered stack
Panels overlap slightly or sit at different visual depths. The rhythm is not left-to-right or top-to-bottom — it is near-to-far. Each panel is a layer in a stack of glass.
Generous breathing
Panels need space between them — not for visual rhythm but for the background to show through. The gaps are the background. Without them, the glass illusion collapses into solid blocks.
Consistent blur
Every panel has the same blur radius. This consistency creates a steady visual 'hum' — the eye learns to expect the same level of translucency and trusts the system.
Hierarchy
Glassmorphism hierarchy is achieved through opacity and elevation. More opaque = more important. More blur = further back. The z-axis becomes the primary hierarchical tool.
Fully opaque text
Text is always 100% opaque — white or near-white on dark backgrounds. It is the most 'present' element, the closest to the viewer. Nothing competes with it.
The glass panel
Semi-transparent surfaces (5–10% white) create the middle layer. They group content, define boundaries, and provide the frosted-glass effect. They are containers, not content.
The background
The deepest layer — a gradient or solid color that shows through the glass. It sets the mood but never demands attention. It is atmosphere, not information.
The border glow
Subtle borders at 10–15% opacity catch light like real glass edges. They are the quietest hierarchical element — barely visible, but essential for defining where one panel ends and another begins.
Signature Traits
Glassmorphism is identified by its material illusion — the sense that you are looking through frosted glass at a world behind the interface.
The blur
`backdrop-filter: blur()` is the technical foundation. Without it, glassmorphism is just semi-transparent panels — which is not the same thing. The blur transforms transparency into material. It is the difference between a window and frosted glass.
The border glow
A 1px border at rgba(255,255,255,0.15) — barely visible, but it catches the eye like light on a glass edge. This tiny detail is what separates glassmorphism from generic dark-mode design.
Dark backgrounds
Glass needs contrast to be visible. On a white background, translucent white panels disappear. The dark background is not a preference — it is a requirement. It is the darkness that makes the glass legible.
The z-axis
Most styles work in two dimensions — x (horizontal) and y (vertical). Glassmorphism adds a third: z (depth). Panels float at different distances from the viewer. This is its unique contribution to the vocabulary of screen design.
Space
Space in glassmorphism is air between panes. The gaps between panels are where the background gradient shows through — they are not empty, they are the deepest layer made visible.
Generous padding inside panels creates breathing room for text on translucent surfaces. Tight spacing would make the blur unreadable.
Light
Light in glassmorphism is not theatrical — it is ambient. A soft gradient in the background, a subtle glow on the accent color, a barely-visible radial highlight at the top of each panel.
The vignette here is gentle — just enough to focus attention without creating drama. This is not a stage. It is a window.
How This Style Breaks
Glass is fragile — and so is glassmorphism. Small mistakes shatter the illusion.
Too much transparency
If the background shows through too clearly, the panel stops being a surface and becomes invisible. The blur must be strong enough to create a boundary while remaining translucent.
Light background without strong borders
Glass on a light background needs visible edges — thicker borders, stronger shadows. Without them, panels merge into the background and hierarchy collapses.
Sharp corners
A single sharp corner breaks the entire illusion. Real frosted glass has no sharp edges — and neither should digital glass.
Decorative ornaments
Glassmorphism's beauty is in its restraint. Adding icons, dividers, or decorative elements to glass panels is like putting stickers on a window — it defeats the purpose of transparency.