50+ CSS Avatars

Last Updated on by in CSS Examples
CSS Avatars

Welcome! If you’re on the lookout for a variety of captivating CSS avatars to spruce up your profile pages or inject some personality into your online presence, you’ve landed in just the right spot.

In this post, we’ve handpicked over 50+ HTML and CSS avatar designs from top-notch sites like GitHub and CodePen that are creatively made for web applications, social media platforms, forums, and any online platform where visual appeal is the top-most priority. 

CSS avatars are the modern user interface element for adding a touch of extra wow to user profiles, giving your website or application a fresh, stylish, and interactive edge. 

Each CSS avatar code example you’ll find here isn’t just eye-catching but also interactive, seamlessly blending into user profiles, comment sections, chat interfaces, and other parts of your UI to take your user experience to the next level.

Let’s explore our aesthetically stunning CSS Avatars UI design that can magnify your website’s aesthetics while boosting user engagement.

1. Avatar border effect – 15 declarations, 1 element, no pseudos!

See the Pen
Avatar border effect – 15 declarations, 1 element, no pseudos!
by Ana Tudor (@thebabydino)
on CodePen.


Author: Ana Tudor @thebabydino
Links: Source Code / Demo
Created on: APRIL 15, 2021
Made with: HTML, CSS(SCSS)

2. lil’ me.

See the Pen
lil’ me.
by Cassie Evans (@cassie-codes)
on CodePen.


Author: Cassie Evans @cassie-codes
Links: Source Code / Demo
Created on: MAY 28, 2020
Made with: HTML, CSS, JS

3. Avatars (Pure CSS)

See the Pen
Avatars (Pure CSS)
by Akhil Sai Ram (@akhil_001)
on CodePen.


Author: Akhil Sai Ram @akhil_001
Links: Source Code / Demo
Created on: DECEMBER 15, 2019
Made with: HTML, CSS(SCSS)

4. Pulsating avatar

See the Pen
Pulsating avatar
by Blixt (@blixt)
on CodePen.


Author: Blixt @blixt
Links: Source Code / Demo
Created on: AUGUST 7, 2015
Made with: HTML, CSS

5. The Circle (Netflix) UI

See the Pen
The Circle (Netflix) UI
by Hyperplexed (@Hyperplexed)
on CodePen.


Author: Hyperplexed
Links: Source Code / Demo
Created on: MAY 26, 2022
Made with: HTML, CSS

6. Sticky Avatars Dashboard

See the Pen
Sticky Avatars Dashboard
by Kamil Ciesla (@kamilciesla)
on CodePen.


Author: Kamil Ciesla @kamilciesla
Links: Source Code / Demo
Created on: SEPTEMBER 19, 2015
Made with: HTML(Pug), CSS(SCSS), JS

7. Qavatar

See the Pen
Qavatar
by qpoziomek (@poziomq)
on CodePen.


Author: qpoziomek @poziomq
Links: Source Code / Demo
Created on: NOVEMBER 10, 2019
Made with: HTML, CSS, JS

8. Change avatar image

See the Pen
Change avatar image
by Jonas Badalic (@JonasBadalic)
on CodePen.


Author: Jonas Badalic @JonasBadalic
Links: Source Code / Demo
Created on: OCTOBER 25, 2014
Made with: HTML, CSS(Sass), JS

9. Bounce On Hover

See the Pen
Bounce On Hover
by Marcello Africano (@mnafricano)
on CodePen.


Author: Marcello Africano @mnafricano
Links: Source Code / Demo
Created on: JANUARY 24, 2013
Made with: HTML, CSS(SCSS)

10. Parallax Mouse Follow Avatar

See the Pen
Parallax Mouse Follow Avatar
by Hemn Chawroka (@iprodev)
on CodePen.


Author: Hemn Chawroka @iprodev
Links: Source Code / Demo
Created on: MAY 26, 2015
Made with: HTML, CSS, JS

11. Pop-up hover effect (featuring CSS developers)

See the Pen
Pop-up hover effect (featuring CSS developers)
by Temani Afif (@t_afif)
on CodePen.


Author: Temani Atif @t_afif
Links: Source Code / Demo
Created on: FEBRUARY 3, 2023
Made with: HTML, CSS

12. User Avatar CSS3 Animation

See the Pen
User Avatar CSS3 Animation
by Jorge Epuñan (@juanbrujo)
on CodePen.


Author: Jorge Epuñan @juanbrujo
Links: Source Code / Demo
Created on: MARCH 19, 2015
Made with: HTML, CSS(SCSS)

13. SVG Voice UI Animations

See the Pen
SVG Voice UI Animations
by Lee Martin (@leemartin)
on CodePen.


Author: Lee Martin @leemartin
Links: Source Code / Demo
Created on: JUNE 23, 2022
Made with: HTML, CSS

14. Avatar with mask-image circle to allow transparent border

See the Pen
Avatar with mask-image circle to allow transparent border
by Alexis Gallisa (@alexisg)
on CodePen.


Author: Alexis Gallisa @alexisg
Links: Source Code / Demo
Created on: JANUARY 21, 2021
Made with: HTML, CSS(SCSS)

15. Avatar

See the Pen
avatar
by ycw (@ycw)
on CodePen.


Author: ycw @ycw
Links: Source Code / Demo
Created on: JANUARY 22, 2021
Made with: HTML(Pug), CSS(Less)

16. Avatar Challenge – Fully Responsive Flashing/Flickering Screen Wall

See the Pen
Avatar Challenge – Fully Responsive Flashing/Flickering Screen Wall
by Taha Attari (@tahaattari)
on CodePen.


Author: Taha Attari @tahaattari
Links: Source Code / Demo
Created on: MAY 1, 2020
Made with: HTML, CSS(SCSS), JS

17. Profile Avatar Animation

See the Pen
Profile Avatar Animation
by Chandra Shekhar (@chandrashekhar)
on CodePen.


Author: Chandra Shekhar @chandrashekhar
Links: Source Code / Demo
Created on: JANUARY 18, 2021
Made with: HTML, CSS(SCSS)

18. Profile Avatar

See the Pen
Profile Avatar
by Yasin Aydın (@TheDiaval)
on CodePen.


Author: Yasin Aydın @TheDiaval
Links: Source Code / Demo
Created on: AUGUST 6, 2014
Made with: HTML(Pug), CSS(SCSS)

19. Pure CSS Avatar

See the Pen
Pure CSS Avatar
by Mert Cukuren (@knyttneve)
on CodePen.


Author: Mert Cukuren @knyttneve
Links: Source Code / Demo
Created on: OCTOBER 10, 2019
Made with: HTML(Pug), CSS(SCSS)

20. Pure CSS Avatar

See the Pen
Pure CSS Avatar
by Melquize (@Melquize)
on CodePen.


Author: Melquize @Melquize
Links: Source Code / Demo
Created on: APRIL 14, 2021
Made with: HTML(Pug), CSS(SCSS)

21. Animated CSS Grid (grid-template-rows / grid-template-columns)

See the Pen
Animated CSS Grid (grid-template-rows / grid-template-columns)
by Bramus (@bramus)
on CodePen.


Author: Bramus @bramus
Links: Source Code / Demo
Created on: SEPTEMBER 15, 2022
Made with: HTML, CSS, JS

22. Vuetify Avatars Group

See the Pen
Vuetify Avatars Group
by Neil Merton (@scp-nm)
on CodePen.


Author: Neil Merton @scp-nm
Links: Source Code / Demo
Created on: MARCH 17, 2020
Made with: HTML, CSS(Stylus), JS(Babel)

23. Self Portrait (Interactive)

See the Pen
Day 9: Self Portrait (Interactive)
by Tee (@acupoftee)
on CodePen.


Author: Tee @acupoftee
Links: Source Code / Demo
Created on: MAY 29, 2019
Made with: HTML, CSS(SCSS)

24. User avatar list pile-up

See the Pen
User avatar list pile-up
by michiel (@michiel-huiskens)
on CodePen.


Author: michiel @michiel-huiskens
Links: Source Code / Demo
Created on: DECEMBER 9, 2018
Made with: HTML, CSS(SCSS), JS

25. Avatar Frame Example

See the Pen
Avatar Frame Example
by Luis Santos (@lgmsantos94)
on CodePen.


Author: Luis Santos @lgmsantos94
Links: Source Code / Demo
Created on: NOVEMBER 24, 2020
Made with: HTML, CSS(SCSS)

26. Dropbox Like Avatars

See the Pen
Dropbox Like Avatars
by Arthur Kirsz (@arthurkirsz)
on CodePen.


Author: Arthur Kirsz @arthurkirsz
Links: Source Code / Demo
Created on: AUGUST 26, 2015
Made with: HTML, CSS

27. Avatar Cards

See the Pen
Avatar Cards
by Monica.dev (@M0nica)
on CodePen.


Author: Monica.dev @M0nica
Links: Source Code / Demo
Created on: MAY 13, 2020
Made with: HTML, CSS, JS

28. Avatar with HTML + CSS

See the Pen
Avatar with HTML + CSS
by Bruno Carvalho (@bcarvalho)
on CodePen.


Author: Bruno Carvalho @bcarvalho
Links: Source Code / Demo
Created on: JUNE 6, 2018
Made with: HTML, CSS(SCSS)

29. Twitch Avatar Spin

See the Pen
Twitch Avatar Spin
by Noble Paladin (@Tampon)
on CodePen.


Author: Noble Paladin @Tampon
Links: Source Code / Demo
Created on: SEPTEMBER 20, 2020
Made with: HTML, CSS, JS

30. Avatar

See the Pen
Avatar
by ycw (@ycw)
on CodePen.


Author: ycw @ycw
Links: Source Code / Demo
Created on: MARCH 19, 2019
Made with: HTML(Pug), CSS(Less)

31. Mini Insta-Friends Scrolling List Layout

See the Pen
Mini Insta-Friends Scrolling List Layout
by Adam Argyle (@argyleink)
on CodePen.


Author: Adam Argyle @argyleink
Links: Source Code / Demo
Created on: OCTOBER 24, 2020
Made with: HTML, CSS(PostCSS)

32. Content-drop Shadow

See the Pen
Content-drop Shadow
by Kenneth Luplau-Brøgger (@Blueblau)
on CodePen.


Author: Kenneth Luplau-Brøgger @Blueblau
Links: Source Code / Demo
Created on: APRIL 6, 2017
Made with: HTML, CSS(SCSS), JS(Babel)

33. Pure CSS Chris Coyier Pixel Avatar

See the Pen
Pure CSS Chris Coyier Pixel Avatar
by Asyraf Hussin (@AsyrafHussin)
on CodePen.


Author: Asyraf Hussin @AsyrafHussin
Links: Source Code / Demo
Created on: JUNE 12, 2020
Made with: HTML(Pug), CSS(SCSS)

34. Avatar List

See the Pen
Avatar List
by Joel (@Jooooel)
on CodePen.


Author: Joel @Jooooel
Links: Source Code / Demo
Created on: AUGUST 17, 2018
Made with: HTML, CSS

35. Avatar with cut-off border – concept

See the Pen
Avatar with cut-off border – concept
by Natalia ???? (@natszafraniec)
on CodePen.


Author: Natalia @natszafraniec
Links: Source Code / Demo
Created on: JANUARY 29, 2019
Made with: HTML, CSS(SCSS)

36. CSS Snippets: Avatar list

See the Pen
CSS Snippets: Avatar list
by A.L (@allisonching)
on CodePen.


Author: A.L @allisonching
Links: Source Code / Demo
Created on: DECEMBER 4, 2019
Made with: HTML, CSS

37. Mindtree Coding

See the Pen
Mindtree Coding
by bAlAAA (@balaaa)
on CodePen.

Author: bAlAAA @balaaa
Links: Source Code / Demo
Created on: MARCH 15, 2020
Made with: HTML, CSS(Less), JS

38. Pure CSS self portrait avatar

See the Pen
Pure CSS self portrait avatar
by Taryn Ewens (@taryne)
on CodePen.


Author: Taryn Ewens @taryne
Links: Source Code / Demo
Created on: SEPTEMBER 17, 2018
Made with: HTML, CSS(SCSS)

39. Avatars draggable filter

See the Pen
Avatars draggable filter
by Behzad Ali Mohammad Zad (@behzad)
on CodePen.


Author: Behzad Ali Mohammad Zad @behzad
Links: Source Code / Demo
Created on: February 28, 2028
Made with: HTML, CSS, JS(Babel)

40. Social icon animation

See the Pen
Social icon animation
by Brian Phillips (@bphillips201)
on CodePen.


Author: Brian Phillips @bphillips201
Links: Source Code / Demo
Created on: OCTOBER 11, 2013
Made with: HTML, CSS(SCSS), JS

41. Floating Animation – CSS

See the Pen
Floating Animation – CSS
by Mario Duarte (@MarioDesigns)
on CodePen.


Author: @MarioDesigns
Links: Source Code / Demo
Created on: NOVEMBER 21, 2016
Made with: HTML, CSS

42. Simple page (avatar)

See the Pen
Simple page (avatar)
by Jose Pino (@jofpin)
on CodePen.


Author: Jose Pino @jofpin
Links: Source Code / Demo
Created on: SEPTEMBER 28, 2014
Made with: HTML, CSS

43. Round Avatar with circular progress bar

See the Pen
Round Avatar with circular progress bar
by Volker Otto (@l4ci)
on CodePen.


Author: Volker Otto @l4ci
Links: Source Code / Demo
Created on: AUGUST 2, 2014
Made with: HTML, CSS(SCSS), JS

44. Tap or hover

See the Pen
;-D (tap or hover)
by Tyler Sticka (@tylersticka)
on CodePen.


Author: Tyler Sticka @tylersticka
Links: Source Code / Demo
Created on: OCTOBER 15, 2015
Made with: HTML, CSS

45. Pure CSS avatar

See the Pen
Pure CSS avatar
by ktich (@ktich)
on CodePen.


Author: ktich @ktich
Links: Source Code / Demo
Created on: MAY 24, 2020
Made with: HTML(Pug), CSS(SCSS)

46. CSS avatar

See the Pen
Pure CSS avatar
by ktich (@ktich)
on CodePen.


Author: ktich @ktich
Links: Source Code / Demo
Created on: APRIL 1, 2020
Made with: HTML, CSS

47. Pulse Avatar on click with TweenMax

See the Pen
Pulse Avatar on click with TweenMax
by Robert Borghesi (@dghez)
on CodePen.


Author: Robert Borghesi @dghez
Links: Source Code / Demo
Created on: OCTOBER 10, 2015
Made with: HTML, CSS(SCSS), JS

48. Avatar Blur

See the Pen
Avatar Blur
by Maksim Surguy (@msurguy)
on CodePen.


Author: Maksim Surguy @msurguy
Links: Source Code / Demo
Created on: APRIL 4, 2015
Made with: HTML, CSS(SCSS)

49. Avatars

See the Pen
Avatars
by Melody (@pixelyunicorn)
on CodePen.


Author: Melody @pixelyunicorn
Links: Source Code / Demo
Created on: DECEMBER 20, 2018
Made with: HTML, CSS(SCSS)

50. Avatar Maker

See the Pen
Avatar Maker
by Rishabh Mishra (@RishabhMishra)
on CodePen.


Author: Rishabh Mishra @RishabhMishra
Links: Source Code / Demo
Created on: APRIL 30, 2019
Made with: HTML, CSS, JS

51. Spooky Avatar Dropdown

See the Pen
#CodepenChallenge: Spooky Avatar Dropdown
by Ines (@inescodes)
on CodePen.


Author: Ines @inescodes
Links: Source Code / Demo
Created on: OCTOBER 7, 2021
Made with: HTML, CSS(SCSS), JS

52. CSS Avatar

See the Pen
CSS Avatar
by Roden (@RodenKerthin)
on CodePen.


Author: Roden @RodenKerthin
Links: Source Code / Demo
Created on: MARCH 24, 2021
Made with: HTML, CSS

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.