#avatar CSS effects

5 free, pure-CSS effects match the "avatar" tag. Each is copy-ready and needs no library or build step.

Each row opens with an initial badge that brightens as the message unfolds.

A workspace invitation with a warming avatar and a stacked accept or decline column.

An incoming chat notice whose message text is wiped in from the left beside an avatar.

The name column pairs each entry with a round initial chip in its own tint.

A thread line links round gradient avatars down an activity feed with ages on the right.

Popular tags