Welcome to our updated collection of CSS avatars for July 2023! This collection features 9 new items, all hand-picked and free to use. These avatars have been sourced from various resources such as CodePen, GitHub, and other online platforms.

CSS avatars are graphical representations used in web design and development. They are created using HTML and CSS code and can be used to represent users on a website or application. These avatars can range from simple geometric shapes to more complex designs that include details such as facial expressions, clothing, and accessories.

CSS avatars offer a unique way to add personality and visual interest to your website or application. They can be customized to match the style and branding of your site, making them a versatile design element. Additionally, because they are coded, CSS avatars often load faster and take up less bandwidth than traditional image files.

Our collection includes a variety of CSS avatar designs, from minimalist geometric shapes to detailed character representations. Each avatar in our collection comes with its own HTML and CSS code example, allowing you to easily implement the design into your own project.

Whether you’re a seasoned developer looking for inspiration or a beginner wanting to learn more about CSS design, our collection offers something for everyone. So why wait? Start exploring our CSS avatars collection today!

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