9 CSS 3D Designs 01 / 09

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.

Best forteam bio sections, product feature grids, pricing tier showcases, conference speaker pages.

CSS + JS MIT licensed
Live Demo Open in tab
Open in playground

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> [email protected]</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> [email protected]</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> [email protected]</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> [email protected]</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'));
  });
})();

More from 9 CSS 3D Designs

Midnight CoverflowKinetic Tilt CardsPage-Turn FlipbookBauhaus Cube NavigatorModular Synth ControlsObsidian VaultNeon LatticeChromatic Helix
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →