42 Cool CSS Avatars For Better UI

By | December 9, 2021

Collections of CSS avatars for the best user experience. In order to make a website feel more personal, you can use a CSS avatar. Many people seem to forget that avatars are important to web design. The face of your site should be the first thing a user notices. If you have a CSS avatar, you have a great way to make a first impression. Here are some places you can find CSS avatars.

Table of Contents:

  1. Avatar List (10)
  2. Avatar Circle (13)
  3. Avatar Card (6)
  4. Letter Avatar (3)
  5. Avatar Maker (1)

Author

  • Cassie Evans
  • May 28, 2020

Link

Made with

  • HTML / CSS / JS

About the Code

lil’ me.

first, pass at an avatar animation for my personal portfolio. Updated on March 7, 2021

More info: Link

Dependency: CustomEase3.min.js, CustomWiggle3.min.js, gsap.min.js


Author

  • Kamil Ciesla
  • September 19, 2015

Link

Made with

  • Pug / SCSS / JS

About the Code

Sticky CSS Avatars Dashboard

Avatar fixed positioning and locking inspired by Tumblr’s dashboard using scrollMonitor.

More info: Link

Dependency: font-awesome.min.css, jquery.min.js, scrollMonitor.min.js


Author

  • Stas Melnikov
  • May 26, 2017

Link

Made with

  • HTML / CSS

About the Code

CSS Clip-Path Masks with Custom Properties as API

Updated on July 26, 2020

More info: Link

Dependency:


42 Cool CSS Avatars For Better UI 1

Author

  • Akhil Sai Ram
  • December 15, 2019

Link

Made with

  • HTML / SCSS

About the Code

Avatars (Pure CSS)

Pure CSS Avatars. Updated on December 15, 2019

More info: Link

Dependency:


42 Cool CSS Avatars For Better UI 2

Author

  • Hemn Chawroka
  • May 26, 2015

Link

Made with

  • HTML / CSS / JS

About the Code

Parallax Mouse Follow Avatar

Updated on May 26, 2015

More info: Link

Dependency: family=Varela+Round, jquery.min.js


Author

  • Rian Ariona1
  • March 19, 2015

Link

Made with

  • HTML / SCSS

About the Code

User Avatar CSS3 Animation

user avatar animation, CSS3. Updated on July 19, 2021.

More info: Link

Dependency:


42 Cool CSS Avatars For Better UI 3

Author

  • Alexis Gallisa
  • January 20, 2021

Link

Made with

  • HTML / SCSS

About the Code

Avatar with mask-image circle to allow transparent border

Updated on January 28, 2021

More info: Link

Dependency:


Author

  • Taha Attari
  • May 1, 2020

Link

Made with

  • HTML / SCSS / JS

About the Code

CSS Avatars Challenge – Fully Responsive Flashing/Flickering Screen Wall

A grid of old, flickering screens. Updated on January 1, 2021

More info: Link

Dependency:


42 Cool CSS Avatars For Better UI 4

Author

  • Melquize
  • April 14, 2021

Link

Made with

  • Pug / SCSS

About the Code

Pure CSS Avatar

Updated on April 14, 2021

More info: Link

Dependency:

Avatar List

Author

  • Neil Merton
  • March 17, 2020

Link

Made with

  • HTML / Stylus / JS

About the Code

Vuetify Avatars Group

Updated on June 5, 2020

More info: Link

Dependency: fontfamily(Roboto|Material+Icons), vuetify.min.css, polyfill.min.js, vue.js, vuetify.min.js


Author

  • michiel
  • December 8, 2018

Link

Made with

  • HTML / SCSS / JS

About the Code

User CSS avatars list pile-up

Updated on December 9, 2018

More info: Link

Dependency: FontFamily(Roboto+Condensed), jquery.min.js


42 Cool CSS Avatars For Better UI 5

Author

  • Arthur Kirsz
  • August 26, 2015

Link

Made with

  • HTML / SCSS

About the Code

Dropbox Like CSS Avatars

Updated on July 1, 2016

More info: Link

Dependency:


42 Cool CSS Avatars For Better UI 6

Author

  • Joel
  • August 17, 2018

Link

