Avatar

Circular image elements with glass border and depth, in three sizes.

Preview

Usage

<img class="glass-avatar sm" src="avatar.jpg" alt="User" />
<img class="glass-avatar md" src="avatar.jpg" alt="User" />
<img class="glass-avatar lg" src="avatar.jpg" alt="User" />

Sizes

Modifier	Dimensions
`.sm`	32×32px
`.md`	48×48px
`.lg`	72×72px

CSS Properties

Property	Value
Shape	`border-radius: 50%` (circle)
Border	`1.5px solid var(--glass-border)`
Object Fit	`cover`
Shadow	Specular glare inset + `0 4px 12px` ambient
Display	`inline-block`, `vertical-align: middle`