w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home Display

42 Cool CSS Avatars For Better UI

W3TWEAKS by W3TWEAKS
December 15, 2021
in Display

You might also like

CSS Responsive infographics

24 Best Free CSS Responsive Infographics

March 29, 2022
CSS Cards

100 Creative CSS Cards

November 13, 2022

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

Made with

  • HTML / CSS / JS

About the Code

Avatar Maker

Updated on April 30, 2019

More info: Link

Dependency: –

Tags: CSS Avatar
Previous Post

16 Strong Password Generator Source code

Next Post

Navigator.sendBeacon() is great method in JavaScript

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

CSS Responsive infographics

24 Best Free CSS Responsive Infographics

by W3TWEAKS
March 29, 2022

The idea of using CSS Responsive infographics to convey information is not new. But with the advent of CSS, it...

CSS Cards

100 Creative CSS Cards

by W3TWEAKS
November 13, 2022

A collection of creative CSS cards. Create stunning designs with CSS by learning these creative CSS card collection examples. Cards...

Next Post
Navigator.sendBeacon() is great method in JavaScript

Navigator.sendBeacon() is great method in JavaScript

Popular Posts

100 Creative CSS Cards

41 Multi step HTML forms

13 Free HTML & CSS Dashboard Template Designs

20 HTML & CSS pricing tables

49 CSS Tables

14 Best CSS Dark Mode

11 CSS Shopping Cart UI/UX

42 Cool CSS Avatars For Better UI

89 Best CSS Toggle Switches

55 Useful handpicked CSS Buttons with examples and demos

w3tweaks

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools