9 CSS 3D Designs01 / 09

CSS + JSMIT licensed

Iridescent Flip Cards

Four team-member cards floating on a near-black ground, each wrapped in a continuously rotating conic-gradient iridescent border driven by a CSS @property custom-angle animation. The front shows a CSS-drawn portrait (avatar built from layered radii — no images), role, name, and skill tags; hover or tap flips the card on the Y axis to reveal a pull-quote, contact metadata, and CTA. Each card carries a unique warm/cool palette (violet, aqua, rose, sage) that bleeds through the iridescent halo. Fraunces + DM Mono. Best for team bio sections, product feature grids, pricing tier showcases, conference speaker pages.

Published

Live Demo
Try it

The code

<section class="cd-flp" aria-label="Iridescent flip cards demo">
  <div class="card">
    <div class="grid">

      <div class="flip-card" data-cd-flp-card>
        <div class="card-body">
          <div class="face front">
            <div class="avatar" aria-hidden="true">
              <div class="avatar-bg"></div>
              <div class="avatar-hair"></div>
              <div class="avatar-head"></div>
              <div class="avatar-neck"></div>
            </div>
            <span class="card-role">Creative Direction</span>
            <div class="card-name">Maren<br />Holst</div>
            <div class="card-divider"></div>
            <div class="card-tags">
              <span class="tag">Brand</span>
              <span class="tag">Motion</span>
              <span class="tag">UX</span>
            </div>
          </div>
          <div class="face back">
            <span class="back-header">// Profile</span>
            <p class="back-bio">"I believe the best design is invisible — it removes friction until the experience feels inevitable."</p>
            <div class="back-divider"></div>
            <div class="back-meta">
              <div class="meta-row"><span class="meta-icon">@</span> maren@studio.co</div>
              <div class="meta-row"><span class="meta-icon">◎</span> Oslo, Norway · GMT+1</div>
              <div class="meta-row"><span class="meta-icon">★</span> 8 yrs experience</div>
            </div>
            <button class="back-cta" type="button">View Portfolio</button>
          </div>
        </div>
      </div>

      <div class="flip-card" data-cd-flp-card>
        <div class="card-body">
          <div class="face front">
            <div class="avatar" aria-hidden="true">
              <div class="avatar-bg"></div>
              <div class="avatar-hair"></div>
              <div class="avatar-head"></div>
              <div class="avatar-neck"></div>
            </div>
            <span class="card-role">Engineering Lead</span>
            <div class="card-name">Kai<br />Nakamura</div>
            <div class="card-divider"></div>
            <div class="card-tags">
              <span class="tag">Systems</span>
              <span class="tag">Rust</span>
              <span class="tag">Infra</span>
            </div>
          </div>
          <div class="face back">
            <span class="back-header">// Profile</span>
            <p class="back-bio">"Complex systems are just simple ones stacked with care. Every abstraction is a promise we make to the future."</p>
            <div class="back-divider"></div>
            <div class="back-meta">
              <div class="meta-row"><span class="meta-icon">@</span> kai@studio.co</div>
              <div class="meta-row"><span class="meta-icon">◎</span> Tokyo, Japan · JST</div>
              <div class="meta-row"><span class="meta-icon">★</span> 11 yrs experience</div>
            </div>
            <button class="back-cta" type="button">View GitHub</button>
          </div>
        </div>
      </div>

      <div class="flip-card" data-cd-flp-card>
        <div class="card-body">
          <div class="face front">
            <div class="avatar" aria-hidden="true">
              <div class="avatar-bg"></div>
              <div class="avatar-hair"></div>
              <div class="avatar-head"></div>
              <div class="avatar-neck"></div>
            </div>
            <span class="card-role">Product Strategy</span>
            <div class="card-name">Saoirse<br />Byrne</div>
            <div class="card-divider"></div>
            <div class="card-tags">
              <span class="tag">Growth</span>
              <span class="tag">GTM</span>
              <span class="tag">Data</span>
            </div>
          </div>
          <div class="face back">
            <span class="back-header">// Profile</span>
            <p class="back-bio">"Products don't fail because of bad code. They fail because nobody bothered to understand the person on the other end."</p>
            <div class="back-divider"></div>
            <div class="back-meta">
              <div class="meta-row"><span class="meta-icon">@</span> saoirse@studio.co</div>
              <div class="meta-row"><span class="meta-icon">◎</span> Dublin, Ireland · GMT</div>
              <div class="meta-row"><span class="meta-icon">★</span> 6 yrs experience</div>
            </div>
            <button class="back-cta" type="button">View Work</button>
          </div>
        </div>
      </div>

      <div class="flip-card" data-cd-flp-card>
        <div class="card-body">
          <div class="face front">
            <div class="avatar" aria-hidden="true">
              <div class="avatar-bg"></div>
              <div class="avatar-hair"></div>
              <div class="avatar-head"></div>
              <div class="avatar-neck"></div>
            </div>
            <span class="card-role">Visual Research</span>
            <div class="card-name">Olu<br />Adeyemi</div>
            <div class="card-divider"></div>
            <div class="card-tags">
              <span class="tag">Type</span>
              <span class="tag">Print</span>
              <span class="tag">3D</span>
            </div>
          </div>
          <div class="face back">
            <span class="back-header">// Profile</span>
            <p class="back-bio">"Typography is the voice of writing. If you can hear a typeface before you read it, the designer did their job."</p>
            <div class="back-divider"></div>
            <div class="back-meta">
              <div class="meta-row"><span class="meta-icon">@</span> olu@studio.co</div>
              <div class="meta-row"><span class="meta-icon">◎</span> Lagos, Nigeria · WAT</div>
              <div class="meta-row"><span class="meta-icon">★</span> 9 yrs experience</div>
            </div>
            <button class="back-cta" type="button">View Research</button>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>
/* ─── 01 Iridescent Flip Cards — team/pricing card grid ───── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=DM+Mono:wght@300;400;500&display=swap');

@property --cd-flp-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.cd-flp {
  --cd-flp-bg: #0a090e;
  --cd-flp-card-w: 224px;
  --cd-flp-card-h: 310px;
  position: relative;
  width: 100%;
  min-height: 480px;
  background: var(--cd-flp-bg);
  font-family: 'DM Mono', ui-monospace, monospace;
  overflow: hidden;
  box-sizing: border-box;
}

.cd-flp *,
.cd-flp *::before,
.cd-flp *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cd-flp .card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}

.cd-flp .card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(60, 20, 100, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.cd-flp .grid {
  display: flex;
  gap: 24px;
  align-items: center;
  perspective: 1800px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
  justify-content: center;
}

.cd-flp .flip-card {
  width: var(--cd-flp-card-w);
  height: var(--cd-flp-card-h);
  perspective: 1200px;
  cursor: pointer;
  position: relative;
}

.cd-flp .card-body {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.82s cubic-bezier(0.45, 0.05, 0.15, 0.98);
  position: relative;
}

.cd-flp .flip-card:hover .card-body,
.cd-flp .flip-card.flipped .card-body {
  transform: rotateY(180deg);
}

.cd-flp .face {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  backface-visibility: hidden;
  overflow: hidden;
}

.cd-flp .front {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 22px 24px;
}

.cd-flp .front::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 23.5px;
  background: conic-gradient(
      from var(--cd-flp-angle, 0deg),
      #ff6ec4 0deg, #7873f5 72deg, #4adede 144deg, #c0f0a0 216deg, #ff6ec4 288deg, #7873f5 360deg
    );
  z-index: -1;
  animation: cd-flp-border-spin 6s linear infinite;
  animation-delay: var(--cd-flp-spin-delay, 0s);
}

@keyframes cd-flp-border-spin {
  to {
    --cd-flp-angle: 360deg;
  }
}

.cd-flp .avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  margin-bottom: 20px;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.cd-flp .avatar-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.cd-flp .avatar-neck {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 28px;
  border-radius: 4px 4px 0 0;
}

.cd-flp .avatar-head {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 46px;
  border-radius: 22px 22px 18px 18px;
}

.cd-flp .avatar-hair {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 28px;
  border-radius: 23px 23px 0 0;
}

.cd-flp .card-role {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.cd-flp .card-name {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 14px;
}

.cd-flp .card-divider {
  width: 1px;
  height: 32px;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.cd-flp .card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}

.cd-flp .tag {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.4px;
  padding: 3px 8px;
  border-radius: 2px;
  text-transform: uppercase;
}

.cd-flp .back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  padding: 26px 22px;
}

.cd-flp .back::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 23.5px;
  background: conic-gradient(
      from var(--cd-flp-angle, 0deg),
      #ff6ec4 0deg, #7873f5 72deg, #4adede 144deg, #c0f0a0 216deg, #ff6ec4 288deg, #7873f5 360deg
    );
  z-index: -1;
  animation: cd-flp-border-spin 6s linear infinite reverse;
  animation-delay: var(--cd-flp-spin-delay, 0s);
}

.cd-flp .back-header {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.cd-flp .back-bio {
  font-family: 'Fraunces', serif;
  font-size: 13px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.7;
  flex: 1;
}

.cd-flp .back-divider {
  width: 100%;
  height: 1px;
  margin: 16px 0 12px;
}

.cd-flp .back-meta {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cd-flp .meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.8px;
}

.cd-flp .meta-icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  flex-shrink: 0;
}

.cd-flp .back-cta {
  margin-top: 16px;
  padding: 9px 0;
  border-radius: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s;
}

.cd-flp .back-cta:hover {
  opacity: 0.82;
}
/* Card 1: violet */

.cd-flp .flip-card:nth-child(1) .front {
  background: linear-gradient(150deg, #fdf8f0 0%, #f5edde 100%);
}

.cd-flp .flip-card:nth-child(1) .back {
  background: linear-gradient(148deg, #1c1228 0%, #150d22 100%);
}

.cd-flp .flip-card:nth-child(1) .avatar-bg {
  background: #e8d8c0;
}

.cd-flp .flip-card:nth-child(1) .avatar-head {
  background: #c8a880;
}

.cd-flp .flip-card:nth-child(1) .avatar-neck {
  background: #c8a880;
}

.cd-flp .flip-card:nth-child(1) .avatar-hair {
  background: #2c1a0e;
}

.cd-flp .flip-card:nth-child(1) .card-role {
  color: #8860cc;
}

.cd-flp .flip-card:nth-child(1) .card-name {
  color: #1a0e2e;
}

.cd-flp .flip-card:nth-child(1) .card-divider {
  background: linear-gradient(to bottom, transparent, #8860cc, transparent);
}

.cd-flp .flip-card:nth-child(1) .tag {
  background: rgba(136,96,204,0.1);
  color: #8860cc;
  border: 1px solid rgba(136,96,204,0.25);
}

.cd-flp .flip-card:nth-child(1) .back-header {
  color: rgba(200,180,255,0.45);
}

.cd-flp .flip-card:nth-child(1) .back-bio {
  color: rgba(220,210,240,0.82);
}

.cd-flp .flip-card:nth-child(1) .back-divider {
  background: linear-gradient(90deg, transparent, rgba(136,96,204,0.4), transparent);
}

.cd-flp .flip-card:nth-child(1) .meta-row {
  color: rgba(200,180,255,0.65);
}

.cd-flp .flip-card:nth-child(1) .meta-icon {
  background: rgba(136,96,204,0.15);
  color: #a880ff;
}

.cd-flp .flip-card:nth-child(1) .back-cta {
  background: #8860cc;
  color: #fff;
}
/* Card 2: aqua */

.cd-flp .flip-card:nth-child(2) .front {
  background: linear-gradient(150deg, #e8f4f8 0%, #d4ecf4 100%);
}

.cd-flp .flip-card:nth-child(2) .back {
  background: linear-gradient(148deg, #0c1e2a 0%, #081520 100%);
}

.cd-flp .flip-card:nth-child(2) .avatar-bg {
  background: #c8e0f0;
}

.cd-flp .flip-card:nth-child(2) .avatar-head {
  background: #f0c8a0;
}

.cd-flp .flip-card:nth-child(2) .avatar-neck {
  background: #f0c8a0;
}

.cd-flp .flip-card:nth-child(2) .avatar-hair {
  background: #1a2830;
}

.cd-flp .flip-card:nth-child(2) .card-role {
  color: #1890c0;
}

.cd-flp .flip-card:nth-child(2) .card-name {
  color: #0c1e2a;
}

.cd-flp .flip-card:nth-child(2) .card-divider {
  background: linear-gradient(to bottom, transparent, #1890c0, transparent);
}

.cd-flp .flip-card:nth-child(2) .tag {
  background: rgba(24,144,192,0.1);
  color: #1890c0;
  border: 1px solid rgba(24,144,192,0.25);
}

.cd-flp .flip-card:nth-child(2) .back-header {
  color: rgba(100,200,240,0.45);
}

.cd-flp .flip-card:nth-child(2) .back-bio {
  color: rgba(180,220,240,0.82);
}

.cd-flp .flip-card:nth-child(2) .back-divider {
  background: linear-gradient(90deg, transparent, rgba(24,144,192,0.4), transparent);
}

.cd-flp .flip-card:nth-child(2) .meta-row {
  color: rgba(100,200,240,0.65);
}

.cd-flp .flip-card:nth-child(2) .meta-icon {
  background: rgba(24,144,192,0.15);
  color: #40d0ff;
}

.cd-flp .flip-card:nth-child(2) .back-cta {
  background: #1890c0;
  color: #fff;
}
/* Card 3: rose */

.cd-flp .flip-card:nth-child(3) .front {
  background: linear-gradient(150deg, #fdf0f4 0%, #f8e4ea 100%);
}

.cd-flp .flip-card:nth-child(3) .back {
  background: linear-gradient(148deg, #241014 0%, #180a0d 100%);
}

.cd-flp .flip-card:nth-child(3) .avatar-bg {
  background: #f0d0d8;
}

.cd-flp .flip-card:nth-child(3) .avatar-head {
  background: #e8b890;
}

.cd-flp .flip-card:nth-child(3) .avatar-neck {
  background: #e8b890;
}

.cd-flp .flip-card:nth-child(3) .avatar-hair {
  background: #8c3040;
}

.cd-flp .flip-card:nth-child(3) .card-role {
  color: #c03860;
}

.cd-flp .flip-card:nth-child(3) .card-name {
  color: #240a14;
}

.cd-flp .flip-card:nth-child(3) .card-divider {
  background: linear-gradient(to bottom, transparent, #c03860, transparent);
}

.cd-flp .flip-card:nth-child(3) .tag {
  background: rgba(192,56,96,0.1);
  color: #c03860;
  border: 1px solid rgba(192,56,96,0.25);
}

.cd-flp .flip-card:nth-child(3) .back-header {
  color: rgba(255,140,160,0.45);
}

.cd-flp .flip-card:nth-child(3) .back-bio {
  color: rgba(255,210,220,0.82);
}

.cd-flp .flip-card:nth-child(3) .back-divider {
  background: linear-gradient(90deg, transparent, rgba(192,56,96,0.4), transparent);
}

.cd-flp .flip-card:nth-child(3) .meta-row {
  color: rgba(255,140,160,0.65);
}

.cd-flp .flip-card:nth-child(3) .meta-icon {
  background: rgba(192,56,96,0.15);
  color: #ff6080;
}

.cd-flp .flip-card:nth-child(3) .back-cta {
  background: #c03860;
  color: #fff;
}
/* Card 4: sage */

.cd-flp .flip-card:nth-child(4) .front {
  background: linear-gradient(150deg, #eff5ee 0%, #e0f0dd 100%);
}

.cd-flp .flip-card:nth-child(4) .back {
  background: linear-gradient(148deg, #0e1e10 0%, #081408 100%);
}

.cd-flp .flip-card:nth-child(4) .avatar-bg {
  background: #c8e8c0;
}

.cd-flp .flip-card:nth-child(4) .avatar-head {
  background: #d4a870;
}

.cd-flp .flip-card:nth-child(4) .avatar-neck {
  background: #d4a870;
}

.cd-flp .flip-card:nth-child(4) .avatar-hair {
  background: #1c2808;
}

.cd-flp .flip-card:nth-child(4) .card-role {
  color: #2a8840;
}

.cd-flp .flip-card:nth-child(4) .card-name {
  color: #0e1e10;
}

.cd-flp .flip-card:nth-child(4) .card-divider {
  background: linear-gradient(to bottom, transparent, #2a8840, transparent);
}

.cd-flp .flip-card:nth-child(4) .tag {
  background: rgba(42,136,64,0.1);
  color: #2a8840;
  border: 1px solid rgba(42,136,64,0.25);
}

.cd-flp .flip-card:nth-child(4) .back-header {
  color: rgba(100,220,120,0.45);
}

.cd-flp .flip-card:nth-child(4) .back-bio {
  color: rgba(180,240,190,0.82);
}

.cd-flp .flip-card:nth-child(4) .back-divider {
  background: linear-gradient(90deg, transparent, rgba(42,136,64,0.4), transparent);
}

.cd-flp .flip-card:nth-child(4) .meta-row {
  color: rgba(100,220,120,0.65);
}

.cd-flp .flip-card:nth-child(4) .meta-icon {
  background: rgba(42,136,64,0.15);
  color: #50e070;
}

.cd-flp .flip-card:nth-child(4) .back-cta {
  background: #2a8840;
  color: #fff;
}
/* Staggered spin delays */

.cd-flp .flip-card:nth-child(1) {
  --cd-flp-spin-delay: 0s;
}

.cd-flp .flip-card:nth-child(2) {
  --cd-flp-spin-delay: -1.5s;
}

.cd-flp .flip-card:nth-child(3) {
  --cd-flp-spin-delay: -3s;
}

.cd-flp .flip-card:nth-child(4) {
  --cd-flp-spin-delay: -4.5s;
}

@media (max-width: 720px) {
  .cd-flp {
    min-height: 720px;
  }

  .cd-flp .grid {
    gap: 18px;
  }

  .cd-flp .flip-card {
    width: 200px;
    height: 280px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cd-flp .card-body,
    .cd-flp .front::before,
    .cd-flp .back::before {
    animation: none !important;
    transition: none !important;
  }
}
(() => {
  const root = document.querySelector('.cd-flp');
  if (!root) return;
  // Tap-to-flip on touch devices (hover already handled by CSS).
  root.querySelectorAll('[data-cd-flp-card]').forEach(card => {
    card.addEventListener('click', () => card.classList.toggle('flipped'));
  });
})();
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 3D Design 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: Iridescent Flip Cards
Source: https://codefronts.com/design-styles/css-3d/iridescent-flip-cards/

Four team-member cards floating on a near-black ground, each wrapped in a continuously rotating conic-gradient iridescent border driven by a CSS @property custom-angle animation. The front shows a CSS-drawn portrait (avatar built from layered radii — no images), role, name, and skill tags; hover or tap flips the card on the Y axis to reveal a pull-quote, contact metadata, and CTA. Each card carries a unique warm/cool palette (violet, aqua, rose, sage) that bleeds through the iridescent halo. Fraunces + DM Mono. Best for team bio sections, product feature grids, pricing tier showcases, conference speaker pages.
## HTML
```html
<section class="cd-flp" aria-label="Iridescent flip cards demo">
  <div class="card">
    <div class="grid">

      <div class="flip-card" data-cd-flp-card>
        <div class="card-body">
          <div class="face front">
            <div class="avatar" aria-hidden="true">
              <div class="avatar-bg"></div>
              <div class="avatar-hair"></div>
              <div class="avatar-head"></div>
              <div class="avatar-neck"></div>
            </div>
            <span class="card-role">Creative Direction</span>
            <div class="card-name">Maren<br />Holst</div>
            <div class="card-divider"></div>
            <div class="card-tags">
              <span class="tag">Brand</span>
              <span class="tag">Motion</span>
              <span class="tag">UX</span>
            </div>
          </div>
          <div class="face back">
            <span class="back-header">// Profile</span>
            <p class="back-bio">"I believe the best design is invisible — it removes friction until the experience feels inevitable."</p>
            <div class="back-divider"></div>
            <div class="back-meta">
              <div class="meta-row"><span class="meta-icon">@</span> maren@studio.co</div>
              <div class="meta-row"><span class="meta-icon">◎</span> Oslo, Norway · GMT+1</div>
              <div class="meta-row"><span class="meta-icon">★</span> 8 yrs experience</div>
            </div>
            <button class="back-cta" type="button">View Portfolio</button>
          </div>
        </div>
      </div>

      <div class="flip-card" data-cd-flp-card>
        <div class="card-body">
          <div class="face front">
            <div class="avatar" aria-hidden="true">
              <div class="avatar-bg"></div>
              <div class="avatar-hair"></div>
              <div class="avatar-head"></div>
              <div class="avatar-neck"></div>
            </div>
            <span class="card-role">Engineering Lead</span>
            <div class="card-name">Kai<br />Nakamura</div>
            <div class="card-divider"></div>
            <div class="card-tags">
              <span class="tag">Systems</span>
              <span class="tag">Rust</span>
              <span class="tag">Infra</span>
            </div>
          </div>
          <div class="face back">
            <span class="back-header">// Profile</span>
            <p class="back-bio">"Complex systems are just simple ones stacked with care. Every abstraction is a promise we make to the future."</p>
            <div class="back-divider"></div>
            <div class="back-meta">
              <div class="meta-row"><span class="meta-icon">@</span> kai@studio.co</div>
              <div class="meta-row"><span class="meta-icon">◎</span> Tokyo, Japan · JST</div>
              <div class="meta-row"><span class="meta-icon">★</span> 11 yrs experience</div>
            </div>
            <button class="back-cta" type="button">View GitHub</button>
          </div>
        </div>
      </div>

      <div class="flip-card" data-cd-flp-card>
        <div class="card-body">
          <div class="face front">
            <div class="avatar" aria-hidden="true">
              <div class="avatar-bg"></div>
              <div class="avatar-hair"></div>
              <div class="avatar-head"></div>
              <div class="avatar-neck"></div>
            </div>
            <span class="card-role">Product Strategy</span>
            <div class="card-name">Saoirse<br />Byrne</div>
            <div class="card-divider"></div>
            <div class="card-tags">
              <span class="tag">Growth</span>
              <span class="tag">GTM</span>
              <span class="tag">Data</span>
            </div>
          </div>
          <div class="face back">
            <span class="back-header">// Profile</span>
            <p class="back-bio">"Products don't fail because of bad code. They fail because nobody bothered to understand the person on the other end."</p>
            <div class="back-divider"></div>
            <div class="back-meta">
              <div class="meta-row"><span class="meta-icon">@</span> saoirse@studio.co</div>
              <div class="meta-row"><span class="meta-icon">◎</span> Dublin, Ireland · GMT</div>
              <div class="meta-row"><span class="meta-icon">★</span> 6 yrs experience</div>
            </div>
            <button class="back-cta" type="button">View Work</button>
          </div>
        </div>
      </div>

      <div class="flip-card" data-cd-flp-card>
        <div class="card-body">
          <div class="face front">
            <div class="avatar" aria-hidden="true">
              <div class="avatar-bg"></div>
              <div class="avatar-hair"></div>
              <div class="avatar-head"></div>
              <div class="avatar-neck"></div>
            </div>
            <span class="card-role">Visual Research</span>
            <div class="card-name">Olu<br />Adeyemi</div>
            <div class="card-divider"></div>
            <div class="card-tags">
              <span class="tag">Type</span>
              <span class="tag">Print</span>
              <span class="tag">3D</span>
            </div>
          </div>
          <div class="face back">
            <span class="back-header">// Profile</span>
            <p class="back-bio">"Typography is the voice of writing. If you can hear a typeface before you read it, the designer did their job."</p>
            <div class="back-divider"></div>
            <div class="back-meta">
              <div class="meta-row"><span class="meta-icon">@</span> olu@studio.co</div>
              <div class="meta-row"><span class="meta-icon">◎</span> Lagos, Nigeria · WAT</div>
              <div class="meta-row"><span class="meta-icon">★</span> 9 yrs experience</div>
            </div>
            <button class="back-cta" type="button">View Research</button>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>
```
## CSS
```css
/* ─── 01 Iridescent Flip Cards — team/pricing card grid ───── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=DM+Mono:wght@300;400;500&display=swap');

@property --cd-flp-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.cd-flp {
  --cd-flp-bg: #0a090e;
  --cd-flp-card-w: 224px;
  --cd-flp-card-h: 310px;
  position: relative;
  width: 100%;
  min-height: 480px;
  background: var(--cd-flp-bg);
  font-family: 'DM Mono', ui-monospace, monospace;
  overflow: hidden;
  box-sizing: border-box;
}

.cd-flp *,
.cd-flp *::before,
.cd-flp *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cd-flp .card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}

.cd-flp .card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(60, 20, 100, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.cd-flp .grid {
  display: flex;
  gap: 24px;
  align-items: center;
  perspective: 1800px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
  justify-content: center;
}

.cd-flp .flip-card {
  width: var(--cd-flp-card-w);
  height: var(--cd-flp-card-h);
  perspective: 1200px;
  cursor: pointer;
  position: relative;
}

.cd-flp .card-body {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.82s cubic-bezier(0.45, 0.05, 0.15, 0.98);
  position: relative;
}

.cd-flp .flip-card:hover .card-body,
.cd-flp .flip-card.flipped .card-body {
  transform: rotateY(180deg);
}

.cd-flp .face {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  backface-visibility: hidden;
  overflow: hidden;
}

.cd-flp .front {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 22px 24px;
}

.cd-flp .front::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 23.5px;
  background: conic-gradient(
      from var(--cd-flp-angle, 0deg),
      #ff6ec4 0deg, #7873f5 72deg, #4adede 144deg, #c0f0a0 216deg, #ff6ec4 288deg, #7873f5 360deg
    );
  z-index: -1;
  animation: cd-flp-border-spin 6s linear infinite;
  animation-delay: var(--cd-flp-spin-delay, 0s);
}

@keyframes cd-flp-border-spin {
  to {
    --cd-flp-angle: 360deg;
  }
}

.cd-flp .avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  margin-bottom: 20px;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.cd-flp .avatar-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.cd-flp .avatar-neck {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 28px;
  border-radius: 4px 4px 0 0;
}

.cd-flp .avatar-head {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 46px;
  border-radius: 22px 22px 18px 18px;
}

.cd-flp .avatar-hair {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 28px;
  border-radius: 23px 23px 0 0;
}

.cd-flp .card-role {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.cd-flp .card-name {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 14px;
}

.cd-flp .card-divider {
  width: 1px;
  height: 32px;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.cd-flp .card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}

.cd-flp .tag {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 1.4px;
  padding: 3px 8px;
  border-radius: 2px;
  text-transform: uppercase;
}

.cd-flp .back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  padding: 26px 22px;
}

.cd-flp .back::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 23.5px;
  background: conic-gradient(
      from var(--cd-flp-angle, 0deg),
      #ff6ec4 0deg, #7873f5 72deg, #4adede 144deg, #c0f0a0 216deg, #ff6ec4 288deg, #7873f5 360deg
    );
  z-index: -1;
  animation: cd-flp-border-spin 6s linear infinite reverse;
  animation-delay: var(--cd-flp-spin-delay, 0s);
}

.cd-flp .back-header {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.cd-flp .back-bio {
  font-family: 'Fraunces', serif;
  font-size: 13px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.7;
  flex: 1;
}

.cd-flp .back-divider {
  width: 100%;
  height: 1px;
  margin: 16px 0 12px;
}

.cd-flp .back-meta {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cd-flp .meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.8px;
}

.cd-flp .meta-icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  flex-shrink: 0;
}

.cd-flp .back-cta {
  margin-top: 16px;
  padding: 9px 0;
  border-radius: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s;
}

.cd-flp .back-cta:hover {
  opacity: 0.82;
}
/* Card 1: violet */

.cd-flp .flip-card:nth-child(1) .front {
  background: linear-gradient(150deg, #fdf8f0 0%, #f5edde 100%);
}

.cd-flp .flip-card:nth-child(1) .back {
  background: linear-gradient(148deg, #1c1228 0%, #150d22 100%);
}

.cd-flp .flip-card:nth-child(1) .avatar-bg {
  background: #e8d8c0;
}

.cd-flp .flip-card:nth-child(1) .avatar-head {
  background: #c8a880;
}

.cd-flp .flip-card:nth-child(1) .avatar-neck {
  background: #c8a880;
}

.cd-flp .flip-card:nth-child(1) .avatar-hair {
  background: #2c1a0e;
}

.cd-flp .flip-card:nth-child(1) .card-role {
  color: #8860cc;
}

.cd-flp .flip-card:nth-child(1) .card-name {
  color: #1a0e2e;
}

.cd-flp .flip-card:nth-child(1) .card-divider {
  background: linear-gradient(to bottom, transparent, #8860cc, transparent);
}

.cd-flp .flip-card:nth-child(1) .tag {
  background: rgba(136,96,204,0.1);
  color: #8860cc;
  border: 1px solid rgba(136,96,204,0.25);
}

.cd-flp .flip-card:nth-child(1) .back-header {
  color: rgba(200,180,255,0.45);
}

.cd-flp .flip-card:nth-child(1) .back-bio {
  color: rgba(220,210,240,0.82);
}

.cd-flp .flip-card:nth-child(1) .back-divider {
  background: linear-gradient(90deg, transparent, rgba(136,96,204,0.4), transparent);
}

.cd-flp .flip-card:nth-child(1) .meta-row {
  color: rgba(200,180,255,0.65);
}

.cd-flp .flip-card:nth-child(1) .meta-icon {
  background: rgba(136,96,204,0.15);
  color: #a880ff;
}

.cd-flp .flip-card:nth-child(1) .back-cta {
  background: #8860cc;
  color: #fff;
}
/* Card 2: aqua */

.cd-flp .flip-card:nth-child(2) .front {
  background: linear-gradient(150deg, #e8f4f8 0%, #d4ecf4 100%);
}

.cd-flp .flip-card:nth-child(2) .back {
  background: linear-gradient(148deg, #0c1e2a 0%, #081520 100%);
}

.cd-flp .flip-card:nth-child(2) .avatar-bg {
  background: #c8e0f0;
}

.cd-flp .flip-card:nth-child(2) .avatar-head {
  background: #f0c8a0;
}

.cd-flp .flip-card:nth-child(2) .avatar-neck {
  background: #f0c8a0;
}

.cd-flp .flip-card:nth-child(2) .avatar-hair {
  background: #1a2830;
}

.cd-flp .flip-card:nth-child(2) .card-role {
  color: #1890c0;
}

.cd-flp .flip-card:nth-child(2) .card-name {
  color: #0c1e2a;
}

.cd-flp .flip-card:nth-child(2) .card-divider {
  background: linear-gradient(to bottom, transparent, #1890c0, transparent);
}

.cd-flp .flip-card:nth-child(2) .tag {
  background: rgba(24,144,192,0.1);
  color: #1890c0;
  border: 1px solid rgba(24,144,192,0.25);
}

.cd-flp .flip-card:nth-child(2) .back-header {
  color: rgba(100,200,240,0.45);
}

.cd-flp .flip-card:nth-child(2) .back-bio {
  color: rgba(180,220,240,0.82);
}

.cd-flp .flip-card:nth-child(2) .back-divider {
  background: linear-gradient(90deg, transparent, rgba(24,144,192,0.4), transparent);
}

.cd-flp .flip-card:nth-child(2) .meta-row {
  color: rgba(100,200,240,0.65);
}

.cd-flp .flip-card:nth-child(2) .meta-icon {
  background: rgba(24,144,192,0.15);
  color: #40d0ff;
}

.cd-flp .flip-card:nth-child(2) .back-cta {
  background: #1890c0;
  color: #fff;
}
/* Card 3: rose */

.cd-flp .flip-card:nth-child(3) .front {
  background: linear-gradient(150deg, #fdf0f4 0%, #f8e4ea 100%);
}

.cd-flp .flip-card:nth-child(3) .back {
  background: linear-gradient(148deg, #241014 0%, #180a0d 100%);
}

.cd-flp .flip-card:nth-child(3) .avatar-bg {
  background: #f0d0d8;
}

.cd-flp .flip-card:nth-child(3) .avatar-head {
  background: #e8b890;
}

.cd-flp .flip-card:nth-child(3) .avatar-neck {
  background: #e8b890;
}

.cd-flp .flip-card:nth-child(3) .avatar-hair {
  background: #8c3040;
}

.cd-flp .flip-card:nth-child(3) .card-role {
  color: #c03860;
}

.cd-flp .flip-card:nth-child(3) .card-name {
  color: #240a14;
}

.cd-flp .flip-card:nth-child(3) .card-divider {
  background: linear-gradient(to bottom, transparent, #c03860, transparent);
}

.cd-flp .flip-card:nth-child(3) .tag {
  background: rgba(192,56,96,0.1);
  color: #c03860;
  border: 1px solid rgba(192,56,96,0.25);
}

.cd-flp .flip-card:nth-child(3) .back-header {
  color: rgba(255,140,160,0.45);
}

.cd-flp .flip-card:nth-child(3) .back-bio {
  color: rgba(255,210,220,0.82);
}

.cd-flp .flip-card:nth-child(3) .back-divider {
  background: linear-gradient(90deg, transparent, rgba(192,56,96,0.4), transparent);
}

.cd-flp .flip-card:nth-child(3) .meta-row {
  color: rgba(255,140,160,0.65);
}

.cd-flp .flip-card:nth-child(3) .meta-icon {
  background: rgba(192,56,96,0.15);
  color: #ff6080;
}

.cd-flp .flip-card:nth-child(3) .back-cta {
  background: #c03860;
  color: #fff;
}
/* Card 4: sage */

.cd-flp .flip-card:nth-child(4) .front {
  background: linear-gradient(150deg, #eff5ee 0%, #e0f0dd 100%);
}

.cd-flp .flip-card:nth-child(4) .back {
  background: linear-gradient(148deg, #0e1e10 0%, #081408 100%);
}

.cd-flp .flip-card:nth-child(4) .avatar-bg {
  background: #c8e8c0;
}

.cd-flp .flip-card:nth-child(4) .avatar-head {
  background: #d4a870;
}

.cd-flp .flip-card:nth-child(4) .avatar-neck {
  background: #d4a870;
}

.cd-flp .flip-card:nth-child(4) .avatar-hair {
  background: #1c2808;
}

.cd-flp .flip-card:nth-child(4) .card-role {
  color: #2a8840;
}

.cd-flp .flip-card:nth-child(4) .card-name {
  color: #0e1e10;
}

.cd-flp .flip-card:nth-child(4) .card-divider {
  background: linear-gradient(to bottom, transparent, #2a8840, transparent);
}

.cd-flp .flip-card:nth-child(4) .tag {
  background: rgba(42,136,64,0.1);
  color: #2a8840;
  border: 1px solid rgba(42,136,64,0.25);
}

.cd-flp .flip-card:nth-child(4) .back-header {
  color: rgba(100,220,120,0.45);
}

.cd-flp .flip-card:nth-child(4) .back-bio {
  color: rgba(180,240,190,0.82);
}

.cd-flp .flip-card:nth-child(4) .back-divider {
  background: linear-gradient(90deg, transparent, rgba(42,136,64,0.4), transparent);
}

.cd-flp .flip-card:nth-child(4) .meta-row {
  color: rgba(100,220,120,0.65);
}

.cd-flp .flip-card:nth-child(4) .meta-icon {
  background: rgba(42,136,64,0.15);
  color: #50e070;
}

.cd-flp .flip-card:nth-child(4) .back-cta {
  background: #2a8840;
  color: #fff;
}
/* Staggered spin delays */

.cd-flp .flip-card:nth-child(1) {
  --cd-flp-spin-delay: 0s;
}

.cd-flp .flip-card:nth-child(2) {
  --cd-flp-spin-delay: -1.5s;
}

.cd-flp .flip-card:nth-child(3) {
  --cd-flp-spin-delay: -3s;
}

.cd-flp .flip-card:nth-child(4) {
  --cd-flp-spin-delay: -4.5s;
}

@media (max-width: 720px) {
  .cd-flp {
    min-height: 720px;
  }

  .cd-flp .grid {
    gap: 18px;
  }

  .cd-flp .flip-card {
    width: 200px;
    height: 280px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cd-flp .card-body,
    .cd-flp .front::before,
    .cd-flp .back::before {
    animation: none !important;
    transition: none !important;
  }
}
```

## JavaScript
```js
(() => {
  const root = document.querySelector('.cd-flp');
  if (!root) return;
  // Tap-to-flip on touch devices (hover already handled by CSS).
  root.querySelectorAll('[data-cd-flp-card]').forEach(card => {
    card.addEventListener('click', () => card.classList.toggle('flipped'));
  });
})();
```

Techniques used in this demo

3D transforms (perspective + preserve-3d)@propertyMDN ↗conic-gradient()MDN ↗radial-gradient()MDN ↗@keyframesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →