Material Design CSS Avatar Examples

Clean, circular avatars following Google's Material Design principles with elevation shadows and Material colors.
Click any avatar to copy the CSS to your clipboard.

#10

#11

#12

#13

#14

#15

#16

#17

#18

Related Tools

Create your own custom avatar designs with these generators:

CSS Border Radius Generator

Create rounded avatars

CSS Box Shadow Generator

Add shadows to avatars

← See all avatar styles

Explore Other Styles

Browse avatar examples in different design styles:

Neumorphism

Soft UI with subtle shadows

Minimal

Clean and simple

Neubrutalism

Bold borders and stark contrast

Extract any avatar style in 2 clicks

Click any element on any website to get its avatar styles instantly. Frontend Hero gives you 10+ essential developer tools in one browser extension.

Get Frontend Hero now →