[csswg-drafts] Apple macOS26 Liquid Glass Effect (#12316)

Karric has just created a new issue for https://github.com/w3c/csswg-drafts:

== Apple macOS26 Liquid Glass Effect ==
Apple introduced Liquid Glass, essentially a light-refracting effect, to create the illusion that the bounding box is a thin piece of high-refractive glass with a rounded-over/tapered/bullnose edge.

I'd like to start a discussion on what it would take for CSS to replicate this effect.

**Existing:**
_Blur_:
backdrop-filter: blur is fine for replicating a frosted glass look

_Rounded Shape:_
border-radius and svgs are fine for controlling the painted shape

_Rim Highlights/Shadows:_
Fairly sure stacked box-shadows can replicate that, and/or pseudo elements with mix-modes, etc.

**Needed:**
_Refraction:_
- Although refraction is a common visual effect that likely deserves its own function, I'd prefer to propose a lower-level approach that can be used for a wider range of open-ended effects.
- Proposing an offset() function for backdrop-filter, where you describe a translation offset per edge. For each to-be painted pixel, the engine would apply the spatial translation to find which pixel to use as source colour. An offset is not enough to simulate refraction, as there's no ray stretching/compression; that's handled by the next new property below. If there's no border-radius set, the corners would have sharp transitions, like a typical border/bevel/faceted crystal. With a border-radius set, the translation is interpolated as expected.
**Example Syntax**:
backdrop-filter: offset(-10px, -5px); // source pixel is 10px/5px outside the bounding box. As-is, the corners would have a hard transition and pixels from the center of what's behind the element are missing (weren't sampled).

_Falloff:_
- Currently, backdrop-filter applies its effect uniformly across the element bounds. Being able to scale the effect from the edge/center would unlock a range of pleasing effects.
**Example Syntax**:
backdrop-filter-falloff:
    < optional 'bounds' / 'square': default 'bounds' >
    < optional max intensity multiplier: default 1 >
    < optional min intensity multiplier: default 0 >
    < falloff description: {inset size: number+unit} {curve: cubic-bezier() OR linear} >
- You could have multiple comma-separated falloffs in a single declaration, their effects are stacked (multiplied).
- the start of the curve/linear is assumed max, the end the min (profile philosophy); normalized to a 1-0 multiplier on the actual paint effect; the leading max/min multipliers are applied on top of these.
- The min point is the box center of the element; but being able to translate that center could be interesting.
- 'square' would treat the element box as though it was a square (same center), masked to the actual paint region.

Later, I might write up a simulation of these properties via canvas pixel manipulation to verify the final appearance.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12316 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 11 June 2025 13:40:15 UTC