Shadow

The contact shadow that sets glass into the page.

Glass with no shadow floats flat on the page. LiquidGlassShadow is the soft dark band that hugs the rim and pools underneath, so the surface reads as sitting in the page rather than pasted on it. Every component that ships with a tuned look already wears one.

Where it goes#

Almost always on the style, as appearance.shadow — the lens then wraps itself in it, at its own corner radius and its own live stretch, and a visibility: false takes the shadow away with the glass:

LiquidGlassLens(
  style: const LiquidGlassStyle(
    appearance: LiquidGlassAppearance(
      shadow: LiquidGlassShadow(blur: 3.5, opacity: 0.2),
    ),
  ),
  child: myContent,
)

It is also a plain widget, and as a widget it is a parent of the glass — never its child:

LiquidGlassShadow(
  child: LiquidGlassLens(style: myStyle, child: myContent),
)

How the shape is made#

The shadow is cast by a ring, not by the surface itself: an outer capsule pushed out, minus an inner one pulled in, so only a band straddling the rim casts anything and the middle stays clear. That ring is displaced downward by offset (blur + 2 by default) and blurred — the upper arc lands just inside the top rim, the lower arc entirely below the surface. One ring gives both the rim contact and the drop beneath. It composites with BlendMode.multiply, so it darkens what is under it instead of laying flat grey over it.