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:
lil’ me.
first, pass at an avatar animation for my personal portfolio. Updated on March 7, 2021
Author: Cassie Evans, May 28, 2020 · Made with: HTML / CSS / JS · Dependency: CustomEase3.min.js, CustomWiggle3.min.js, gsap.min.js
Sticky CSS Avatars Dashboard
Avatar fixed positioning and locking inspired by Tumblr’s dashboard using scrollMonitor.
Author: Kamil Ciesla, September 19, 2015 · Made with: Pug / SCSS / JS · Dependency: font-awesome.min.css, jquery.min.js, scrollMonitor.min.js
CSS Clip-Path Masks with Custom Properties as API
Updated on July 26, 2020
Author: Stas Melnikov, May 26, 2017 · Made with: HTML / CSS
Avatars (Pure CSS)
Pure CSS Avatars. Updated on December 15, 2019
Author: Akhil Sai Ram, December 15, 2019 · Made with: HTML / SCSS
Parallax Mouse Follow Avatar
Updated on May 26, 2015
Author: Hemn Chawroka, May 26, 2015 · Made with: HTML / CSS / JS · Dependency: family=Varela+Round, jquery.min.js
User Avatar CSS3 Animation
user avatar animation, CSS3. Updated on July 19, 2021.
Author: Rian Ariona1, March 19, 2015 · Made with: HTML / SCSS
Avatar with mask-image circle to allow transparent border
Updated on January 28, 2021
Author: Alexis Gallisa, January 20, 2021 · Made with: HTML / SCSS
CSS Avatars Challenge – Fully Responsive Flashing/Flickering Screen Wall
A grid of old, flickering screens. Updated on January 1, 2021
Author: Taha Attari, May 1, 2020 · Made with: HTML / SCSS / JS
Pure CSS Avatar
Updated on April 14, 2021
Author: Melquize, April 14, 2021 · Made with: Pug / SCSS
Avatar List
Updated on June 5, 2020
Author: Neil Merton, March 17, 2020 · Made with: HTML / Stylus / JS · Dependency: fontfamily(Roboto|Material+Icons), vuetify.min.css, polyfill.min.js, vue.js, vuetify.min.js
User CSS avatars list pile-up
Updated on December 9, 2018
Author: michiel, December 8, 2018 · Made with: HTML / SCSS / JS · Dependency: FontFamily(Roboto+Condensed), jquery.min.js
Dropbox Like CSS Avatars
Updated on July 1, 2016
Author: Arthur Kirsz, August 26, 2015 · Made with: HTML / SCSS
Avatar List
Updated on August 17, 2018
Author: Joel, August 17, 2018 · Made with: HTML / CSS · Dependency: w3.css
CSS Snippets: Avatar list
CSS Avatars. Updated on December 3, 2019
Author: Ching Ching, December 3, 2019 · Made with: HTML / SCSS / JS
Avatar Male List
Updated on July 17, 2020
Author: bAlAAA, March 15, 2020 · Made with: HTML / Less / JS
Avatars draggable filter
Simple pure JavaScript draggable filter. Updated on May 18, 2020
Author: Behzad AM, May 18, 2020 · Made with: HTML / CSS / JS · Dependency: draggabilly.pkgd.min.js
Stripe.com Style Dropdown Menu
Updated on April 6, 2017
Author: Kenneth Luplau-Brøgger, April 6, 2017 · Made with: HTML / SCSS / JS · Dependency: vue.min.js
Tailwind avatar list icon
Pure css avatars. Updated on February 11, 2020
Author: Phibee Deinla, February 11, 2020 · Made with: HTML / CSS · Dependency: tailwind.min.css
Mini Insta-Friends Scrolling List Layout
PostCSS Avatars. Updated on August 20, 2021
Author: Adam Argyle, October 23, 2020 · Made with: HTML / PostCSS
Avatar Circle
Responsive circle shape with sass and foundation. Updated on March 1, 2019
Author: mesvil, April 30, 2016 · Made with: HTML / SCSS · Dependency: foundation.min.css
Avatar Frame Example
Circle CSS Avatars. Updated on November 24, 2020
Author: Luis Santos, November 24, 2020 · Made with: HTML / SCSS
Floating Animation – CSS
Simple floating CSS animation using transform and box-shadow. Updated on January 28, 2021
Author: Mario Duarte, November 21, 2016 · Made with: HTML / SCSS · Dependency: font-awesome.min.css
Change avatar image
Change your avatar image with style. Updated on November 6, 2015
Author: Jonas Badalic, October 25, 2014 · Made with: HTML / Sass / JS · Dependency: jquery.min.js, raphael-min.js
Bounce On Hover
When you hove the image, the border bounces. Updated on January 25, 2013
Author: Marcello Africano, January 24, 2013 · Made with: HTML / SCSS
Social icon animation
Experimenting with ways to display social links. Updated on December 6, 2013
Author: Brian Phillips, October 11, 2013 · Made with: HTML / SCSS / JS · Dependency: jquery.min.js
Pulsating avatar
A simple CSS animation for having ripples pulsate out of the avatar. Updated on September 10, 2018
Author: Blixt, August 6, 2015 · Made with: HTML / CSS
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
Author: Elisabéth, May 29, 2019 · Made with: HTML / SCSS
Simple page (avatar)
Simple presentation, made with love. Updated on September 28, 2014
Author: Jose Pino, September 28, 2014 · Made with: HTML / CSS · Dependency: jquery.min.js
Stripe.com Style Dropdown Menu
Need a round avatar with some sort of progress bar around it. Updated on February 14, 2017
Author: Volker Otto, August 1, 2014 · Made with: HTML / SCSS / JS · Dependency: jquery.min.js
Pure CSS avatar
Updated on May 24, 2020
Author: ktich, May 24, 2020 · Made with: Pug / SCSS
CSS avatar
Updated on April 2, 2020
Author: ktich, March 31, 2020 · Made with: Pug / CSS
Avatar border effect – 15 declarations, 1 element, no pseudos!
Updated on April 17, 2021
Author: Ana Tudor, April 15, 2021 · Made with: HTML / SCSS
Avatar Card
Updated on January 31, 2017
Author: developing idea, September 26, 2014 · Made with: HTML / CSS / JS · Dependency: jquery.js, jquery.mobile.js, jquery.mobile.css
Remix Challenge
Envato Remix Challenge – Responsive profile card with beautiful animations. Updated on November 27, 2021
Author: David Jones, July 2, 2015 · Made with: HTML / CSS
Hover Card
Updated on September 7, 2015
Author: darkos, July 13, 2015 · Made with: HTML / CSS · Dependency: family:Roboto
Simple User Profile Widget
This is a simple horizontal user profile widget made with HTML5/CSS3/jQuery. Updated on June 24, 2013
Author: Anis Mashku, June 21, 2013 · Made with: HTML / CSS / JS · Dependency: jquery.min.js
Dynamically blurring avatar images using Canvas
Dynamically blur avatar images using HTML Canvas and Stack Blur library. Updated on April 7, 2015
Author: Maksim Surguy, April 3, 2015 · Made with: HTML / SCSS / JS · Dependency: jquery.min.js
Avatar Cards
This pen requests and displays data for X users from the Random User API in a grid. Updated on May 18, 2020
Author: Monica Powell, May 12, 2020 · Made with: HTML / CSS / JS · Dependency: font: Roboto,font: Permanent Marker
Letter Avatars
Create a Letter avatar based on Initials. Updated on June 29, 2015
Author: Artur, June 26, 2015 · Made with: HTML / CSS / JS
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
Author: Matt Smith, May 11, 2017 · Made with: HTML / CSS
CSS Avatars
Updated on December 20, 2018
Author: Melody, December 19, 2018 · Made with: HTML / SCSS
Avatar Maker
Updated on April 30, 2019
Author: Rishabh Mishra, April 30, 2019 · Made with: HTML / CSS / JS
