Welcome to our collection of CSS Avatars! This carefully curated compilation brings together a diverse range of free HTML and CSS avatars code examples sourced from popular platforms such as CodePen, GitHub, and other valuable resources. With the July 2023 update, we are thrilled to present nine new additions to our ever-expanding collection.

Each avatar design is hand-picked, showcasing the latest trends and innovative techniques in avatar creation. Explore our handpicked selection and elevate your web design projects with these eye-catching avatars!

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Pop-up Hover Effect

Pop-up hover effect (featuring CSS developers).

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

Responsive: yes

Dependencies: -

Author

  • Bramus

Made with

  • HTML / CSS

About a code

Animated CSS Grid

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

Responsive: no

Dependencies: -

Author

  • Lee Martin

Made with

  • HTML / CSS

About a code

SVG Voice UI Animations

A series of voice UI experiments using single SVG elements. Animation is used to give the illusion of speaking.

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

Responsive: yes

Dependencies: -

Demo image: The Circle (Netflix) UI

Author

  • Hyperplexed

Made with

  • HTML / CSS

About a code

The Circle (Netflix) UI

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

Responsive: no

Dependencies: font-awesome.css

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

Author

  • qpoziomek

Made with

  • HTML / CSS / JS

About a code

Qavatar

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

Responsive: yes

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

Author

  • Stas Melnikov

Made with

  • HTML / CSS

About a code

CSS Clip-Path Masks with Custom Properties as API

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

  • Mario Duarte

Made with

  • HTML / CSS (SCSS)

About a code

CSS Floating Animation

Simple floating CSS animation using transform and box-shadow.

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

Responsive: no

Dependencies: -

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

  • Jonas Badalic

Made with

  • HTML / CSS (Sass) / JS

About a code

Change Avatar Image

Change your avatar image with style.

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

Responsive: yes

Dependencies: jquery.js

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

Author

  • Marcello Africano

Made with

  • HTML / CSS (SCSS)

About a code

Bounce On Hover

When you hove the image, the border bounces.

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

Responsive: no

Dependencies: -