23 CSS Flip Cards06 / 23

Pure CSSMIT licensed

Meet the Team Bio Card

Front shows avatar, role badge, name, and key stats; back reveals biography, social icon links, and a contact email action.

Published

Live Demo
Try it

The code

<div class="fc-04">
  <div class="fc-04__scene">
    <div class="fc-04__card">
      <div class="fc-04__front">
        <div class="fc-04__avatar">
          <svg width="60" height="60" viewBox="0 0 60 60"><circle cx="30" cy="22" r="14" fill="rgba(59,130,246,.6)"/><ellipse cx="30" cy="54" rx="22" ry="16" fill="rgba(59,130,246,.4)"/></svg>
        </div>
        <div class="fc-04__role-badge">Lead Designer</div>
        <div class="fc-04__member-name">Aria Chen</div>
        <div class="fc-04__dept">Product & UX</div>
        <div class="fc-04__stat-row">
          <div class="fc-04__stat"><div class="fc-04__stat-num">120+</div><div class="fc-04__stat-lbl">Projects</div></div>
          <div class="fc-04__stat"><div class="fc-04__stat-num">6 yrs</div><div class="fc-04__stat-lbl">Experience</div></div>
          <div class="fc-04__stat"><div class="fc-04__stat-num">98%</div><div class="fc-04__stat-lbl">Rating</div></div>
        </div>
        <div class="fc-04__front-hint">Hover to connect →</div>
      </div>
      <div class="fc-04__back">
        <div class="fc-04__bio-title">About Aria</div>
        <div class="fc-04__bio">Aria leads design systems and cross-platform UX at NovaTech. She specialises in accessible, data-dense interfaces that scale from mobile to enterprise dashboards.</div>
        <div class="fc-04__social">
          <a class="fc-04__social-btn" href="#">𝕏 Twitter</a>
          <a class="fc-04__social-btn" href="#">in LinkedIn</a>
          <a class="fc-04__social-btn" href="#">⌥ Dribbble</a>
        </div>
        <a class="fc-04__contact" href="mailto:aria@novatech.io">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 7L2 7"/></svg>
          aria@novatech.io
        </a>
      </div>
    </div>
  </div>
</div>
.fc-04,
.fc-04 *,
.fc-04 *::before,
.fc-04 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.fc-04 ::selection {
  background: #3b82f6;
  color: #fff;
}

.fc-04 {
  --bg: #08090f;
  --blue: #3b82f6;
  --cyan: #22d3ee;
  --white: #f8fafc;
  --card-w: 300px;
  --card-h: 400px;
  font-family: 'Segoe UI',system-ui,sans-serif;
  background: radial-gradient(ellipse at 60% 0%,#0c1a3a,#08090f 60%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--white);
}

.fc-04__scene {
  width: var(--card-w);
  height: var(--card-h);
  perspective: 1200px;
  cursor: pointer;
}

.fc-04__card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.4,0,.2,1);
}
/* Scale-and-flip — card shrinks slightly, rotates, then settles to its
   resting size with a subtle bounce. Reads as "stepping forward to
   introduce themselves" rather than a mechanical spin. */

.fc-04__scene:hover .fc-04__card {
  animation: fc-04-scale-flip .85s cubic-bezier(.34,1.4,.5,1) forwards;
}

@keyframes fc-04-scale-flip {
  0% {
    transform: rotateY(0deg) scale(1);
  }

  40% {
    transform: rotateY(90deg) scale(.85);
  }

  70% {
    transform: rotateY(160deg) scale(.92);
  }

  100% {
    transform: rotateY(180deg) scale(1.03);
  }
}

.fc-04__front,
.fc-04__back {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
/* FRONT */

.fc-04__front {
  background: linear-gradient(160deg,#0d1b3e,#0a1220);
  border: 1px solid rgba(59,130,246,.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 24px;
}

.fc-04__avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(59,130,246,.4);
  box-shadow: 0 0 30px rgba(59,130,246,.25);
  margin-bottom: 18px;
  background: linear-gradient(135deg,#1e3a8a,#1e40af);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-04__role-badge {
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 700;
  margin-bottom: 6px;
}

.fc-04__member-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--white);
  text-align: center;
}

.fc-04__dept {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(248,250,252,.4);
  background: rgba(59,130,246,.1);
  border: 1px solid rgba(59,130,246,.2);
  padding: 3px 12px;
  border-radius: 20px;
}

.fc-04__stat-row {
  display: flex;
  gap: 24px;
  margin-top: 24px;
}

.fc-04__stat {
  text-align: center;
}

.fc-04__stat-num {
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(135deg,var(--blue),var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fc-04__stat-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(248,250,252,.35);
  margin-top: 2px;
}

.fc-04__front-hint {
  margin-top: auto;
  font-size: 10px;
  color: rgba(248,250,252,.25);
  letter-spacing: .08em;
}
/* BACK */

.fc-04__back {
  background: linear-gradient(160deg,#0d1117,#111827);
  border: 1px solid rgba(34,211,238,.2);
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  padding: 28px;
  gap: 16px;
}

.fc-04__bio-title {
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 700;
}

.fc-04__bio {
  font-size: 13px;
  color: rgba(248,250,252,.65);
  line-height: 1.7;
}

.fc-04__social {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.fc-04__social-btn {
  flex: 1;
  padding: 10px 6px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(248,250,252,.7);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background .2s,border-color .2s;
  display: block;
}

.fc-04__social-btn:hover {
  background: rgba(59,130,246,.15);
  border-color: rgba(59,130,246,.3);
  color: var(--blue);
}

.fc-04__contact {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg,rgba(59,130,246,.15),rgba(34,211,238,.08));
  border: 1px solid rgba(59,130,246,.2);
  font-size: 12px;
  color: rgba(248,250,252,.7);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .fc-04__card {
    transition: none;
  }
}
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 Flip 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: Meet the Team Bio Card
Source: https://codefronts.com/components/css-flip-cards/meet-the-team-bio-card/

Front shows avatar, role badge, name, and key stats; back reveals biography, social icon links, and a contact email action.
## HTML
```html
<div class="fc-04">
  <div class="fc-04__scene">
    <div class="fc-04__card">
      <div class="fc-04__front">
        <div class="fc-04__avatar">
          <svg width="60" height="60" viewBox="0 0 60 60"><circle cx="30" cy="22" r="14" fill="rgba(59,130,246,.6)"/><ellipse cx="30" cy="54" rx="22" ry="16" fill="rgba(59,130,246,.4)"/></svg>
        </div>
        <div class="fc-04__role-badge">Lead Designer</div>
        <div class="fc-04__member-name">Aria Chen</div>
        <div class="fc-04__dept">Product & UX</div>
        <div class="fc-04__stat-row">
          <div class="fc-04__stat"><div class="fc-04__stat-num">120+</div><div class="fc-04__stat-lbl">Projects</div></div>
          <div class="fc-04__stat"><div class="fc-04__stat-num">6 yrs</div><div class="fc-04__stat-lbl">Experience</div></div>
          <div class="fc-04__stat"><div class="fc-04__stat-num">98%</div><div class="fc-04__stat-lbl">Rating</div></div>
        </div>
        <div class="fc-04__front-hint">Hover to connect →</div>
      </div>
      <div class="fc-04__back">
        <div class="fc-04__bio-title">About Aria</div>
        <div class="fc-04__bio">Aria leads design systems and cross-platform UX at NovaTech. She specialises in accessible, data-dense interfaces that scale from mobile to enterprise dashboards.</div>
        <div class="fc-04__social">
          <a class="fc-04__social-btn" href="#">𝕏 Twitter</a>
          <a class="fc-04__social-btn" href="#">in LinkedIn</a>
          <a class="fc-04__social-btn" href="#">⌥ Dribbble</a>
        </div>
        <a class="fc-04__contact" href="mailto:aria@novatech.io">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 7L2 7"/></svg>
          aria@novatech.io
        </a>
      </div>
    </div>
  </div>
</div>
```
## CSS
```css
.fc-04,
.fc-04 *,
.fc-04 *::before,
.fc-04 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.fc-04 ::selection {
  background: #3b82f6;
  color: #fff;
}

.fc-04 {
  --bg: #08090f;
  --blue: #3b82f6;
  --cyan: #22d3ee;
  --white: #f8fafc;
  --card-w: 300px;
  --card-h: 400px;
  font-family: 'Segoe UI',system-ui,sans-serif;
  background: radial-gradient(ellipse at 60% 0%,#0c1a3a,#08090f 60%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--white);
}

.fc-04__scene {
  width: var(--card-w);
  height: var(--card-h);
  perspective: 1200px;
  cursor: pointer;
}

.fc-04__card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.4,0,.2,1);
}
/* Scale-and-flip — card shrinks slightly, rotates, then settles to its
   resting size with a subtle bounce. Reads as "stepping forward to
   introduce themselves" rather than a mechanical spin. */

.fc-04__scene:hover .fc-04__card {
  animation: fc-04-scale-flip .85s cubic-bezier(.34,1.4,.5,1) forwards;
}

@keyframes fc-04-scale-flip {
  0% {
    transform: rotateY(0deg) scale(1);
  }

  40% {
    transform: rotateY(90deg) scale(.85);
  }

  70% {
    transform: rotateY(160deg) scale(.92);
  }

  100% {
    transform: rotateY(180deg) scale(1.03);
  }
}

.fc-04__front,
.fc-04__back {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
/* FRONT */

.fc-04__front {
  background: linear-gradient(160deg,#0d1b3e,#0a1220);
  border: 1px solid rgba(59,130,246,.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 24px;
}

.fc-04__avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(59,130,246,.4);
  box-shadow: 0 0 30px rgba(59,130,246,.25);
  margin-bottom: 18px;
  background: linear-gradient(135deg,#1e3a8a,#1e40af);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-04__role-badge {
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 700;
  margin-bottom: 6px;
}

.fc-04__member-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--white);
  text-align: center;
}

.fc-04__dept {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(248,250,252,.4);
  background: rgba(59,130,246,.1);
  border: 1px solid rgba(59,130,246,.2);
  padding: 3px 12px;
  border-radius: 20px;
}

.fc-04__stat-row {
  display: flex;
  gap: 24px;
  margin-top: 24px;
}

.fc-04__stat {
  text-align: center;
}

.fc-04__stat-num {
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(135deg,var(--blue),var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fc-04__stat-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(248,250,252,.35);
  margin-top: 2px;
}

.fc-04__front-hint {
  margin-top: auto;
  font-size: 10px;
  color: rgba(248,250,252,.25);
  letter-spacing: .08em;
}
/* BACK */

.fc-04__back {
  background: linear-gradient(160deg,#0d1117,#111827);
  border: 1px solid rgba(34,211,238,.2);
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  padding: 28px;
  gap: 16px;
}

.fc-04__bio-title {
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 700;
}

.fc-04__bio {
  font-size: 13px;
  color: rgba(248,250,252,.65);
  line-height: 1.7;
}

.fc-04__social {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.fc-04__social-btn {
  flex: 1;
  padding: 10px 6px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(248,250,252,.7);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background .2s,border-color .2s;
  display: block;
}

.fc-04__social-btn:hover {
  background: rgba(59,130,246,.15);
  border-color: rgba(59,130,246,.3);
  color: var(--blue);
}

.fc-04__contact {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg,rgba(59,130,246,.15),rgba(34,211,238,.08));
  border: 1px solid rgba(59,130,246,.2);
  font-size: 12px;
  color: rgba(248,250,252,.7);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .fc-04__card {
    transition: none;
  }
}
```

How this works

The avatar is an inline SVG silhouette — two <circle> elements and one <ellipse> with brand fills — meaning zero image requests and no broken-image fallback risk. Gradient text on the stat numbers uses -webkit-background-clip: text targeting just the number span inside each stat cell.

On the back, social buttons are plain <a> elements with a faint border at rest, transitioning to a coloured border and background on :hover. The contact row uses an inline SVG envelope icon — no icon-font dependency. All elements are native anchors so they are fully keyboard-focusable without extra ARIA work.

Make it yours

  • Replace the SVG avatar with a real <img> element and clip it to a circle using clip-path: circle(50%) with object-fit: cover.
  • Add a third stat column by duplicating a .fc-04__stat div — the flex layout reflows automatically without any parent CSS change.
  • Change the blue colour scheme to warm amber by replacing --blue:#3b82f6 and --cyan:#22d3ee with #f59e0b and #fbbf24 at the root.
  • Make the card responsive by adding flex-wrap:wrap to the stat row and setting min-width:80px on each stat cell.
  • Add an animated gradient border by wrapping the scene in a pseudo-element with a spinning conic-gradient background and a clip mask.

Gotchas — read before shipping

  • <img> elements inside a flipping card must not rely on overflow:hidden on the face element for cropping — this can clip the 3D context in WebKit.
  • Social link hover states on the back face are unreachable on touch-only devices — consider a click-to-flip approach that keeps the front interactive.
  • Long role strings can overflow the front face — add white-space:nowrap;overflow:hidden;text-overflow:ellipsis to contain them on narrow cards.

Browser support

ChromeSafariFirefoxEdge
36+9+16+36+

Fully pure CSS; inline SVG avatars are universally supported across all modern browsers.

Techniques used in this demo

3D transforms (perspective + preserve-3d)background-clip: textMDN ↗radial-gradient()MDN ↗@keyframesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →