19 CSS Avatars

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

Author

Ana Tudor
April 15, 2021

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: -

Author

ycw
January 22, 2021

Made with

HTML (Pug) / CSS (Less)

About a code

Avatar

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

Responsive: yes

Dependencies: -

Author

Chandra Shekhar
January 18, 2021

Made with

HTML / CSS (SCSS)

About a code

Profile Avatar Animation

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

Responsive: no

Dependencies: -

Author

Luis Santos
November 24, 2020

Made with

HTML / CSS (SCSS)

About a code

Avatar Frame

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

Responsive: yes

Dependencies: -

Author

Noble Paladin
September 20, 2020

Made with

HTML / CSS / JS

About a code

Twitch Avatar Spin

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

Responsive: no

Dependencies: jquery.js

Author

Asyraf Hussin
June 12, 2020

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: -

Author

Monica Powell
May 13, 2020

Made with

HTML / CSS / JS

About a code

Avatar Cards

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

Responsive: yes

Dependencies: -

Author

Akhil Sai Ram
December 15, 2019

Made with

HTML / CSS (SCSS)

About a code

Pure CSS Avatars

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

Responsive: no

Dependencies: -

Author

Mert Cukuren
October 10, 2019

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
May 29, 2019

Made with

HTML / CSS (SCSS)

About a code

Self Portrait (Interactive)

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

Responsive: no

Dependencies: -

Author

ycw
March 19, 2019

Made with

HTML (Pug) / CSS (SCSS)

About a code

Avatar

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

Responsive: yes

Dependencies: -

Author

Natalia
January 29, 2019

Made with

HTML / CSS (SCSS)

About a code

Avatar with Cut-Off Border

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

Responsive: no

Dependencies: -

Author

Taryn Ewens
September 17, 2018

Made with

HTML / CSS (SCSS)

About a code

Pure CSS Self Portrait Avatar

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

Responsive: no

Dependencies: -

Author

Bruno Carvalho
June 6, 2018

Made with

HTML / CSS (SCSS)

About a code

Avatar with HTML and CSS

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

Responsive: no

Dependencies: -

Author

Kenneth Luplau-Brøgger
April 6, 2017

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
October 14, 2015

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
October 10, 2015

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

Author

Blixt
August 6, 2015

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
August 6, 2014

Made with

HTML (Pug) / CSS (SCSS)

About a code

Profile Avatar

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

Responsive: no

Dependencies: -

Author

Links

Made with

About a code

Avatar Border Effect

Author

Links

Made with

About a code

Avatar

Author

Links

Made with

About a code

Profile Avatar Animation

Author

Links

Made with

About a code

Avatar Frame

Author

Links

Made with

About a code

Twitch Avatar Spin

Author

Links

Made with

About a code

Pure CSS Responsive Chris Coyier Pixel Avatar

Author

Links

Made with

About a code

Avatar Cards

Author

Links

Made with

About a code

Pure CSS Avatars

Author

Links

Made with

About a code

Pure CSS Avatar

Author

Links

Made with

About a code

Self Portrait (Interactive)

Author

Links

Made with

About a code

Avatar

Author

Links

Made with

About a code

Avatar with Cut-Off Border

Author

Links

Made with

About a code

Pure CSS Self Portrait Avatar

Author

Links

Made with

About a code

Avatar with HTML and CSS

Author

Links

Made with

About a code

Content-Drop Shadow

Author

Links

Made with

About a code

;-D (Tap or Hover)