Applying a Glassmorphism visual direction

You are being asked to apply a Glassmorphism visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.

What “Glassmorphism” means here

Glassmorphism builds surfaces that behave like frosted glass: partially transparent, blurring whatever passes behind them, and edged with a thin band of light where the material catches. The effect communicates layering — you can see that one thing is in front of another because you can see through it. The name was coined in November 2020 for patterns that already existed; the technique itself runs back through macOS Big Sur, iOS 7, and Windows Vista’s Aero Glass. It is an operating-system idiom on loan to the web, which is why its conventions are unusually specific.

Two things make or break this direction, and both are frequently missed. The first is that glass needs something behind it. Over a flat grey background there is nothing to blur, and the panels read as slightly translucent boxes rather than as glass; the background is not decoration here, it is the material the effect is made of. The second is that translucency puts text on an unpredictable surface. A label that reads comfortably over the pale part of a gradient can become unreadable where the gradient darkens, and the only way to know is to check the worst point rather than the average. Most published glassmorphism fails exactly there.

There is a third thing that separates this direction from every other one in this catalogue: it has an official off switch. Operating systems ship a reduce-transparency setting, and the browser exposes it as prefers-reduced-transparency. Some readers have already asked for less of this effect before your page loads. So you are designing two surfaces, not one — the glass, and the opaque interface it becomes when the glass is declined — and the second is authored rather than degraded into.

A working order

1. Build the background first. Soft out-of-focus colour shapes, a broad gradient, or a blurred photograph, with at least two hues. Everything after this is reacting to it.
2. Decide the blur budget — how many surfaces may carry backdrop-filter in one viewport — before placing any of them. It is among the most expensive things you can ask a browser to composite.
3. Place the panels, at most two deep anywhere on screen.
4. Set the glass: blur between 8 and 15 pixels, fill alpha between 0.1 and 0.4, one hairline light border a pixel wide.
5. Separate the reading panels from the decorative ones. Anything carrying more than a paragraph of text stops being glass in the strict sense and takes an opaque fill — see below. Name those panels; the exemption is declared, not improvised.
6. Measure the worst pixel behind every text block and every control.
7. Author the reduced-transparency design, then the reduced-motion behaviour, then the no-backdrop-filter fallback. Three separate conditions, one opaque surface that can serve all three.
8. Scroll it on a mid-range Android phone. This is the step that gets skipped and the one the budget in step 2 exists for.

Recommendations

• Build the background first: soft, out-of-focus colour shapes, a broad gradient, or a blurred photograph. Give it real variation — at least two hues — so there is something worth seeing through the glass.
• Blur between 8 and 15 pixels. Below eight it looks like a rendering artifact rather than frost. At twenty and above the compositing cost rises sharply and nothing further is gained that a reader can see.
• Keep the panel fill barely there — an alpha between roughly ten and forty percent — so the material shows through while the panel still separates from what is behind it.
• Except where the panel carries sustained reading. Accessibility guidance for text-heavy glass panels is an alpha of 0.7 or above, and it is right: contrast over a semi-transparent fill is not computable in the general case, because it depends on content you do not control. Take the opaque fill on reading panels and keep the glass for chrome, controls, and cards. A panel of body text at 0.2 alpha is a legibility problem wearing a style.
• Give every panel a single thin light edge, brighter than its fill and only a pixel wide. That edge is what reads as the cut of the glass, and without it the panel dissolves into the background.
• Limit the stack. Two layers of glass over one another still read as depth; three or more turn into visual mud and stop communicating order.
• Never let a control be a control only because it is translucent. Give it two independent signals — a border meeting 3:1, a text label, a distinct shape — and check that it still reads as interactive with the blur turned off.
• Choose text colours against the worst case. Find the darkest and lightest point of the background that falls under a text block and verify contrast at both, not against the panel’s nominal colour.
• Handle the three off states as design work, not error handling. prefers-reduced-transparency: reduce for readers who asked; prefers-reduced-motion: reduce so nothing about the glass animates for them; and absent backdrop-filter support. One well-chosen opaque palette usually serves all three.

Avoid

• Glass panels over a flat, single-colour background, where the effect has nothing to work with.
• A panel fill so opaque that no background detail is visible through it — outside the reading exemption, which you declare deliberately.
• Blur radii of twenty pixels and above.
• Three or more translucent layers stacked at any point on the screen.
• Text contrast evaluated against the panel’s tint rather than against the background actually showing through it.
• Heavy drop shadows added under the glass to force separation; the light edge and the blur should be doing that work.
• Placing critical small text — labels, values, legal copy — directly over the busiest part of the background.
• An unstated number of blurred surfaces, discovered on a slow device instead of decided in the design.
• Ignoring reduced-transparency, which is the one preference this style is the direct target of.

How to check your own work

Before considering the result finished, look at it and ask:

• Can I see what is behind each panel, blurred? If not, either the blur or the transparency is not actually applied.
• If I replaced the background with a flat grey, would anything remain of the effect? If the answer is no, that is correct — and it means the background deserves as much attention as the panels.
• How many elements are carrying backdrop-filter right now, and did I decide that number? Does it still scroll smoothly on a mid-range Android phone?
• Find the single worst pixel behind each block of text and check the contrast there. If it fails, move the text, take the reading exemption, or change the background under it.
• Is there any panel carrying real prose at a low alpha? That one should be opaque.
• Point at each control and name two reasons a stranger would know it is a control. If there is only one, and it is the fill, it is not discoverable.
• Turn on reduced transparency and look at the result. Is it a design, or is it what happened? Then do the same with reduced motion, and again with backdrop-filter switched off entirely.

Glassmorphism — Specification

Definition

Glassmorphism is a web-interface design style in which surfaces behave like frosted glass: partially transparent, blurring the content behind them, and edged with a thin band of light. Layer order is communicated by seeing through one surface to another. The style depends on a background with real chromatic variation, and it is only shippable when text contrast is verified against the worst-case background pixel rather than against the panel’s nominal fill.

What the glass is for is the part most often missed. Translucency is not a material effect here but a functional one: it lets the reader see the context behind an element — what is underneath, what a panel is covering, where it sits in the stack. That is the property the designer who named the style uses to separate it from its neighbours, since skeuomorphism and claymorphism imitate a material and add nothing a reader can use. It is also the test that separates real glass from decorative blur: if nothing behind the panel is worth seeing, the effect is a texture wearing the style’s name.

The name is recent and the technique is not. Michal Malewicz coined the term in November 2020, grouping frosted-glass patterns that already existed under one word; the effect itself runs back through macOS Big Sur in 2020, iOS 7 in 2013, and Windows Vista’s Aero Glass in 2006. It is an operating-system idiom that arrived on the web, which is why its conventions are so specific and why the platform ships an accessibility preference aimed directly at it.

That preference is the style’s defining constraint, and it makes this the one entry in the catalogue whose aesthetic has an official off switch. Translucency is a stated accessibility burden for some readers, and both the operating system and the browser expose a request to reduce it. A glassmorphic interface therefore has two designs, not one: the glass, and the legible surface it becomes when the glass is declined. Neither is a fallback for the other — a design that only works with the blur on is unfinished.

Core principles

• The background is the material. The effect is produced by what shows through the glass, so the background carries as much design weight as the panels.
• Translucency carries context, not just order. A front surface reveals a blurred version of what sits behind it, so the reader learns both the depth of the stack and what the panel is covering. This is the functional property that distinguishes the style from an imitated material.
• Light defines the edge. A single thin bright border reads as the cut of the glass and keeps the panel from dissolving into its surroundings.
• Depth is shallow by design. Two layers read as order; more read as mud.
• Contrast is measured at the worst point. Text sits on a variable surface, so legibility is evaluated against the least favorable pixel under it.
• The glass is refusable. The interface has a designed appearance for readers who have asked for less transparency, and it is designed rather than degraded into.
• Blur is a budget. Backdrop blur is among the most expensive things a browser can be asked to composite, so the number of glass surfaces is a decision rather than a consequence.

Visual characteristics

• Translucent panels with a visibly blurred background showing through.
• A background of soft gradient fields, out-of-focus color shapes, or a blurred photograph, in at least two hues.
• A single hairline border on each panel, lighter than the panel fill.
• Low-opacity panel fills that tint rather than obscure, except where a panel carries sustained reading.
• At most two overlapping glass layers at any point on screen.
• Depth expressed by transparency and edge light rather than by heavy shadow.
• Controls whose boundaries survive the translucency — a glass button is still shaped, labelled, and edged like a button.
• Bright gradients showing through the glass, and edges that catch light rather than sitting flat.
• Clean, minimal sans-serif typography, which the style’s own surveys report as part of its idiom.

Rules

1. Real backdrop blur, within a bounded radius. Each glass surface blurs what is behind it, at a radius between 8px and 15px. Acceptance criterion: Every glass panel has a computed backdrop-filter whose blur radius is at least 8px and no more than 15px. Below 8px the effect reads as a rendering artifact; at 20px and above the cost rises sharply for no further legible gain.

2. Chromatic background behind the glass. The region under each panel has something worth seeing through it. Acceptance criterion: Sampling the background region beneath each panel yields at least two distinct hues or a gradient; it does not resolve to a single flat color.

3. Bounded transparency, raised for reading. The panel fill tints without obscuring, except where the panel carries sustained text. Acceptance criterion: The alpha channel of each panel’s computed background-color falls between 0.1 and 0.4 inclusive. A panel carrying more than one paragraph of body text is exempt from the upper bound and instead uses an alpha of 0.7 or greater; each such panel is named in the design’s documentation.

4. Hairline light edge. Each panel is cut from its surroundings by a single bright border. Acceptance criterion: Every panel has a 1px border whose color has an alpha between 0.1 and 0.5 and is lighter than the panel’s own fill.

5. Shallow stacking. Glass does not accumulate into unreadable depth. Acceptance criterion: At no point on the rendered screen do more than two translucent panels overlap.

6. Worst-case contrast. Text legibility is verified against the actual background, not an average. Acceptance criterion: Every text element over glass measures at least 4.5:1 against the least favorable pixel of the blurred background beneath it, and every essential non-text control measures at least 3:1 against its own worst case.

7. Defined degradation. The interface remains legible where backdrop blur is unsupported. Acceptance criterion: With backdrop-filter disabled, each panel renders an opaque background that preserves the same text contrast ratios required by Rule 6.

8. A declared blur budget. The number of simultaneously composited glass surfaces is decided rather than discovered. Acceptance criterion: The maximum number of elements carrying backdrop-filter in any single viewport is stated in the design’s documentation, the rendered page does not exceed it, and the page holds its frame budget when scrolled on a mid-range Android device.

9. Reduced transparency is honoured. A reader who has asked the system for less transparency gets a designed opaque interface. Acceptance criterion: Under prefers-reduced-transparency: reduce, every glass panel renders an opaque fill with no backdrop-filter, and the resulting surface satisfies Rules 4, 6, and 11 without further change.

10. Reduced motion is honoured. Glass does not animate for a reader who has asked it not to. Acceptance criterion: Under prefers-reduced-motion: reduce, no blur radius, panel opacity, or background gradient position is animated or transitioned.

11. Controls are discoverable by more than their fill. A control’s boundary does not rest on translucency alone. Acceptance criterion: Every interactive element carries at least two of: a border meeting 3:1 against its surroundings, a text label, and a shape distinct from the surrounding panels — and it remains identifiable as a control with backdrop-filter disabled.

12. The glass shows something worth seeing. What sits behind a panel is content or context the reader benefits from, not a texture placed there to justify the blur. Acceptance criterion: For each glass panel, what appears behind it can be named — a photograph, a chart, a map, a scrolling list, a deliberate colour field belonging to the page. A panel whose backdrop exists only so the panel has something to blur is decoration and is made opaque.

Avoid

• Glass panels over a flat, single-color background, where no material shows through.
• Panel fills opaque enough that no background detail is visible, producing a tinted card rather than glass — outside the reading exemption in Rule 3, which is declared rather than assumed.
• Blur radii of 20px and above, which cost sharply more to composite and add nothing legible.
• Three or more translucent layers overlapping at any screen position.
• Contrast evaluated against the panel’s nominal tint rather than the background showing through it.
• Heavy drop shadows added beneath panels to force separation that the edge and blur should provide.
• Critical small text placed over the busiest region of the background.
• An unstated number of backdrop-filter surfaces, discovered on a mid-range device rather than decided in the design.
• Treating the reduced-transparency appearance as a degradation to be tolerated rather than a second design to be authored.
• Blur applied where nothing behind it is worth seeing, which imitates the material without the property that makes the style a category.

Acceptance criteria

• Rule 1: Every glass panel has a backdrop blur between 8px and 15px.
• Rule 2: The background beneath each panel contains at least two hues or a gradient.
• Rule 3: Every panel fill has an alpha between 0.1 and 0.4, or 0.7 and above where declared as a reading panel.
• Rule 4: Every panel has a 1px border, lighter than its fill, with alpha between 0.1 and 0.5.
• Rule 5: No more than two glass layers overlap at any point.
• Rule 6: All text over glass meets 4.5:1, and essential controls 3:1, against the worst-case pixel.
• Rule 7: With backdrop blur disabled, panels render opaque and contrast is preserved.
• Rule 8: The count of backdrop-filter surfaces is documented, respected, and holds frame budget on mid-range hardware.
• Rule 9: Under reduced transparency, panels render opaque and still satisfy Rules 4, 6, and 11.
• Rule 10: Under reduced motion, no blur, opacity, or gradient position animates.
• Rule 11: Every control carries two independent affordance signals and survives blur being disabled.
• Rule 12: What sits behind each glass panel can be named as content or context, not filler.

Blocking failures

• Any text over glass falls below 4.5:1 against the worst-case pixel behind it, which is the most common failure of this style and makes the interface unusable for part of its audience.
• No fallback exists for absent backdrop-filter support, so the interface renders as transparent panels over an unblurred background and content becomes unreadable.
• A control’s only boundary is its translucent fill against a background of similar luminance, leaving the control undiscoverable.
• prefers-reduced-transparency: reduce is ignored, so a reader who has asked the operating system for less transparency receives the full effect anyway.

These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.

Responsive adaptation guidance

• Blur radius (Rule 1) may reduce at narrow viewports for performance but never below 8px, since a smaller radius reads as a rendering artifact rather than as glass.
• The blur budget (Rule 8) tightens at narrow viewports rather than carrying over, because the devices reaching those widths are typically the least able to composite the effect. Reduce the number of glass surfaces, not the radius, once the radius is at its floor.
• The background (Rule 2) is re-composed rather than scaled at narrow widths, so each panel still has chromatic variation beneath it after reflow.
• Stacking (Rule 5) tends to resolve naturally as layouts collapse to one column; where it does not, layers are removed rather than made more transparent.
• Rule 6 is re-measured after every reflow without exception, because a panel that moves to a different part of the background sits over different pixels and its contrast result does not carry over.
• A panel that gains the reading exemption in Rule 3 keeps it at every width, and a panel that acquires sustained text only after a narrow-width reflow acquires the exemption with it.
• The fallback required by Rule 7 and the two preference rules (9 and 10) apply identically at every breakpoint. A preference is not a viewport.