30+ CSS Profile Cards

Last Updated on by in CSS Examples
CSS Profile Card

If you’re seeking a collection of CSS profile cards to present information in a visually appealing and user-friendly manner on a web site, you’re in luck.

In this compilation, we are displaying free HTML and CSS code examples that showcase profile card designs. We have gathered these examples from reputed platforms such as GitHub and CodePen.

A CSS profile card is a styled web element used for showcasing brief information like a person’s name, image, and description. It’s used in web development for a visually appealing presentation.

Our compilation gives you access to the latest and most innovative profile card designs found on the internet. These cards not only present user information attractively but also offer an excellent opportunity to enhance the appeal and enjoyment of your website or app for users.

Profile cards play an important role in traditional web design because they provide a simple method to show crucial details about people or entities. Whether it’s for user profiles, social media platforms, or team displays, Our CSS profile cards offer an easy way to demonstrate user information that puts a premium on user experience.

No matter if you are a UI developer, designer, or someone who is seeking to create interactive user profiles, our handpicked assortment is an ocean of handy resources to mesmerize your site visitors and uplift user engagement.

01. Profile cards – CSS grid

See the Pen
Profile cards – CSS grid
by Alina N. (@blackellis)
on CodePen.


Author: Alina N. @blackellis
Links: Source Code / Demo
Created on: May 1, 2020
Made with: HTML, CSS

02. Profile Card

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


Author: TheHorse @TheHorse
Links: Source Code / Demo
Created on: May 10, 2020
Made with: HTML, CSS

03. Profile Card

See the Pen
Profile card
by Ashvin Motye (@ashvinmotye)
on CodePen.


Author: Ashvin Motye @ashvinmotye
Links: Source Code / Demo
Created on: June 1, 2020
Made with: HTML, CSS(SCSS)

04. PopDog Card

See the Pen
PopDog Card
by Naveen (@kum26)
on CodePen.


Author: Naveen @kum26
Links: Source Code / Demo
Created on: September 12, 2020
Made with: HTML, CSS (SCSS)

05. Profile Card UI

See the Pen
Daily UI #6 – Profile
by Genaro Colusso (@genarocolusso)
on CodePen.


Author: Genaro Colusso @genarocolusso
Links: Source Code / Demo
Created on: August 22, 2016
Made with: HTML(Pug), CSS(SCSS)

06. Profile Card

See the Pen
Profile Card
by Russ Perry (@rperry1886)
on CodePen.


Author: Russ Perry @rperry1886
Links: Source Code / Demo
Created on: February 12, 2020
Made with: HTML, CSS(SCSS)

07. UI Profile Card

See the Pen
UI Profile Card
by Beni (@Beni70)
on CodePen.


Author: Beni @Beni70
Links: Source Code / Demo
Created on: March 20, 2020
Made with: HTML, CSS

08. CSS Profile Card

See the Pen
CSS Profile Card
by Byurhan Beyzat (@byurhannurula)
on CodePen.


Author: Byurhan Beyzat @imbyurhan
Links: Source Code / Demo
Created on: March 15, 2018
Made with: HTML, CSS(SCSS)

09. 90’s Profile Card

See the Pen
90’s profile card
by Ondřej Bárta (@bartaxyz)
on CodePen.


Author: Ondřej Bárta @bartaxyz
Links: Source Code / Demo
Created on: July 10, 2013
Made with: HTML, CSS

10.  UI Card

See the Pen
UI Card
by AmolB (@AmolVBharambe)
on CodePen.


Author: AmolB @AmolVBharambe
Links: Source Code / Demo
Created on:  July 4, 2019
Made with: HTML, CSS(SCSS)

11. CSS Profile

See the Pen
Profile Card
by Beni (@Beni70)
on CodePen.


Author: Beni @Beni70
Links: Source Code / Demo
Created on: March 20, 2020
Made with: HTML, CSS

12. UI Profile Cards

See the Pen
UI Profile Cards
by neil pearce (@2975)
on CodePen.


Author: neil pearce @2975
Links: Source Code / Demo
Created on: May 16, 2018
Made with: HTML, CSS(SCSS)

13. Profile Card

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


Author: MuhammadFarhan999 @muhammadfarhan999
Links: Source Code / Demo
Created on: June 27, 2020
Made with: HTML, CSS

14. User Profile Card

See the Pen
User Profile Card
by Alexandra Caulea (@alexandracaulea)
on CodePen.


Author: Alexandra Caulea @alexandracaulea
Links: Source Code / Demo
Created on: January 31, 2020
Made with: HTML, CSS

15. CSS Profile Card UI

See the Pen
006 – Profile
by Matthias Martin (@roydigerhund)
on CodePen.


Author: Matthias Martin @roydigerhund
Links: Source Code / Demo
Created on: February 12,2016
Made with: HTML, CSS(SCSS)

16. Material Design: Profile Card

See the Pen
Material Design: Profile Card
by Emil Devantie Brockdorff (@Mestika)
on CodePen.


Author: Emil Devantie Brockdorff @Mestika
Links: Source Code / Demo
Created on: January 15, 2016
Made with: HTML, CSS

17. Profile Card

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


Author: MuhammadFarhan999 @muhammadfarhan999
Links: Source Code / Demo
Created on: July 6, 2020
Made with: HTML, CSS

18. CSS Wedding Contact Card

See the Pen
Wedding Contact Card – Pen # 10 – 2020
by Ricky Eckhardt (@rickyeckhardt)
on CodePen.


Author: Ricky Eckhardt @rickyeckhardt
Links: Source Code / Demo
Created on: February 12, 2020
Made with: HTML(Pug), CSS(SCSS)

19. Parallax Card

See the Pen
Parallax Card
by Hakkam Abdullah (@hkmDesigner)
on CodePen.


Author: Hakkam Abdullah @hkmDesigner
Links: Source Code / Demo
Created on: August 15, 2017
Made with: HTML, CSS

20. InfoCard CSS Only

See the Pen
InfoCard CSS Only V1
by Emil Alicic (@LIMESTA)
on CodePen.


Author: Emil Alicic @LIMESTA
Links: Source Code / Demo
Created on: September 22, 2019
Made with: HTML, CSS

21. Profile Card UI Design Cool Hover Effect

See the Pen
Profile Card UI Design Cool Hover Effect
by FrankieDoodie (@FrankieDoodie)
on CodePen.


Author: FrankieDoodie @FrankieDoodie
Links: Source Code / Demo
Created on: October 28, 2018
Made with: HTML, CSS

22. Vertical Swiper Slider

See the Pen
Vertical Swiper Slider
by burakcanince (@burakcanince)
on CodePen.


Author: burakcanince @burakcanince
Links: Source Code / Demo
Created on: October 25, 2019
Made with: HTML, CSS(SCSS), JS

23. Social Card Hover

See the Pen
Social Card Hover 2
by Adam Dipinto (@AdamDipinto)
on CodePen.


Author: Adam Dipinto @AdamDipinto
Links: Source Code / Demo
Created on: September 19, 2019
Made with: HTML, CSS

24. Profile Card Design

See the Pen
#030 – Profile Card Design
by Florin Pop (@FlorinPop17)
on CodePen.


Author: Florin Pop @FlorinPop17
Links: Source Code / Demo
Created on: April 4, 2019
Made with: HTML, CSS

25. Fairly Colourful Profile Card

See the Pen
Fairly Colourful Profile Card
by Takane Ichinose (@takaneichinose)
on CodePen.


Author: Takane Ichinose @takaneichinose
Links: Source Code / Demo
Created on: August 6, 2019
Made with: HTML (Pug),CSS (Stylus)

26. CvCardProfile

See the Pen
CvCardProfile
by remat (@tamer_aka_remat)
on CodePen.


Author: remat @tamer_aka_remat
Links: Source Code / Demo
Created on: October 16, 2018
Made with: HTML, CSS(SCSS)

27. Card Challenge

See the Pen
Card Challenge
by Carlita Centeno (@carlita712)
on CodePen.


Author: Carlita Centeno @carlita712
Links: Source Code / Demo
Created on: August 9, 2019
Made with: HTML, CSS(SCSS)

28. Profile Card hover over it once

See the Pen
Profile Card hover over it once
by Atul Prajapati (@atulcodex)
on CodePen.


Author: Atul Prajapati @atulcodex
Links: Source Code / Demo
Created on: March 29, 2019
Made with: HTML, CSS

29. Game-Based Cards

See the Pen
Game-Based Cards
by freefrontend.com (@cssparadise)
on CodePen.


Author: freefrontend.com @cssparadise
Links: Source Code / Demo
Created on: February 20, 2023
Made with: HTML, CSS(SCSS)

30. Profile Card

See the Pen
UI #3 – Profile Card
by Jove Angelevski (@AlbertFeynman)
on CodePen.


Author: Jove Angelevski @AlbertFeynman
Links: Source Code / Demo
Created on: October 7, 2018
Made with: HTML, CSS(SCSS), JavaScript

31. Player/User Cards

See the Pen
Player/User Cards
by Alvaro Montoro (@alvaromontoro)
on CodePen.


Author: Alvaro Montoro @alvaromontoro
Links: Source Code / Demo
Created on: January 11, 2019
Made with: HTML, CSS

32. Flashing Twitter Author Card

See the Pen
Flashing Twitter Author Card
by David East (@davideast)
on CodePen.


Author: David East @davideast
Links: Source Code / Demo
Created on: January 17, 2017
Made with: HTML, CSS

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.