20 CSS Cards13 / 20

Pure CSSMIT licensed

Interactive Digital Business Card

Landscape vCard: 48px avatar + name/role on the left, address block with tap-to-email + tap-to-call and a Save vCard pill on the right. Radial accent glow top-right.

Published Updated

Live Demo
Try it

The code

<section class="card-13">
  <article class="card-13__card">
    <div class="card-13__sheen" aria-hidden="true"></div>
    <div class="card-13__mesh" aria-hidden="true"></div>
    <header class="card-13__head">
      <div class="card-13__brand">
        <span class="card-13__mark" aria-hidden="true"></span>
        <span class="card-13__brandname">SASHA LIN</span>
      </div>
      <span class="card-13__status">
        <span class="card-13__statusdot" aria-hidden="true"></span>
        Open to opportunities
      </span>
    </header>
    <div class="card-13__body">
      <h3 class="card-13__name">
        Sasha Lin
        <svg class="card-13__verified" aria-label="Verified" role="img" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 2L14 4L17 3L18 6L21 7L20 10L22 12L20 14L21 17L18 18L17 21L14 20L12 22L10 20L7 21L6 18L3 17L4 14L2 12L4 10L3 7L6 6L7 3L10 4Z" fill="#a5b4fc"/><path d="M9 12L11 14L15 10" stroke="#0a0b12" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </h3>
      <p class="card-13__role">Head of Partnerships &middot; Stripe</p>
      <p class="card-13__bio">Helping fintechs ship revenue infrastructure. Previously YC, Notion.</p>
      <ul class="card-13__chips" aria-label="Focus areas">
        <li>Fintech</li>
        <li>Product</li>
        <li>Growth</li>
      </ul>
    </div>
    <footer class="card-13__foot">
      <div class="card-13__actions">
        <a class="card-13__cta" href="#connect">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 12h8M12 8v8"/></svg>
          Connect
        </a>
        <a class="card-13__save" href="#vcard" aria-label="Save vCard">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
        </a>
      </div>
      <div class="card-13__social" aria-label="Social links">
        <a href="mailto:sasha@example.com" aria-label="Email">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><polyline points="3,7 12,13 21,7"/></svg>
        </a>
        <a href="#linkedin" aria-label="LinkedIn">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.03-1.85-3.03-1.85 0-2.13 1.44-2.13 2.94v5.66H9.37V9h3.4v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.46zM5.34 7.43c-1.14 0-2.06-.93-2.06-2.06 0-1.14.93-2.06 2.06-2.06 1.14 0 2.06.93 2.06 2.06.01 1.14-.92 2.06-2.06 2.06zm1.78 13.02H3.56V9h3.55v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.99 0 1.78-.78 1.78-1.73V1.73C24 .77 23.21 0 22.22 0z"/></svg>
        </a>
        <a href="#twitter" aria-label="X">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
        </a>
      </div>
    </footer>
    <div class="card-13__qr" aria-hidden="true">
      <div class="card-13__qr-inner">
        <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        <span></span>
      </div>
    </div>
  </article>
</section>
.card-13 {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  box-sizing: border-box;
  background: radial-gradient(ellipse at 30% 20%, rgba(165, 180, 252, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(236, 72, 153, 0.06) 0%, transparent 50%), #05060d;
  font-family: 'Inter', system-ui, sans-serif;
  --focus: #a5b4fc;
  --accent: #a5b4fc;
  --accent-2: #f472b6;
}

.card-13 *,
.card-13 *::before,
.card-13 *::after {
  box-sizing: border-box;
}

.card-13__card {
  position: relative;
  width: 100%;
  max-width: 360px;
  min-height: 220px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 40%), linear-gradient(160deg, #14152a 0%, #0d0e1c 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 22px 22px 18px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  isolation: isolate;
  transition: transform 0.35s ease, box-shadow 0.35s;
}

.card-13__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(165, 180, 252, 0.14) inset, 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
/* Iridescent diagonal sheen */

.card-13__sheen {
  position: absolute;
  top: -50%;
  left: -20%;
  width: 60%;
  height: 200%;
  background: linear-gradient(115deg,
      transparent 30%,
      rgba(165, 180, 252, 0.06) 45%,
      rgba(244, 114, 182, 0.05) 50%,
      rgba(34, 211, 238, 0.06) 55%,
      transparent 70%);
  transform: rotate(15deg);
  pointer-events: none;
  z-index: 0;
}
/* Corner mesh gradient */

.card-13__mesh {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at 30% 30%, rgba(165, 180, 252, 0.32) 0%, transparent 55%), radial-gradient(circle at 60% 70%, rgba(244, 114, 182, 0.18) 0%, transparent 55%);
  filter: blur(24px);
  pointer-events: none;
  z-index: 0;
}
/* All content above the sheen/mesh */

.card-13__head,
.card-13__body,
.card-13__foot,
.card-13__qr {
  position: relative;
  z-index: 1;
}

.card-13__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-13__brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-13__mark {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, #a5b4fc 0%, #6366f1 50%, #4338ca 100%);
  box-shadow: 0 0 0 1px rgba(165, 180, 252, 0.35), 0 4px 12px rgba(99, 102, 241, 0.35);
}

.card-13__mark::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 4px;
  background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.4) 55%, transparent 65%);
}

.card-13__brandname {
  font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.85);
}

.card-13__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 500;
  color: #a1a1aa;
  padding: 4px 8px;
  background: rgba(52, 211, 153, 0.10);
  border: 1px solid rgba(52, 211, 153, 0.22);
  border-radius: 999px;
}

.card-13__statusdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
  animation: card-13-pulse 2.4s ease-in-out infinite;
}

.card-13__body {
  margin-bottom: 18px;
}

.card-13__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 24px;
  font-weight: 700;
  color: #fafafa;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  background: linear-gradient(180deg, #ffffff 0%, #d4d4de 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card-13__verified {
  flex-shrink: 0;
}

.card-13__role {
  font-size: 12.5px;
  font-weight: 500;
  color: #d4d4d8;
  margin: 0 0 8px;
}

.card-13__bio {
  font-size: 12px;
  color: #a1a1aa;
  margin: 0 0 12px;
  line-height: 1.5;
}

.card-13__chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.card-13__chips li {
  font-size: 10.5px;
  font-weight: 600;
  color: #c7d2fe;
  padding: 3px 9px;
  background: rgba(165, 180, 252, 0.10);
  border: 1px solid rgba(165, 180, 252, 0.18);
  border-radius: 999px;
  letter-spacing: 0.01em;
}

.card-13__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.card-13__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.card-13__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  padding: 8px 14px;
  background: linear-gradient(180deg, #ecfdf5 0%, #a5b4fc 100%);
  color: #06070c;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(165, 180, 252, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
  transition: transform 0.18s, box-shadow 0.18s;
  letter-spacing: -0.005em;
}

.card-13__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(165, 180, 252, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.card-13__cta:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.card-13__save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.05);
  color: #d4d4d8;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  text-decoration: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.card-13__save:hover {
  background: rgba(165, 180, 252, 0.12);
  color: var(--accent);
  border-color: rgba(165, 180, 252, 0.32);
}

.card-13__save:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.card-13__social {
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-13__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #71717a;
  border-radius: 8px;
  text-decoration: none;
  transition: color 0.18s, background 0.18s;
}

.card-13__social a:hover {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.04);
}

.card-13__social a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
/* Decorative QR icon in top-right */

.card-13__qr {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 40px;
  height: 40px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: none;
}

.card-13__qr-inner {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 1px;
}

.card-13__qr-inner span {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 1px;
}
/* Random QR checkerboard pattern */

.card-13__qr-inner span:nth-child(2n) {
  background: transparent;
}

.card-13__qr-inner span:nth-child(3n) {
  background: rgba(255, 255, 255, 0.55);
}

.card-13__qr-inner span:nth-child(4n) {
  background: transparent;
}

.card-13__qr-inner span:nth-child(1),
.card-13__qr-inner span:nth-child(5),
.card-13__qr-inner span:nth-child(21),
.card-13__qr-inner span:nth-child(25) {
  background: rgba(255, 255, 255, 0.7);
}

@keyframes card-13-pulse {
  0%,
    100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.4);
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-13__statusdot {
    animation: none;
  }

  .card-13__card,
    .card-13__cta,
    .card-13__save,
    .card-13__social a {
    transition: none;
  }

  .card-13__card:hover {
    transform: none;
  }

  .card-13__cta:hover {
    transform: 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 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: Interactive Digital Business Card
Source: https://codefronts.com/components/css-cards/interactive-digital-business-card/

Landscape vCard: 48px avatar + name/role on the left, address block with tap-to-email + tap-to-call and a Save vCard pill on the right. Radial accent glow top-right.
## HTML
```html
<section class="card-13">
  <article class="card-13__card">
    <div class="card-13__sheen" aria-hidden="true"></div>
    <div class="card-13__mesh" aria-hidden="true"></div>
    <header class="card-13__head">
      <div class="card-13__brand">
        <span class="card-13__mark" aria-hidden="true"></span>
        <span class="card-13__brandname">SASHA LIN</span>
      </div>
      <span class="card-13__status">
        <span class="card-13__statusdot" aria-hidden="true"></span>
        Open to opportunities
      </span>
    </header>
    <div class="card-13__body">
      <h3 class="card-13__name">
        Sasha Lin
        <svg class="card-13__verified" aria-label="Verified" role="img" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 2L14 4L17 3L18 6L21 7L20 10L22 12L20 14L21 17L18 18L17 21L14 20L12 22L10 20L7 21L6 18L3 17L4 14L2 12L4 10L3 7L6 6L7 3L10 4Z" fill="#a5b4fc"/><path d="M9 12L11 14L15 10" stroke="#0a0b12" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </h3>
      <p class="card-13__role">Head of Partnerships &middot; Stripe</p>
      <p class="card-13__bio">Helping fintechs ship revenue infrastructure. Previously YC, Notion.</p>
      <ul class="card-13__chips" aria-label="Focus areas">
        <li>Fintech</li>
        <li>Product</li>
        <li>Growth</li>
      </ul>
    </div>
    <footer class="card-13__foot">
      <div class="card-13__actions">
        <a class="card-13__cta" href="#connect">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 12h8M12 8v8"/></svg>
          Connect
        </a>
        <a class="card-13__save" href="#vcard" aria-label="Save vCard">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
        </a>
      </div>
      <div class="card-13__social" aria-label="Social links">
        <a href="mailto:sasha@example.com" aria-label="Email">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><polyline points="3,7 12,13 21,7"/></svg>
        </a>
        <a href="#linkedin" aria-label="LinkedIn">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.03-1.85-3.03-1.85 0-2.13 1.44-2.13 2.94v5.66H9.37V9h3.4v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.46zM5.34 7.43c-1.14 0-2.06-.93-2.06-2.06 0-1.14.93-2.06 2.06-2.06 1.14 0 2.06.93 2.06 2.06.01 1.14-.92 2.06-2.06 2.06zm1.78 13.02H3.56V9h3.55v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.99 0 1.78-.78 1.78-1.73V1.73C24 .77 23.21 0 22.22 0z"/></svg>
        </a>
        <a href="#twitter" aria-label="X">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
        </a>
      </div>
    </footer>
    <div class="card-13__qr" aria-hidden="true">
      <div class="card-13__qr-inner">
        <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        <span></span>
      </div>
    </div>
  </article>
</section>
```
## CSS
```css
.card-13 {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  box-sizing: border-box;
  background: radial-gradient(ellipse at 30% 20%, rgba(165, 180, 252, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(236, 72, 153, 0.06) 0%, transparent 50%), #05060d;
  font-family: 'Inter', system-ui, sans-serif;
  --focus: #a5b4fc;
  --accent: #a5b4fc;
  --accent-2: #f472b6;
}

.card-13 *,
.card-13 *::before,
.card-13 *::after {
  box-sizing: border-box;
}

.card-13__card {
  position: relative;
  width: 100%;
  max-width: 360px;
  min-height: 220px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 40%), linear-gradient(160deg, #14152a 0%, #0d0e1c 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 22px 22px 18px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  isolation: isolate;
  transition: transform 0.35s ease, box-shadow 0.35s;
}

.card-13__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(165, 180, 252, 0.14) inset, 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
/* Iridescent diagonal sheen */

.card-13__sheen {
  position: absolute;
  top: -50%;
  left: -20%;
  width: 60%;
  height: 200%;
  background: linear-gradient(115deg,
      transparent 30%,
      rgba(165, 180, 252, 0.06) 45%,
      rgba(244, 114, 182, 0.05) 50%,
      rgba(34, 211, 238, 0.06) 55%,
      transparent 70%);
  transform: rotate(15deg);
  pointer-events: none;
  z-index: 0;
}
/* Corner mesh gradient */

.card-13__mesh {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at 30% 30%, rgba(165, 180, 252, 0.32) 0%, transparent 55%), radial-gradient(circle at 60% 70%, rgba(244, 114, 182, 0.18) 0%, transparent 55%);
  filter: blur(24px);
  pointer-events: none;
  z-index: 0;
}
/* All content above the sheen/mesh */

.card-13__head,
.card-13__body,
.card-13__foot,
.card-13__qr {
  position: relative;
  z-index: 1;
}

.card-13__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-13__brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-13__mark {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, #a5b4fc 0%, #6366f1 50%, #4338ca 100%);
  box-shadow: 0 0 0 1px rgba(165, 180, 252, 0.35), 0 4px 12px rgba(99, 102, 241, 0.35);
}

.card-13__mark::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 4px;
  background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.4) 55%, transparent 65%);
}

.card-13__brandname {
  font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.85);
}

.card-13__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 500;
  color: #a1a1aa;
  padding: 4px 8px;
  background: rgba(52, 211, 153, 0.10);
  border: 1px solid rgba(52, 211, 153, 0.22);
  border-radius: 999px;
}

.card-13__statusdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
  animation: card-13-pulse 2.4s ease-in-out infinite;
}

.card-13__body {
  margin-bottom: 18px;
}

.card-13__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 24px;
  font-weight: 700;
  color: #fafafa;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  background: linear-gradient(180deg, #ffffff 0%, #d4d4de 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card-13__verified {
  flex-shrink: 0;
}

.card-13__role {
  font-size: 12.5px;
  font-weight: 500;
  color: #d4d4d8;
  margin: 0 0 8px;
}

.card-13__bio {
  font-size: 12px;
  color: #a1a1aa;
  margin: 0 0 12px;
  line-height: 1.5;
}

.card-13__chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.card-13__chips li {
  font-size: 10.5px;
  font-weight: 600;
  color: #c7d2fe;
  padding: 3px 9px;
  background: rgba(165, 180, 252, 0.10);
  border: 1px solid rgba(165, 180, 252, 0.18);
  border-radius: 999px;
  letter-spacing: 0.01em;
}

.card-13__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.card-13__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.card-13__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  padding: 8px 14px;
  background: linear-gradient(180deg, #ecfdf5 0%, #a5b4fc 100%);
  color: #06070c;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(165, 180, 252, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
  transition: transform 0.18s, box-shadow 0.18s;
  letter-spacing: -0.005em;
}

.card-13__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(165, 180, 252, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.card-13__cta:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.card-13__save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.05);
  color: #d4d4d8;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  text-decoration: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.card-13__save:hover {
  background: rgba(165, 180, 252, 0.12);
  color: var(--accent);
  border-color: rgba(165, 180, 252, 0.32);
}

.card-13__save:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.card-13__social {
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-13__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #71717a;
  border-radius: 8px;
  text-decoration: none;
  transition: color 0.18s, background 0.18s;
}

.card-13__social a:hover {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.04);
}

.card-13__social a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
/* Decorative QR icon in top-right */

.card-13__qr {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 40px;
  height: 40px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: none;
}

.card-13__qr-inner {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 1px;
}

.card-13__qr-inner span {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 1px;
}
/* Random QR checkerboard pattern */

.card-13__qr-inner span:nth-child(2n) {
  background: transparent;
}

.card-13__qr-inner span:nth-child(3n) {
  background: rgba(255, 255, 255, 0.55);
}

.card-13__qr-inner span:nth-child(4n) {
  background: transparent;
}

.card-13__qr-inner span:nth-child(1),
.card-13__qr-inner span:nth-child(5),
.card-13__qr-inner span:nth-child(21),
.card-13__qr-inner span:nth-child(25) {
  background: rgba(255, 255, 255, 0.7);
}

@keyframes card-13-pulse {
  0%,
    100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.4);
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-13__statusdot {
    animation: none;
  }

  .card-13__card,
    .card-13__cta,
    .card-13__save,
    .card-13__social a {
    transition: none;
  }

  .card-13__card:hover {
    transform: none;
  }

  .card-13__cta:hover {
    transform: none;
  }
}
```

How this works

This interactive digital business card is a dark, iridescent Cardd-style vcard hand-coded on a single 360px article — 220px minimum height, 20px border-radius, 22px padding — with three stacked layers doing the depth work. The base paints two gradients: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 40%) for a top-edge highlight, and linear-gradient(160deg, #14152a 0%, #0d0e1c 100%) for the body. On top of that, a diagonal sheen strip rotates 15deg and paints indigo, pink, and cyan tinted stops between 45% and 55% — that is the whole iridescent effect, no filter, no blend-mode required.

The corner mesh uses two radial-gradients dropped into a 220px absolute-positioned box with filter: blur(24px), creating the soft chromatic bloom off the top-right. Because the article sets isolation: isolate and the sheen and mesh sit at z-index: 0, all content — header, body, footer — sits on z-index: 1 and stays crisp regardless of the blur behind it. The brand medallion is a 22px rounded square with a linear-gradient(135deg, #a5b4fc 0%, #6366f1 50%, #4338ca 100%) plus an inset ::after shine sliced at 40% and 65%.

The status pill combines a 5px pulsing dot on rgba(52, 211, 153, 0.10) ground with a 999px border — a pattern lifted directly from Read.cv and Bento. Skill chips render as an unordered list with list-style: none and pill styling. The Connect CTA breaks from typical dark UIs by painting a light gradient linear-gradient(180deg, #ecfdf5 0%, #a5b4fc 100%) against color: #06070c, which produces a 12.4:1 contrast ratio — one of the highest on the card — while the vcard-save button next to it stays quiet at 36px round.

Make it yours

  • Retune the iridescence by editing the three colored stops inside the sheen linear-gradient — rgba(165, 180, 252, 0.06), rgba(244, 114, 182, 0.05), rgba(34, 211, 238, 0.06) — or shift the rotate(15deg) to 25deg for a steeper hologram angle without touching the base card gradient.
  • Change the brand mark to a monogram by replacing the mark span with a span containing the initials at font-size 11px, font-weight 800, letter-spacing -0.02em; the linear-gradient plus inset shine layer both survive an inner text child.
  • Reveal the decorative QR badge by changing .card-13__qr from display: none to display: block; the 5-by-5 grid renders 25 spans with nth-child rules that draw a checkerboard pattern — swap in a real SVG QR if the card needs to be scanned.
  • Retone the Connect CTA to a solid indigo by replacing the linear-gradient(180deg, #ecfdf5, #a5b4fc) with a flat #a5b4fc — the black-on-light-indigo ratio still clears WCAG 1.4.3 AAA and the pill shape and 999px border-radius remain untouched.
  • Add a fourth or fifth skill chip inside the chips list — the flex-wrap: wrap and 6px gap absorb any count, and the 10.5px letter-spacing keeps chips vertically aligned as they wrap onto a second row without extra media queries.

Gotchas — read before shipping

  • The gradient-clipped name uses -webkit-background-clip: text — if the fallback color: #fafafa on line 604 is stripped, Safari 15.4 and older renders empty space. Never remove the fallback declaration, and never move the clip properties above the color declaration in the cascade.
  • The pulse animation on the status dot scales 1 to 1.4 and drops opacity to 0.7 every 2.4s — passes WCAG 2.3.3 because size deltas stay under 3px on the visible ring, but prefers-reduced-motion: reduce zeroes it. Never gate that block on an interaction — the reduce query must run at page-load.
  • The sheen box is 60% wide and 200% tall with rotate(15deg) — on Safari iOS, the transform produces a repaint layer that stays composited until the card leaves viewport. On a 20-card directory that costs 40+ MB of layer memory. Only enable the sheen on hero cards, not grid items.
  • The Connect CTA has color: #06070c on a #ecfdf5-to-#a5b4fc gradient — the top half hits 15:1 but the bottom half drops to 6.8:1. Both pass WCAG 1.4.3, but if you swap #a5b4fc for a saturated indigo like #6366f1, the bottom half falls to 3.1:1 and fails. Re-check with an eyedropper after any color edit.
  • The vcard save anchor uses href="#vcard" as a placeholder — production apps must route this to a real .vcf file download or a Web Share API call. Never leave a hash placeholder in a shipped card, because Chrome and Safari treat unresolved anchors as focus traps for screen reader users.
  • The isolation: isolate on the article is load-bearing — remove it and the sheen z-index: 0 bleeds through any parent with mix-blend-mode. If you embed the card inside a Framer Motion parent that sets its own stacking context, keep isolation: isolate anyway; the redundant declaration protects against Framer transform-based context stripping.

Techniques used in this demo

background-clip: textMDN ↗filterMDN ↗role="" (ARIA)MDN ↗radial-gradient()MDN ↗grid-templateMDN ↗@keyframesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →