Menu

Component · controls/content

Liquid glass avatar

Person or entity.

Round avatars with initials or gradient artwork, followed by an overlapping avatar stack over a procedural backdrop.

Copy the prompt

Free

The rules, the spec, the glass code for Web and the checks, in one text.

Works in any AI that can write code.

Or connect your AI once
Material
lens (for initials) or photo inside a lens rim
Profile
convex
Bezel (px)
radius
Displacement (px)
0.5 × radius
Blur (px)
0

Geometry. 28–40 circles, gap 8; stacked groups overlap −8 only when flat

Rules1
  • Overlapping avatar stacks should be flat (no lens on lens).
Anatomy3
  • circle lens
  • photo or initials 12–13 semibold
  • crisp rim
States2
  • rest
  • presence dot

Questions

What material is a liquid glass avatar?

Lens (for initials) or photo inside a lens rim material with a convex edge profile, in the controls/content layer. Person or entity.

How big is a liquid glass avatar?

28–40 circles, gap 8; stacked groups overlap −8 only when flat.

What bezel, displacement and blur does it use?

Bezel radius; displacement 0.5 × radius; blur 0 (px).

Which states does a liquid glass avatar need?

Rest; presence dot.