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:
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
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
About the Code
Parallax Mouse Follow Avatar
Updated on May 26, 2015
More info: Link
Dependency: family=Varela+Round, jquery.min.js
Avatar List
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
About the Code
User CSS avatars list pile-up
Updated on December 9, 2018
More info: Link
Dependency: FontFamily(Roboto+Condensed), jquery.min.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
About the Code
Stripe.com Style Dropdown Menu
Updated on April 6, 2017
More info: Link
Dependency: vue.min.js
About the Code
Tailwind avatar list icon
Pure css avatars. Updated on February 11, 2020
More info: Link
Dependency: tailwind.min.css
Avatar Circle
About the Code
Responsive circle
Responsive circle shape with sass and foundation. Updated on March 1, 2019
More info: Link
Dependency: foundation.min.css
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
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
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
About the Code
Simple page (avatar)
Simple presentation, made with love. Updated on September 28, 2014
More info: Link
Dependency: jquery.min.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
Avatar Card
About the Code
Tinder Swipe Cards
Updated on January 31, 2017
More info: Link
Dependency: jquery.js, jquery.mobile.js, jquery.mobile.css
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
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
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
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: –
