MixavisdocsHomeCommunityOpen editor
DOCS/Effects

Glassmorphism

Dimensional

Frosted glass — backdrop blur with tint, rim and shimmer.

Blurs whatever is behind the layer and tints it, producing the frosted panel look. A bright rim along the top edge and an optional shimmer sell the material.

Because it reads the backdrop, it only works when there is something behind it. Over an empty canvas it is a flat tint.

What it looks like
Before
Glassmorphism
Same artwork either side, so the difference you see is the effect. Built with the same SVG-filter primitives the product uses, but tuned for legibility at this size — treat it as a faithful illustration of the behaviour rather than a pixel-exact capture of the editor.

When to reach for it#

  • UI panels and cards over imagery.
  • Modern OS-style overlays.
  • Any panel that should let the background through without losing legibility.

Parameters#

Backdrop blurblur#

How much the background is softened. High blur guarantees text legibility on top; low blur keeps more of the background readable.

Tint / opacitytint#

Colour laid over the blurred backdrop. A little white reads as frosted; a little black reads as smoked.

Rimrim#

A bright hairline on the lit edge. This is what makes it read as a physical pane rather than a blurred rectangle — do not skip it.

Shimmershimmer#

A slow travelling highlight. Subtle values only.

Things that catch people out#

Nothing behind it means nothing to blur

Put artwork underneath before judging the settings.

See also#

shadersLiquid Glass shader — real refraction→

Something here wrong or missing? Tell us in the community.