Made with

  • HTML / CSS

About the Code

Avatar List

Updated on August 17, 2018

More info: Link

Dependency: w3.css


Author

  • Ching Ching
  • December 3, 2019

Link

Made with

  • HTML / SCSS / JS

About the Code

CSS Snippets: Avatar list

CSS Avatars. Updated on December 3, 2019

More info: Link

Dependency:


42 Cool CSS Avatars For Better UI 7

Author

  • bAlAAA
  • March 15, 2020

Link

Made with

  • HTML / Less / JS

About the Code

Avatar Male List

Updated on July 17, 2020

More info: Link

Dependency:


Author

  • Behzad AM
  • May 18, 2020

Link

Made with

  • HTML / CSS / JS

About the Code

Avatars draggable filter

Simple pure JavaScript draggable filter. Updated on May 18, 2020

More info: Link

Dependency: draggabilly.pkgd.min.js


42 Cool CSS Avatars For Better UI 8

Author

  • Kenneth Luplau-Brøgger
  • April 6, 2017

Link

Made with

  • HTML / SCSS / JS

About the Code

Stripe.com Style Dropdown Menu

Updated on April 6, 2017

More info: Link

Dependency: vue.min.js


42 Cool CSS Avatars For Better UI 9

Author

  • Phibee Deinla
  • February 11, 2020

Link

Made with

  • HTML / CSS

About the Code

Tailwind avatar list icon

Pure css avatars. Updated on February 11, 2020

More info: Link

Dependency: tailwind.min.css


Author

  • Adam Argyle
  • October 23, 2020

Link

Made with

  • HTML / PostCSS

About the Code

Mini Insta-Friends Scrolling List Layout

PostCSS Avatars. Updated on August 20, 2021

More info: Link

Dependency:

Avatar Circle

42 Cool CSS Avatars For Better UI 10

Author

  • mesvil
  • April 30, 2016

Link

Made with

  • HTML / SCSS

About the Code

Responsive circle

Responsive circle shape with sass and foundation. Updated on March 1, 2019

More info: Link

Dependency: foundation.min.css


Author

  • Luis Santos
  • November 24, 2020

Link

Made with

  • HTML / SCSS

About the Code

Avatar Frame Example

Circle CSS Avatars. Updated on November 24, 2020

More info: Link

Dependency:


42 Cool CSS Avatars For Better UI 11

Author

  • Mario Duarte
  • November 21, 2016

Link

Made with

  • HTML / SCSS

About the Code

Floating Animation – CSS

Simple floating CSS animation using transform and box-shadow. Updated on January 28, 2021

More info: Link

Dependency: font-awesome.min.css


Author

  • Jonas Badalic
  • October 25, 2014

Link

Made with

  • HTML / Sass / JS

About the Code

Change avatar image

Change your avatar image with style. Updated on November 6, 2015

More info: Link

Dependency: jquery.min.js, raphael-min.js


Author

  • Marcello Africano
  • January 24, 2013

Link

Made with

  • HTML / SCSS

About the Code

Bounce On Hover

When you hove the image, the border bounces. Updated on January 25, 2013

More info: Link

Dependency:


Author

  • Brian Phillips
  • October 11, 2013

Link

Made with

  • HTML / SCSS / JS

About the Code

Social icon animation

Experimenting with ways to display social links. Updated on December 6, 2013

More info: Link

Dependency: jquery.min.js


Author

  • Blixt
  • August 6, 2015

Link

Made with

  • HTML / CSS

About the Code

Pulsating avatar

A simple CSS animation for having ripples pulsate out of the avatar. Updated on September 10, 2018

More info: Link

Dependency:


Author

  • Elisabéth
  • May 29, 2019

Link

Made with

  • HTML / SCSS

About the Code

Day 9: Self Portrait (Interactive)

Worked on a new avatar for my social media profiles. Hover over for a nice surprise! Updated on February 14, 2021

More info: Link

Dependency:


Author

  • Jose Pino
  • September 28, 2014

Link

Made with

  • HTML / CSS

About the Code

Simple page (avatar)

Simple presentation, made with love. Updated on September 28, 2014

More info: Link

Dependency: jquery.min.js


