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

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

Links
Made with
- HTML (Pug) / CSS (Less)
About a code
Avatar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Profile Avatar Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Avatar Frame
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Twitch Avatar Spin
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js

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

Links
Made with
- HTML / CSS / JS
About a code
Avatar Cards
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS Avatars
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Pure CSS Avatar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Self Portrait (Interactive)
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Avatar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Avatar with Cut-Off Border
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS Self Portrait Avatar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

Links
Made with
- HTML / CSS (SCSS)
About a code
Avatar with HTML and CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -

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

Links
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: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Profile Avatar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -