Welcome to our collection of CSS Avatars! This carefully curated compilation brings together a diverse range of free HTML and CSS avatars code examples sourced from popular platforms such as CodePen, GitHub, and other valuable resources. With the July 2023 update, we are thrilled to present nine new additions to our ever-expanding collection.
Each avatar design is hand-picked, showcasing the latest trends and innovative techniques in avatar creation. Explore our handpicked selection and elevate your web design projects with these eye-catching avatars!
Links
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: -
Links
Made with
- HTML / CSS
About a code
Animated CSS Grid
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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: -
Links
Made with
- HTML / CSS
About a code
The Circle (Netflix) UI
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
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: -
Links
Made with
- HTML (Pug) / CSS (Less)
About a code
Avatar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Profile Avatar Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Avatar Frame
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Twitch Avatar Spin
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Links
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: -
Links
Made with
- HTML / CSS / JS
About a code
Avatar Cards
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS Avatars
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Qavatar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Pure CSS Avatar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Self Portrait (Interactive)
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Avatar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Avatar with Cut-Off Border
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS Self Portrait Avatar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Avatar with HTML and CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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: -
Links
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
Links
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: -
Links
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
Links
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
Links
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: -
Links
Made with
- HTML / CSS (Sass) / JS
About a code
Change Avatar Image
Change your avatar image with style.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Profile Avatar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Bounce On Hover
When you hove the image, the border bounces.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -