25+ CSS Profile Cards - Free Code + Demos

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

NEW 🔥 Auto-Apply to 100's of Jobs With AI 🔥

👉 Click to visit: ApplyFox.ai

1. Profile Card UI Design Cool Hover Effect

Profile Card UI Design Cool Hover Effect

Author: FrankieDoodie (FrankieDoodie)

Links: Source Code / Demo

Created on: October 27, 2018

Made with: HTML, CSS

Tags: profile, card, cool, hover, effect

2. CSS Profile Card

This is some kind of profile card. The Hire me button has a moving gradient hover animation

Author: Russ Perry (rperry1886)

Links: Source Code / Demo

Created on: February 11, 2020

Made with: HTML, SCSS

Tags: card, profile-card, portfolio, social-media

3. UI Profile Cards

Author: neil pearce (2975)

Links: Source Code / Demo

Created on: May 16, 2018

Made with: HTML, SCSS

4. CSS Profile Card

Author: Byurhan Beyzat (imbyurhan)

Links: Source Code / Demo

Created on: March 15, 2018

Made with: HTML, SCSS

5. Profile Card UI

a user Profile.

Author: Genaro Colusso (genarocolusso)

Links: Source Code / Demo

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

Codepen profile card. Full page view works best.

Author: Jove Angelevski (AlbertFeynman)

Links: Source Code / Demo

Created on: October 6, 2018

Made with: HTML, SCSS, JS

Tags: card, ui, profile, skill, ui skill

7. Material Design: Profile Card

Material Design: Profile Card

Author: Emil Devantie Brockdorff (Mestika)

Links: Source Code / Demo

Created on: January 15, 2016

Made with: HTML, CSS

Tags: material design, profile-card, card

8. 90's Profile Card

I tried to do 90's profile card. I really love 90's design.

Author: Ondřej Bárta (PageOnline)

Links: Source Code / Demo

Created on: July 9, 2013

Made with: HTML, CSS

Tags: 90, css, pure-css, profile, card

9. Parallax Card

Author: Hakkam Abdullah (Moslim)

Links: Source Code / Demo

Created on: August 15, 2017

Made with: HTML, CSS

Tags: parallax, flip-card, css3-animation, 3d animaition, hakkam

10. Profile Card

Author: MuhammadFarhan999 (muhammadfarhan999)

Links: Source Code / Demo

Created on: July 6, 2020

Made with: HTML, CSS

Tags: profile-card

11. Profile Card

Author: MuhammadFarhan999 (muhammadfarhan999)

Links: Source Code / Demo

Created on: June 27, 2020

Made with: HTML, CSS

Tags: profile-card

12. 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)

Links: Source Code / Demo

Created on: June 1, 2020

Made with: HTML, SCSS

Tags: profile-card

13. UI Profile Card

Author: Beni (Beni7)

Links: Source Code / Demo

Created on: March 19, 2020

Made with: HTML, CSS

Tags: profile, social, profile-card, ui profile

14. Model CSS Profile

Responsive and colorful Profile Card concept.

Author: Beni (Beni7)

Links: Source Code / Demo

Made with: HTML, CSS

Tags: profile-card, social, profile, social card

15. Profile Card

If you like my design, you can check out my Youtube channel https://www.youtube.com/channel/UCiOTX2A4DUhouuuPbLFS7VQ

Author: TheHorse (TheHorse)

Links: Source Code / Demo

Created on: May 10, 2020

Made with: HTML, CSS

Tags: profile-card, card, box-shadow card, card hover effect

16. Profile Card

This is some kind of profile card. The Hire me button has a moving gradient hover animation

Author: Russ Perry (rperry1886)

Links: Source Code / Demo

Created on: February 11, 2020

Made with: HTML, SCSS

Tags: card, profile-card, portfolio, social-media

17. User Profile Card

A simple User Profile Card Component built using HTML and CSS.

Author: Alexandra Caulea (alexandracaulea)

Links: Source Code / Demo

Created on: January 31, 2020

Made with: HTML, CSS

Tags: ui, profile-card, css

18. 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)

Links: Source Code / Demo

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