40+ CSS Profile Cards

Enjoy our open-source and free 40+ HTML and CSS profile card code examples. Each item is free and built with pure CSS. Display content on your web project in a visually appealing and user-friendly manner.

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