Collection of hand-picked free HTML and CSS avatar code examples from Codepen and other resources.

Demo image: Avatar Border Effect

Author

  • Ana Tudor

Made with

  • HTML / CSS (SCSS)

About a code

Avatar Border Effect

15 declarations, 1 element, no pseudos.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Avatar

Author

  • ycw

Made with

  • HTML (Pug) / CSS (Less)

About a code

Avatar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Chandra Shekhar

Made with

  • HTML / CSS (SCSS)

About a code

Profile Avatar Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Avatar Frame

Author

  • Luis Santos

Made with

  • HTML / CSS (SCSS)

About a code

Avatar Frame

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Noble Paladin

Made with

  • HTML / CSS / JS

About a code

Twitch Avatar Spin

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Demo image: Pure CSS Responsive Chris Coyier Pixel Avatar

Author

  • Asyraf Hussin

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Pure CSS Responsive Chris Coyier Pixel Avatar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Avatar Cards

Author

  • Monica Powell

Made with

  • HTML / CSS / JS

About a code

Avatar Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Pure CSS Avatars

Author

  • Akhil Sai Ram

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Avatars

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Pure CSS Avatar

Author

  • Mert Cukuren

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Pure CSS Avatar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Elisabéth

Made with

  • HTML / CSS (SCSS)

About a code

Self Portrait (Interactive)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • ycw

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Avatar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Avatar with Cut-Off Border

Author

  • Natalia

Made with

  • HTML / CSS (SCSS)

About a code

Avatar with Cut-Off Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Pure CSS Self Portrait Avatar

Author

  • Taryn Ewens

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Self Portrait Avatar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Avatar with HTML and CSS

Author

  • Bruno Carvalho

Made with

  • HTML / CSS (SCSS)

About a code

Avatar with HTML and CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Content-Drop Shadow

Author

  • Kenneth Luplau-Brøgger

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Content-Drop Shadow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: vue.js, axios.js

Author

  • Tyler Sticka

Made with

  • HTML / CSS / JS

About a code

;-D (Tap or Hover)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: tweenmax.js, morphsvgplugin.js

Author

  • Robert Borghesi

Made with

  • HTML / CSS (SCSS) / JS

About a code

Pulse Avatar

Pulse avatar on click with TweenMax.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, tweenmax.js

Demo image: Pulsating Avatar

Author

  • Blixt

Made with

  • HTML / CSS

About a code

Pulsating Avatar

A simple CSS animation for having ripples pulsate out of the avatar.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Yasin Aydın

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Profile Avatar

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -