40+ CSS Profile Cards

Are you looking to enhance the aesthetics of your website or app with some stylish yet interactive profile cards? Look no further! In this collection, we are featuring 40+ HTML and CSS profile card code examples sourced from reliable platforms such as CodePen and GitHub.

Profile cards are small boxes that are used by web designers and developers to display information about users or content in a visually appealing and scannable manner.

From sleek and minimalist designs to eye-catching animations, there’s a profile card style for every project that you’ve ever imagined. In our compilation, each profile card is carefully selected; you can customise them to match your brand’s vibe and make your site visually stunning.

So, let’s explore our collection of CSS profile cards and make your project user-friendly.

1. Profile Card

See the Pen <a href="https://codepen.io/JavaScriptJunkie/pen/jvRGZy"> Profile Card</a> by Muhammed Erdem (<a href="https://codepen.io/JavaScriptJunkie">@JavaScriptJunkie</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Muhammed Erdem
Source: Code / Demo
Created on: SEPTEMBER 23, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

2. Profile Card UI

See the Pen <a href="https://codepen.io/team/jotform/pen/XWmqoMp"> Profile Card UI</a> by JotForm (<a href="https://codepen.io/team/jotform">@jotform</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: JotForm
Source: Code / Demo
Created on: MAY 11, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(Babel)

3. Profile Card

See the Pen
#1336 – Profile Card by LittleSnippets.net (@littlesnippets)
on CodePen.

Author: LittleSnippets.net
Source: Code / Demo
Created on: JANUARY 20, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

4. Profile Card

See the Pen <a href="https://codepen.io/littlesnippets/pen/WrMOWG"> #1344 – Profile Card</a> by LittleSnippets.net (<a href="https://codepen.io/littlesnippets">@littlesnippets</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: LittleSnippets.net
Source: Code / Demo
Created on: JANUARY 23, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

5. Profile Card – Pure CSS

See the Pen <a href="https://codepen.io/daliannyvieira/pen/QKKyJY"> Profile Card – Pure CSS</a> by Dali (<a href="https://codepen.io/daliannyvieira">@daliannyvieira</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dali
Source: Code / Demo
Created on: SEPTEMBER 19, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

6. My Profile Card

See the Pen <a href="https://codepen.io/Creative_Srijon/pen/vLVxEx"> My Profile Card</a> by Srijon Sarker (<a href="https://codepen.io/Creative_Srijon">@Creative_Srijon</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Srijon Sarker
Source: Code / Demo
Created on: FEBRUARY 6, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

7. Profile Card

See the Pen <a href="https://codepen.io/littlesnippets/pen/YWNarV"> #1515 – Profile Card</a> by LittleSnippets.net (<a href="https://codepen.io/littlesnippets">@littlesnippets</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: LittleSnippets.net
Source: Code / Demo
Created on: JUNE 25, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

8. Profile card

See the Pen <a href="https://codepen.io/havardob/pen/qBXZPRE"> Profile card </a> by Håvard Brynjulfsen (<a href="https://codepen.io/havardob">@havardob</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Håvard Brynjulfsen
Source: Code / Demo
Created on: OCTOBER 18, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

9. Profile cards with hover effect

See the Pen <a href="https://codepen.io/miketricking/pen/JXdzpL"> Profile cards with hover effect</a> by Mike Young (<a href="https://codepen.io/miketricking">@miketricking</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mike Young
Source: Code / Demo
Created on: MARCH 3, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

10. Profile Card Hover Effect

See the Pen <a href="https://codepen.io/petegarvin1/pen/YzWBbRx"> Profile Card Hover Effect</a> by P (<a href="https://codepen.io/petegarvin1">@petegarvin1</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: P
Source: Code / Demo
Created on: NOVEMBER 15, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

11. UI Profile Card

See the Pen <a href="https://codepen.io/Beni70/pen/oNXMWNL"> UI Profile Card</a> by Beni (<a href="https://codepen.io/Beni70">@Beni70</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Beni
Source: Code / Demo
Created on: MARCH 20, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

12. Profile Card

See the Pen
Profile Card by MuhammadFarhan999 (@muhammadfarhan999)
on CodePen.

Author: MuhammadFarhan999
Source: Code / Demo
Created on: JULY 6, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

13. Fairly Colourful Profile Card

See the Pen <a href="https://codepen.io/takaneichinose/pen/xvpqgo"> Fairly Colourful Profile Card</a> by Takane Ichinose (<a href="https://codepen.io/takaneichinose">@takaneichinose</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Takane Ichinose
Source: Code / Demo
Created on: AUGUST 6, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Stylus)

14. Profile cards – CSS grid

See the Pen <a href="https://codepen.io/blackellis/pen/jObGbeG"> Profile cards – CSS grid</a> by Alina N. (<a href="https://codepen.io/blackellis">@blackellis</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alina N.
Source: Code / Demo
Created on: MAY 1, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

15. Material Design: Profile Card

See the Pen <a href="https://codepen.io/Mestika/pen/KVXVWE"> Material Design: Profile Card</a> by Emil Devantie Brockdorff (<a href="https://codepen.io/Mestika">@Mestika</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Emil Devantie Brockdorff
Source: Code / Demo
Created on: JANUARY 15, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

16. CSS Profile Card

See the Pen <a href="https://codepen.io/byurhannurula/pen/WzwqYK"> CSS Profile Card</a> by Byurhan Beyzat (<a href="https://codepen.io/byurhannurula">@byurhannurula</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Byurhan Beyzat
Source: Code / Demo
Created on: MARCH 15, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

17. CSS Wedding Contact Card

See the Pen <a href="https://codepen.io/rickyeckhardt/pen/NWqGaKM"> Wedding Contact Card – Pen # 10 – 2020</a> by Ricky Eckhardt (<a href="https://codepen.io/rickyeckhardt">@rickyeckhardt</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ricky Eckhardt
Source: Code / Demo
Created on: FEBRUARY 12, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

18. Profile Card

See the Pen <a href="https://codepen.io/TheHorse/pen/JjYvZOz"> Profile Card</a> by TheHorse (<a href="https://codepen.io/TheHorse">@TheHorse</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: TheHorse
Source: Code / Demo
Created on: MAY 10, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

19. CvCardProfile

See the Pen <a href="https://codepen.io/tamer_aka_remat/pen/GYyvoj"> CvCardProfile</a> by aka Tamer (<a href="https://codepen.io/tamer_aka_remat">@tamer_aka_remat</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: remat
Source: Code / Demo
Created on: OCTOBER 16, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

20. 90’s Profile Card

See the Pen <a href="https://codepen.io/bartaxyz/pen/neRaZM"> 90’s profile card</a> by Ondřej Bárta (<a href="https://codepen.io/bartaxyz">@bartaxyz</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ondřej Bárta
Source: Code / Demo
Created on: JULY 10, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

21. Parallax Card

See the Pen <a href="https://codepen.io/hkmDesigner/pen/zdPrVp"> Parallax Card</a> by Hakkam Abdullah (<a href="https://codepen.io/hkmDesigner">@hkmDesigner</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hakkam Abdullah
Source: Code / Demo
Created on: AUGUST 15, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

22. CSS Profile Card UI

See the Pen <a href="https://codepen.io/roydigerhund/pen/OMreoV"> 006 – Profile</a> by Matthias Martin (<a href="https://codepen.io/roydigerhund">@roydigerhund</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Matthias Martin
Source: Code / Demo
Created on: FEBRUARY 12,2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS (SCSS)

23. Profile Card

See the Pen <a href="https://codepen.io/ashvinmotye/pen/xxZKdWX"> Profile card</a> by Ashvin Motye (<a href="https://codepen.io/ashvinmotye">@ashvinmotye</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ashvin Motye
Source: Code / Demo
Created on: JUNE 1, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

24. InfoCard CSS Only

See the Pen <a href="https://codepen.io/LIMESTA/pen/KKPbvpL"> InfoCard CSS Only V1</a> by Emil Alicic (<a href="https://codepen.io/LIMESTA">@LIMESTA</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Emil Alicic
Source: Code / Demo
Created on: SEPTEMBER 22, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

25. UI Card

See the Pen <a href="https://codepen.io/AmolVBharambe/pen/BgPKWM"> UI Card</a> by AmolB (<a href="https://codepen.io/AmolVBharambe">@AmolVBharambe</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: AmolB
Source: Code / Demo
Created on: JULY 4, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

26. Card Challenge

See the Pen <a href="https://codepen.io/carlita712/pen/mNLzye"> Card Challenge</a> by Carlita Centeno (<a href="https://codepen.io/carlita712">@carlita712</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Carlita Centeno
Source: Code / Demo
Created on: AUGUST 9, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

27. Profile Card UI Design Cool Hover Effect

See the Pen <a href="https://codepen.io/FrankieDoodie/pen/NOJpVX"> Profile Card UI Design Cool Hover Effect</a> by FrankieDoodie (<a href="https://codepen.io/FrankieDoodie">@FrankieDoodie</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: FrankieDoodie
Source: Code / Demo
Created on: OCTOBER 28, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

28. PopDog Card

See the Pen <a href="https://codepen.io/kum26/pen/QWNraVR"> PopDog Card</a> by Naveen (<a href="https://codepen.io/kum26">@kum26</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Naveen
Source: Code / Demo
Created on: SEPTEMBER 12, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

29. User Profile Card

See the Pen <a href="https://codepen.io/alexandracaulea/pen/wvBLyqJ"> User Profile Card</a> by Alexandra Caulea (<a href="https://codepen.io/alexandracaulea">@alexandracaulea</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alexandra Caulea
Source: Code / Demo
Created on: JANUARY 31, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

30. CSS Profile

See the Pen <a href="https://codepen.io/Beni70/pen/OJVwmVQ"> Profile Card</a> by Beni (<a href="https://codepen.io/Beni70">@Beni70</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Beni
Source: Code / Demo
Created on: MARCH 20, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

31. Vertical Swiper Slider

See the Pen <a href="https://codepen.io/burakcanince/pen/oNNWOzY"> Vertical Swiper Slider</a> by burakcanince (<a href="https://codepen.io/burakcanince">@burakcanince</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: burakcanince
Source: Code / Demo
Created on: OCTOBER 25, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

32. Profile Card UI

See the Pen <a href="https://codepen.io/genarocolusso/pen/xONEXg"> Daily UI #6 – Profile</a> by Genaro Colusso (<a href="https://codepen.io/genarocolusso">@genarocolusso</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Genaro Colusso
Source: Code / Demo
Created on: AUGUST 22, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

33. Game-Based Cards

See the Pen <a href="https://codepen.io/cssparadise/pen/rNZxMXL"> Game-Based Cards</a> by freefrontend.com (<a href="https://codepen.io/cssparadise">@cssparadise</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ffreefrontend.com
Source: Code / Demo
Created on: FEBRUARY 20, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

34. UI Profile Cards

See the Pen <a href="https://codepen.io/2975/pen/QrZpoa"> UI Profile Cards</a> by neil pearce (<a href="https://codepen.io/2975">@2975</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: neil pearce
Source: Code / Demo
Created on: MAY 16, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

35. Social Card Hover

See the Pen <a href="https://codepen.io/AdamDipinto/pen/JjPmxPe"> Social Card Hover 2</a> by Adam Dipinto (<a href="https://codepen.io/AdamDipinto">@AdamDipinto</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Adam Dipinto
Source: Code / Demo
Created on: SEPTEMBER 19, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

36. Profile Card

See the Pen <a href="https://codepen.io/rperry1886/pen/JjdYGWq"> Profile Card</a> by Russ Perry (<a href="https://codepen.io/rperry1886">@rperry1886</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Russ Perry
Source: Code / Demo
Created on: FEBRUARY 12, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

37. Profile Card

See the Pen <a href="https://codepen.io/muhammadfarhan999/pen/oNbepyP"> Profile card</a> by MuhammadFarhan999 (<a href="https://codepen.io/muhammadfarhan999">@muhammadfarhan999</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: MuhammadFarhan999
Source: Code / Demo
Created on: JUNE 27, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

38. Profile Card Design

See the Pen <a href="https://codepen.io/FlorinPop17/pen/EJKgKB"> #030 – Profile Card Design</a> by Florin Pop (<a href="https://codepen.io/FlorinPop17">@FlorinPop17</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Florin Pop
Source: Code / Demo
Created on: APRIL 4, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

39. Game-Based Cards

See the Pen <a href="https://codepen.io/alvaromontoro/pen/ebPEWb"> Player/User Cards</a> by Alvaro Montoro (<a href="https://codepen.io/alvaromontoro">@alvaromontoro</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alvaro Montoro
Source: Code / Demo
Created on: JANUARY 11, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

40. Flashing Twitter Author Card

See the Pen <a href="https://codepen.io/davideast/pen/KaNwda"> Flashing Twitter Author Card</a> by David East (<a href="https://codepen.io/davideast">@davideast</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: David East
Source: Code / Demo
Created on: JANUARY 17, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

41. Profile Card

See the Pen <a href="https://codepen.io/AlbertFeynman/pen/YJGjmz"> UI #3 – Profile Card</a> by Jove Angelevski (<a href="https://codepen.io/AlbertFeynman">@AlbertFeynman</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jove Angelevski
Source: Code / Demo
Created on: OCTOBER 7, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript