Translucent UI is usually discussed as a look. That makes it hard to review, hard to lint, and easy to get wrong in production. A glass surface isn’t a mood — it’s a computable translucency system defined by five checkable properties: its layer (control/nav vs content), backdrop blur radius, tint alpha, text contrast across the worst-case backdrop, and a reduced-transparency fallback — and an agent can read all five from computed styles.
This post covers how that works in practice. The reference point for the first property is Apple’s Human Interface Guidelines on Materials, which describes Liquid Glass as a material for the functional layer of an interface. Liquid Glass is an Apple platform material, not a CSS feature or a web standard, so this post treats it as a design rule set and uses the web’s own CSS to check the parts that can be checked. Glassmorphism 2.0 has no single specification; the term is used loosely for translucent, blurred UI on the web. We use it here only as a contrast point.
What an Agent Can Actually Read
Computed styles tell you what the browser resolved for an element. For translucency, that covers the background color with its alpha channel, the backdrop-filter value, the text color, and the media-dependent rules that currently apply. The MDN reference for backdrop-filter explains that the property applies to what sits behind the element, not to the element’s own content. That single fact shapes everything else. For the effect to show anything, the element’s own background has to be transparent or semi-transparent. MDN’s example uses rgb(255 255 255 / 0.2).
Computed styles cannot tell you what the backdrop actually looks like at a given pixel, whether a control is transient, or whether the design intent was right. An agent can check the declared and resolved values, and it can flag combinations that are structurally impossible. It cannot judge taste, and it cannot see the real rendered backdrop. Keep that boundary in mind through the rest of the post.
The Five Computable Properties
1. Layer
The first question is where the surface sits. Apple’s guidance places Liquid Glass in a distinct functional layer for controls and navigation, such as tab bars and sidebars, floating above the content. It also says not to use Liquid Glass in the content layer, and to use the effect sparingly.
Computed styles do not carry semantic layer information, so the agent needs a proxy. Use the element’s role (nav, tablist, toolbar), a data-glass attribute set by the component, or its ancestry. A check passes when glass appears only on control or navigation elements and never on content. Transient controls are a stated exception, and the exception list should be explicit in configuration, not inferred by the agent.
2. Backdrop Blur Radius
The blur is read from the computed backdrop-filter value, which should resolve to a blur() function with a length. Pass the value through the team’s token bounds. The check is simple: the radius must fall between a defined minimum and maximum. Those bounds belong in your token file, not in a blog post or in a platform’s default values. If your tokens are written as var() references, the computed value shows the resolved length, which is what the check should read.
3. Tint Alpha
The tint is the alpha channel of the element’s background color. The condition is strict: 0 < alpha < 1. An alpha of 0 means there is no tint at all, and an alpha of 1 hides the backdrop completely, so the glass effect has no visible effect. A background with no alpha channel resolves to an alpha of 1 and fails the check, which is a useful side effect.
4. Text Contrast Across the Worst-Case Backdrop
Contrast is the property computed styles cannot fully answer. The agent can composite the tint over the two endpoints it has, pure black (#000) and pure white (#fff), and compare the text color against each composite. The minimum ratio is the result. The WCAG baseline (not re-fetched for this post) is 4.5:1 for normal text and 3:1 for large text.
Compositing is standard alpha blending: each channel becomes alpha × tint + (1 − alpha) × backdrop.
5. Reduced-Transparency Fallback
The fallback is a media rule keyed to the prefers-reduced-transparency media feature. When the user has asked for less transparency, every glass selector should swap to an opaque surface and remove backdrop-filter. The check is that a matching rule exists for every glass selector. Because the media rule only applies when the query matches, an agent reading computed styles in one state sees only one branch, so it has to check the rule in source as well as the resolved state.
The Five Checks at a Glance
Table 1: Translucency checks an agent can run
| # | Check | What to read | Pass condition | Basis |
|---|---|---|---|---|
| 1 | Layer | Role, data-glass attribute, ancestry |
Glass only on control/nav; none in content; transient controls on an explicit list | Apple HIG, Materials |
| 2 | Blur radius | Computed backdrop-filter |
blur() length within token min/max |
MDN backdrop-filter |
| 3 | Tint alpha | Computed background alpha | 0 < alpha < 1 |
MDN example; alpha compositing |
| 4 | Contrast | Tint composited over #000 and #fff, against text color |
≥ 4.5:1 normal text; ≥ 3:1 large text | WCAG baseline (named only; not re-fetched) |
| 5 | Fallback | Source media rule for prefers-reduced-transparency |
Each glass selector has an opaque, no-blur override | Apple HIG, Materials (accessibility settings) |
Liquid Glass vs Glassmorphism 2.0
Table 2: Two different things often discussed under one name
| Dimension | Liquid Glass (Apple) | Glassmorphism 2.0 (informal) |
|---|---|---|
| What it is | Apple platform material | Loose label for blurred, translucent web UI; no single spec |
| Where it lives | Functional layer for controls and navigation, floating above content | Anywhere a designer applies it; commonly cards and panels |
| Content-layer rule | Do not use in the content layer | No standard rule; team-defined |
| Variants | Regular and clear; clear only over visually rich backgrounds | Usually one treatment per team |
| Accessibility behavior | Appearance adapts under reduced-transparency and increased-contrast settings | Depends on the implementation |
| Computable from CSS? | Partly: the layer, blur, and alpha can be checked; the platform’s own rendering cannot | Yes, as CSS properties, but the rules are yours to define |
The practical takeaway: a Liquid Glass-style rule set is a layering policy, and a generic glassmorphism treatment is only a visual recipe. Only the first can be enforced by a placement rule.
Worked Example: An Illustrative Tab Bar
The following example is illustrative. The values are constructed for teaching and were not measured. The 12px blur is a hypothetical team token, not an Apple value.
/* ILLUSTRATIVE ONLY: constructed values, not measured, not Apple values */
.tab-bar[data-glass="nav"] {
background-color: rgba(255, 255, 255, 0.6); /* tint alpha 0.6: passes 0 < a < 1 */
backdrop-filter: blur(12px); /* hypothetical team token */
color: #000;
}
@media (prefers-reduced-transparency: reduce) {
.tab-bar[data-glass="nav"] {
background-color: #f2f2f2; /* opaque fallback */
backdrop-filter: none;
}
}An agent reading this would run the following sketch against the rendered element:
const el = document.querySelector('[data-glass]');
const cs = getComputedStyle(el);
// Illustrative only. Some WebKit builds expose only -webkit-backdrop-filter, and computed colors can serialize as color(srgb ...) or omit alpha when opaque.
const blurPx = Number(cs.backdropFilter.match(/blur\(([\d.]+)px\)/)?.[1]);
const alpha = Number(cs.backgroundColor.match(/,\s*([\d.]+)\)$/)?.[1] ?? 1);
const blurOk = blurPx >= TOKENS.blur.min && blurPx <= TOKENS.blur.max;
const alphaOk = alpha > 0 && alpha < 1;For contrast, the composites over the two endpoints (illustrative arithmetic):
- Over
#fff: the tint is white on white, so the composite is#fff. Black text gives about 21:1. - Over
#000: the composite is0.6 × 255 = 153, or#999. Its relative luminance is about 0.32, so black text gives about 7.4:1.
The worst case is 7.4:1, which clears the 4.5:1 normal-text baseline. Now compare a tint of 0.2, the value in MDN’s example and not a recommendation. Over #000 the composite is #333, and black text drops to about 1.7:1. The same component fails with a lower tint. This is why the contrast check has to run on the composite, not on the declared color.
The endpoints are a floor, not a guarantee. Real content behind glass includes mid-tones, saturated colors, and text, and none of those are represented by two endpoints.
Where Computed Styles Mislead
- The backdrop is invisible. The blur value tells you nothing about what is being blurred. A tab bar over a flat color and one over a busy photo can have identical computed styles.
- Gradients and overlays are missed.
backgroundColordoes not includebackground-image, pseudo-element overlays, or scrims. A surface can have an alpha of 0.6 and still have a fully opaque gradient on top. - Layer is a guess. A
divstyled to look like a tab bar has no navigation role unless the component supplies one. The proxy is only as good as the component’s markup. - One media state is visible. Computed styles reflect the current media state. The fallback has to be checked in source, and ideally in both states.
- Ancestors matter. Properties on ancestor elements can change what the element samples behind it. That isn’t visible from the element’s own computed style.
- Cost is invisible. Blur is expensive, especially when stacked. Computed styles say nothing about performance, so budget it separately.
Decision Rules for Design Systems
- Glass tokens may be applied only to elements tagged as control or navigation. Content-layer use fails lint. Transient controls go on an explicit exception list.
- A blur must resolve to a value inside the token min/max. Values outside the range fail.
- Glass background alpha must satisfy
0 < alpha < 1. A background with no alpha channel fails. - Text on glass must reach 4.5:1 normal and 3:1 large against the tint composited over
#000and#fff. Use the minimum of the two. - Every glass selector must have a
prefers-reduced-transparencyrule that uses an opaque surface and removesbackdrop-filter.
These rules check declared and resolved values. They do not replace review of real screens against real content.
FAQ
Is Liquid Glass a CSS feature I can use on the web?
No. Liquid Glass is an Apple platform material described in the Human Interface Guidelines. On the web you work with CSS properties such as backdrop-filter and your own tokens. The rules can be borrowed; the material cannot be imported.
Where do the 4.5:1 and 3:1 numbers come from? They are the WCAG baseline for normal and large text. This post names that baseline and did not re-fetch the specification for this run, so check the current wording before citing it in a formal review.
Can an agent fully verify contrast from computed styles? No. It can verify contrast against the composites of the two endpoints, which is a useful floor. It cannot see the real backdrop. Pair the check with review of rendered screens that include real content.
Should I rely on the reduced-transparency media feature for every user? Not without checking support. Browser and platform support for this media feature varies, and this guide did not verify current support status. Write the fallback rule regardless, and confirm support in the browsers you target before relying on it for behavior.
Do I need one blur value across the whole system? Not necessarily. You need bounds. A token range lets the agent enforce consistency without forcing one number everywhere.
The Bottom Line
Glass is a set of decisions, not a mood. Placement, blur, tint, contrast, and fallback can each be stated as a rule, and most can be checked from computed styles. Contrast is the one that needs the most care, because the worst case depends on content the styles don’t describe. Use Apple’s guidance for where glass belongs, use MDN for what the CSS does, and treat the numbers in your token file as yours to justify.
How This Guide Was Built
This review is based on official documentation, specifications and MDN reference data — we did not run these effects in a rendering browser.
The two links in this post, Apple’s Human Interface Guidelines on Materials and the MDN reference for backdrop-filter, were checked for HTTP status (both 200) and their content was read. The WCAG 4.5:1 and 3:1 baseline was not re-fetched. The tab-bar example uses constructed values for illustration only; its numbers were not measured. Browser support for the reduced-transparency media feature was not verified for this post.