42 Cool CSS Avatars For Better UI 12

Author

  • Volker Otto
  • August 1, 2014

Link

Made with

  • HTML / SCSS / JS

About the Code

Stripe.com Style Dropdown Menu

Need a round avatar with some sort of progress bar around it. Updated on February 14, 2017

More info: Link

Dependency: jquery.min.js


42 Cool CSS Avatars For Better UI 13

Author

  • ktich
  • May 24, 2020

Link

Made with

  • Pug / SCSS

About the Code

Pure CSS avatar

Updated on May 24, 2020

More info: Link

Dependency:


42 Cool CSS Avatars For Better UI 14

Author

  • ktich
  • March 31, 2020

Link

Made with

  • Pug / CSS

About the Code

CSS avatar

Updated on April 2, 2020

More info: Link

Dependency:


42 Cool CSS Avatars For Better UI 15

Author

  • Ana Tudor
  • April 15, 2021

Link

Made with

  • HTML / SCSS

About the Code

Avatar border effect – 15 declarations, 1 element, no pseudos!

Updated on April 17, 2021

More info: Link

Dependency:

Avatar Card

Author

  • developing idea
  • September 26, 2014

Link

Made with

  • HTML / CSS / JS

About the Code

Tinder Swipe Cards

Updated on January 31, 2017

More info: Link

Dependency: jquery.js, jquery.mobile.js, jquery.mobile.css


Author

  • David Jones
  • July 2, 2015

Link

Made with

  • HTML / CSS

About the Code

Remix Challenge

Envato Remix Challenge – Responsive profile card with beautiful animations. Updated on November 27, 2021

More info: Link

Dependency:


Author

  • darkos
  • July 13, 2015

Link

Made with

  • HTML / CSS

About the Code

Hover Card

Updated on September 7, 2015

More info: Link

Dependency: family:Roboto


Author

  • Anis Mashku
  • June 21, 2013

Link

Made with

  • HTML / CSS / JS

About the Code

Simple User Profile Widget

This is a simple horizontal user profile widget made with HTML5/CSS3/jQuery. Updated on June 24, 2013

More info: Link

Dependency: jquery.min.js


42 Cool CSS Avatars For Better UI 16

Author

  • Maksim Surguy
  • April 3, 2015

Link

Made with

  • HTML / SCSS / JS

About the Code

Dynamically blurring avatar images using Canvas

Dynamically blur avatar images using HTML Canvas and Stack Blur library. Updated on April 7, 2015

More info: Link

Dependency: jquery.min.js


Author

  • Monica Powell
  • May 12, 2020

Link

Made with

  • HTML / CSS / JS

About the Code

Avatar Cards

This pen requests and displays data for X users from the Random User API in a grid. Updated on May 18, 2020

More info: Link

Dependency: font: Roboto, font: Permanent Marker

Letter Avatars

42 Cool CSS Avatars For Better UI 17

Author

  • Artur
  • June 26, 2015

Link

Made with

  • HTML / CSS / JS

About the Code

Letter Avatars

Create a Letter avatar based on Initials. Updated on June 29, 2015

More info: Link

Dependency:


42 Cool CSS Avatars For Better UI 18

Author

  • Matt Smith
  • May 11, 2017

Link

Made with

  • HTML / CSS

About the Code

Perfectly Resize Avatar Initials with CSS calc() and Variables

User avatar initials pattern that’s fully resizable using CSS calc() and custom properties (CSS variables). Updated on February 20, 2018

More info: Link

Dependency:


42 Cool CSS Avatars For Better UI 19

Author

  • Melody
  • December 19, 2018

Link

Made with

  • HTML / SCSS

About the Code

CSS Avatars

Updated on December 20, 2018

More info: Link

Dependency:

Avatar Maker

Author

  • Rishabh Mishra
  • April 30, 2019

Link

Made with

  • HTML / CSS / JS

About the Code

Avatar Maker

Updated on April 30, 2019

More info: Link

Dependency:

Author: CV

I am a Front-end Developer, graduate of Information Technology, and founder of w3tweaks.com. I have 12+ years commercial experience providing front-end development, producing high quality responsive websites and exceptional user experience.