25+ CSS Profile Cards - Free Code + Demos

Collection of 25+ CSS Profile Cards. All items are 100% free and open-source.

1. Profile Card UI Design Cool Hover Effect

CSS Profile Cards - Profile Card UI Design Cool Hover Effect
Profile Card UI Design Cool Hover Effect
Author: FrankieDoodie (FrankieDoodie)
Created on: October 27, 2018
Made with: HTML, CSS
Tags: profile, card, cool, hover, effect

2. CSS Profile Card

CSS Profile Cards - CSS Profile Card
This is some kind of profile card. The Hire me button has a moving gradient hover animation
Author: Russ Perry (rperry1886)
Created on: February 11, 2020
Made with: HTML, SCSS
Tags: card, profile-card, portfolio, social-media

3. UI Profile Cards

CSS Profile Cards - UI Profile Cards
Author: neil pearce (2975)
Created on: May 16, 2018
Made with: HTML, SCSS

4. CSS Profile Card

CSS Profile Cards - CSS Profile Card
Author: Byurhan Beyzat (imbyurhan)
Created on: March 15, 2018
Made with: HTML, SCSS

5. Profile Card UI

CSS Profile Cards - Profile Card UI
a user Profile.
Author: Genaro Colusso (genarocolusso)
Created on: August 22, 2016
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: profile, ui, animation, css, daily ui

6. CSS Profile Card UI 2

CSS Profile Cards - CSS Profile Card UI 2
Codepen profile card. Full page view works best.
Author: Jove Angelevski (AlbertFeynman)
Created on: October 6, 2018
Made with: HTML, SCSS, JS
Tags: card, ui, profile, skill, ui skill

7. Material Design: Profile Card

CSS Profile Cards - Material Design: Profile Card
Material Design: Profile Card
Author: Emil Devantie Brockdorff (Mestika)
Created on: January 15, 2016
Made with: HTML, CSS
Tags: material design, profile-card, card

8. 90's Profile Card

CSS Profile Cards - 90's profile card
I tried to do 90's profile card. I really love 90's design.
Author: Ondřej Bárta (PageOnline)
Created on: July 9, 2013
Made with: HTML, CSS
Tags: 90, css, pure-css, profile, card

9. Parallax Card

CSS Profile Cards - Parallax Card
Author: Hakkam Abdullah (Moslim)
Created on: August 15, 2017
Made with: HTML, CSS
Tags: parallax, flip-card, css3-animation, 3d animaition, hakkam

10. Profile Card

CSS Profile Cards - Profile Card
Author: MuhammadFarhan999 (muhammadfarhan999)
Created on: July 6, 2020
Made with: HTML, CSS
Tags: profile-card

11. Profile Card

CSS Profile Cards - Profile card
Author: MuhammadFarhan999 (muhammadfarhan999)
Created on: June 27, 2020
Made with: HTML, CSS
Tags: profile-card

12. Profile Card

CSS Profile Cards - Profile card
Profile card with image hover. Description generator: https://www.character-generator.org.uk/detailed/ #7 of daily 20 minute coding challenge.
Author: Ashvin Motye (ashvinmotye)
Created on: June 1, 2020
Made with: HTML, SCSS
Tags: profile-card

13. UI Profile Card

CSS Profile Cards - UI Profile Card
Author: Beni (Beni7)
Created on: March 19, 2020
Made with: HTML, CSS
Tags: profile, social, profile-card, ui profile

14. Model CSS Profile

CSS Profile Cards - Model CSS Profile
Responsive and colorful Profile Card concept.
Author: Beni (Beni7)
Made with: HTML, CSS
Tags: profile-card, social, profile, social card

15. Profile Card

CSS Profile Cards - Profile Card
If you like my design, you can check out my Youtube channel https://www.youtube.com/channel/UCiOTX2A4DUhouuuPbLFS7VQ
Author: TheHorse (TheHorse)
Created on: May 10, 2020
Made with: HTML, CSS
Tags: profile-card, card, box-shadow card, card hover effect

16. Profile Card

CSS Profile Cards - Profile Card
This is some kind of profile card. The Hire me button has a moving gradient hover animation
Author: Russ Perry (rperry1886)
Created on: February 11, 2020
Made with: HTML, SCSS
Tags: card, profile-card, portfolio, social-media

17. User Profile Card

CSS Profile Cards - User Profile Card
A simple User Profile Card Component built using HTML and CSS.
Author: Alexandra Caulea (alexandracaulea)
Created on: January 31, 2020
Made with: HTML, CSS
Tags: ui, profile-card, css

18. CSS Wedding Contact Card

CSS Profile Cards - CSS Wedding Contact Card
I love playing with fun techniques and learning. In Smashing Magazine there was a fun article about flipping cards and maintaining container size. My take on it doesn't need the dynamic size, but I still wanted to play with the code. This wedding contact card is inspired by a Dribbble by...
Read More
Author: Ricky Eckhardt (rickyeckhardt)
Created on: February 12, 2020
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: card, profile-card, animation, typography, layout

19. Profile Card

CSS Profile Cards - Profile Card
Author: canburak1992 (csstutorial)
Created on: October 25, 2019
Made with: HTML, CSS
Tags: profile-card, card, ui profile card, card hover effect

20. UI Card

CSS Profile Cards - UI Card
Author: AmolB (AmolVBharambe)
Created on: July 4, 2019
Made with: HTML, SCSS
Tags: card, ui card, profile-card