20 CSS Profile Cards
07 / 20

All 20 in 20 CSS Profile Cards

  1. 01Bento Grid Profile Card
  2. 02Glassmorphism 2.0 Profile Card
  3. 033D Flip Profile Card on Hover
  4. 04Social Icons Slide-up Overlay Card
  5. 05Dark Mode Toggle Team Card
  6. 06Skeleton Loading Shimmer Profile Card
  7. 07CSS Grid Responsive Team Member Row
  8. 083D Perspective Tilt Profile Card
  9. 09Gaming / Discord Style Profile Overlay
  10. 10Minimalist LinkedIn-style Business Card
  11. 11Retro / 90s Cyberpunk Profile Card
  12. 12Neumorphic Soft-Shadow User Profile
  13. 13Vibrant Gradient Border Profile Card
  14. 14Material Design 3 Avatar Card with Ripples
  15. 15Tabbed Content Profile Component
  16. 16Flexbox E-commerce Hire-Me Badge Card
  17. 17Testimonial Customer Review Profile Card
  18. 18Creator Link-in-Bio Mobile Profile Card
  19. 19Morphing Profile Card / Expanding Bio
  20. 20SaaS User Dropdown Profile Card
Pure CSSMIT licensed

CSS Grid Responsive Team Member Row

A four-across team row that reflows to two columns on narrow screens, dimming every sibling card while the hovered one lifts and highlights.

Live Demo
Try it

Build UI like this from scratch: Flexbox, Grid, animations & responsive CSS

ZTM · The CSS Bootcamp · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

The code

<div class="pc-07">
  <div class="pc-07__grid">
    <article class="pc-07__card" style="--h:275">
      <div class="pc-07__pfp">AL</div>
      <h3>Amara Liu</h3><p>Backend</p>
      <span class="pc-07__dot"></span>
    </article>
    <article class="pc-07__card" style="--h:200">
      <div class="pc-07__pfp">DV</div>
      <h3>Deepa V.</h3><p>ML Research</p>
      <span class="pc-07__dot"></span>
    </article>
    <article class="pc-07__card" style="--h:330">
      <div class="pc-07__pfp">RK</div>
      <h3>Rui Koda</h3><p>Design Sys</p>
      <span class="pc-07__dot"></span>
    </article>
    <article class="pc-07__card" style="--h:150">
      <div class="pc-07__pfp">MB</div>
      <h3>Marco B.</h3><p>DevOps</p>
      <span class="pc-07__dot"></span>
    </article>
  </div>
</div>
.pc-07,
.pc-07 *,
.pc-07 *::before,
.pc-07 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.pc-07 ::selection {
  background: #00e0a4;
  color: #062;
}

.pc-07 {
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  background: #08120f;
  color: #eafff7;
}

.pc-07__grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
  max-width: 640px;
  width: 100%;
}

.pc-07__card {
  position: relative;
  background: linear-gradient(160deg,#0f2620,#0c1c18);
  border: 1px solid #163a30;
  border-radius: 20px;
  padding: 22px 16px;
  text-align: center;
  box-shadow: 0 14px 34px -16px rgba(0,0,0,.7);
  transition: transform .4s cubic-bezier(.2,.8,.2,1),filter .4s,opacity .4s,box-shadow .4s;
}

.pc-07__grid:hover .pc-07__card {
  opacity: .5;
  filter: saturate(.6) brightness(.8);
}

.pc-07__grid .pc-07__card:hover {
  opacity: 1;
  filter: none;
  transform: translateY(-8px) scale(1.04);
  box-shadow: 0 26px 50px -18px rgba(0,224,164,.4);
  border-color: #00e0a4;
}

.pc-07__pfp {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.15rem;
  color: #062;
  background: conic-gradient(from calc(var(--h) * 1deg),#00e0a4,#00b4dc,#00e0a4);
}

.pc-07__card h3 {
  font-size: 1rem;
  font-weight: 800;
}

.pc-07__card p {
  font-size: .76rem;
  color: #7fd9c4;
  margin-top: 2px;
}

.pc-07__dot {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #00e0a4;
  box-shadow: 0 0 10px #00e0a4;
  animation: pc-07-blink 2s ease-in-out infinite;
}

@keyframes pc-07-blink {
  0%,
    100% {
    opacity: 1;
  }

  50% {
    opacity: .3;
  }
}

@media (max-width: 560px) {
  .pc-07__grid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-07 * {
    animation: none!important;
    transition: opacity .3s,filter .3s!important;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Profile Card from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: CSS Grid Responsive Team Member Row
Source: https://codefronts.com/components/css-profile-cards/css-grid-responsive-team-member-row/

A four-across team row that reflows to two columns on narrow screens, dimming every sibling card while the hovered one lifts and highlights.
## HTML
```html
<div class="pc-07">
  <div class="pc-07__grid">
    <article class="pc-07__card" style="--h:275">
      <div class="pc-07__pfp">AL</div>
      <h3>Amara Liu</h3><p>Backend</p>
      <span class="pc-07__dot"></span>
    </article>
    <article class="pc-07__card" style="--h:200">
      <div class="pc-07__pfp">DV</div>
      <h3>Deepa V.</h3><p>ML Research</p>
      <span class="pc-07__dot"></span>
    </article>
    <article class="pc-07__card" style="--h:330">
      <div class="pc-07__pfp">RK</div>
      <h3>Rui Koda</h3><p>Design Sys</p>
      <span class="pc-07__dot"></span>
    </article>
    <article class="pc-07__card" style="--h:150">
      <div class="pc-07__pfp">MB</div>
      <h3>Marco B.</h3><p>DevOps</p>
      <span class="pc-07__dot"></span>
    </article>
  </div>
</div>
```
## CSS
```css
.pc-07,
.pc-07 *,
.pc-07 *::before,
.pc-07 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.pc-07 ::selection {
  background: #00e0a4;
  color: #062;
}

.pc-07 {
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  background: #08120f;
  color: #eafff7;
}

.pc-07__grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
  max-width: 640px;
  width: 100%;
}

.pc-07__card {
  position: relative;
  background: linear-gradient(160deg,#0f2620,#0c1c18);
  border: 1px solid #163a30;
  border-radius: 20px;
  padding: 22px 16px;
  text-align: center;
  box-shadow: 0 14px 34px -16px rgba(0,0,0,.7);
  transition: transform .4s cubic-bezier(.2,.8,.2,1),filter .4s,opacity .4s,box-shadow .4s;
}

.pc-07__grid:hover .pc-07__card {
  opacity: .5;
  filter: saturate(.6) brightness(.8);
}

.pc-07__grid .pc-07__card:hover {
  opacity: 1;
  filter: none;
  transform: translateY(-8px) scale(1.04);
  box-shadow: 0 26px 50px -18px rgba(0,224,164,.4);
  border-color: #00e0a4;
}

.pc-07__pfp {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.15rem;
  color: #062;
  background: conic-gradient(from calc(var(--h) * 1deg),#00e0a4,#00b4dc,#00e0a4);
}

.pc-07__card h3 {
  font-size: 1rem;
  font-weight: 800;
}

.pc-07__card p {
  font-size: .76rem;
  color: #7fd9c4;
  margin-top: 2px;
}

.pc-07__dot {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #00e0a4;
  box-shadow: 0 0 10px #00e0a4;
  animation: pc-07-blink 2s ease-in-out infinite;
}

@keyframes pc-07-blink {
  0%,
    100% {
    opacity: 1;
  }

  50% {
    opacity: .3;
  }
}

@media (max-width: 560px) {
  .pc-07__grid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-07 * {
    animation: none!important;
    transition: opacity .3s,filter .3s!important;
  }
}
```

How this works

The row is a grid-template-columns:repeat(4,1fr) that collapses to two columns at a media breakpoint, so avatars keep their proportions across layouts. The staggered-highlight trick lives in two rules: .pc-07__grid:hover .pc-07__card dims and desaturates every card, then the more specific .pc-07__card:hover rule restores and lifts only the one under the cursor.

The lift uses transform:translateY() and scale() plus a coloured glow shadow, all compositor-friendly. Each avatar's conic-gradient start angle is derived from a per-card --h custom property, so no two rings look identical.

Make it yours

  • Change the column count by editing both repeat(4,1fr) and the mobile repeat(2,1fr) breakpoint.
  • Tune the dim strength via the opacity/filter on .pc-07__grid:hover .pc-07__card.
  • Adjust the highlight glow by editing the hovered card's box-shadow colour.
  • Give each avatar a unique ring by changing the inline --h value per card.

Gotchas — read before shipping

  • The dim-siblings effect depends on selector specificity — the hovered-card rule must outrank the group-hover rule.
  • Group hover has no clean touch analogue; the row simply shows all cards at rest on tap, which is an acceptable fallback.
  • When adding cards, keep --h values spread out so adjacent rings stay visually distinct.

Browser support

ChromeSafariFirefoxEdge
57+10.1+52+57+

CSS Grid plus conic-gradient (Chrome 69+) for the rings; older Safari shows a flat ring.

Techniques used in this demo

conic-gradient()MDN ↗filterMDN ↗grid-templateMDN ↗@keyframesMDN ↗place-items / place-contentMDN ↗box-shadowMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →