Demo
Frostpane
Liquid Glass
Adjust the controls to see real-time changes to the frosted glass effect.
Equivalent CSS
backdrop-filter: blur(10px) saturate(180%);
background: rgba(166, 153, 191, 0.25);
border-radius: 16px;At the defaults the white copy measures about 4.7:1 over the center of the gradient, then slips under 4.5:1 once opacity passes 30% or the panel crosses the pink end. One tint can’t hold AA everywhere, which is why Frostpane ships separate light and dark recipes.