20 CSS Card Examples — Free Code & Live Demos

Every card is hand-coded from scratch — glassmorphism, 3D flips, brutalist, holographic, profile, pricing, and more. Copy any snippet and drop it straight into your project.

20 unique cards 16 CSS only 4 CSS + JS 0 dependencies

01 / 20

Glassmorphism Card

Pure CSS

Glassmorphism

Frosted glass with backdrop blur and layered gradient glows.

Frosted glass effect using backdrop-filter blur with radial gradient background orbs and subtle white border.

.card-glass {
  background: rgba(255,255,255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255, 0.2);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 8px 32px rgba(0,0,0, 0.3);
  transition: transform 0.3s, box-shadow 0.3s;
}
.card-glass:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0, 0.4);
}

<div class="card-glass">
  <h4>Glassmorphism</h4>
  <p>Frosted glass with backdrop blur and layered gradient glows.</p>
  <button class="glass-btn">Learn more</button>
</div>

02 / 20

Neon Gradient Border Card

Pure CSS

⚡

Neon Border

Gradient border reveals on hover using pseudo-element z-index trick.

Rainbow gradient border that fades in on hover using a background pseudo-element positioned behind the card with z-index -1.

.card {
  background: #111118;
  border-radius: 12px;
  position: relative;
}
.card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 13px;
  background: linear-gradient(135deg,
    #7c6cff, #ff6c8a, #3de8f5);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s;
}
.card:hover::before { opacity: 1; }
.card:hover { transform: translateY(-3px); }

<div class="card-neon">
  <div class="neon-icon">⚡</div>
  <h4>Neon Border</h4>
  <p>Gradient border reveals on hover using pseudo-element z-index trick.</p>
</div>

03 / 20

3D Flip Card

Pure CSS

Hover to Flip

3D card flip effect →

The Back Side

Revealed with CSS 3D perspective

Pure CSS 3D flip using transform-style: preserve-3d and rotateY with backface-visibility: hidden on both faces.

.scene { perspective: 700px; }
.card {
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(.23,1,.32,1);
}
.scene:hover .card {
  transform: rotateY(180deg);
}
.front, .back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 14px;
}
.back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg,#7c6cff,#ff6c8a);
}

<div class="flip-scene">
  <div class="flip-card">
    <div class="flip-front">
      <h4>Hover to Flip</h4>
      <p>3D card flip effect →</p>
    </div>
    <div class="flip-back">
      <h4>The Back Side</h4>
      <p>Revealed with CSS 3D perspective</p>
    </div>
  </div>
</div>

04 / 20

Animated Gradient Border Card

Pure CSS

Spinning Gradient

Conic-gradient border spins continuously using CSS animation.

Live animation

Continuously rotating conic-gradient border using a pseudo-element with rotate keyframes. No JavaScript needed.

.card {
  background: #111118;
  border-radius: 14px;
  position: relative;
}
.card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  background: conic-gradient(
    #7c6cff, #ff6c8a,
    #3de8f5, #1ed98a, #7c6cff
  );
  z-index: -1;
  animation: spin 3s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

<div class="card-grad-border">
  <h4>Spinning Gradient</h4>
  <p>Conic-gradient border spins continuously using CSS animation.</p>
  <span class="grad-tag">Live animation</span>
</div>

05 / 20

3D Mouse Tilt Card

CSS + JS

3D Tilt Card

Move your mouse over me to see the 3D tilt effect.

Mouse-tracked

Tracks cursor position and applies rotateX/rotateY perspective transforms in real-time, with a dynamic radial shine that follows the mouse.

.card-tilt {
  transform-style: preserve-3d;
  transition: transform 0.1s;
}
.tilt-shine {
  position: absolute; inset: 0;
  background: radial-gradient(circle at
    var(--mx) var(--my),
    rgba(255,255,255,.12) 0%,
    transparent 65%);
  border-radius: inherit;
  pointer-events: none;
}

<div class="card-tilt" id="tiltCard">
  <div class="tilt-shine"></div>
  <div class="tilt-layer">
    <h4>3D Tilt Card</h4>
    <p>Move your mouse to see the 3D tilt effect.</p>
    <span class="tilt-badge">Mouse-tracked</span>
  </div>
</div>

const card = document.getElementById('tiltCard');
card.addEventListener('mousemove', e => {
  const {left,top,width,height} = card.getBoundingClientRect();
  const x = (e.clientX - left) / width - 0.5;
  const y = (e.clientY - top)  / height - 0.5;
  card.style.transform =
    `perspective(700px) rotateX(${-y*18}deg) rotateY(${x*18}deg)`;
});
card.addEventListener('mouseleave', () => {
  card.style.transform = 'perspective(700px) rotateX(0) rotateY(0)';
});

06 / 20

Cursor Spotlight Card

CSS + JS

Spotlight Card

Cursor light follows your mouse around the card surface.

A soft radial glow follows the cursor position inside the card, illuminating where you look. Border subtly highlights on hover.

.card-spotlight { position: relative; overflow: hidden; }
.spotlight-glow {
  position: absolute;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(124,108,255,.22) 0%, transparent 70%);
  transform: translate(-50%,-50%);
  pointer-events: none;
  opacity: 0; transition: opacity 0.3s;
}
.card-spotlight:hover .spotlight-glow { opacity: 1; }

<div class="card-spotlight" id="spotCard">
  <div class="spotlight-glow" id="spotGlow"></div>
  <div class="spot-content">
    <div class="spot-avatar">V</div>
    <h4>Spotlight Card</h4>
    <p>Cursor light follows your mouse around the card surface.</p>
  </div>
</div>

const card = document.getElementById('spotCard');
const glow = document.getElementById('spotGlow');
card.addEventListener('mousemove', e => {
  const r = card.getBoundingClientRect();
  glow.style.left = (e.clientX - r.left) + 'px';
  glow.style.top  = (e.clientY - r.top)  + 'px';
});

07 / 20

Stacked Paper Card

Pure CSS

Stacked Paper

Pseudo-elements create layered paper cards that fan out on hover.

Two pseudo-elements behind the card rotate and offset on hover to create a fanned paper stack effect. Works beautifully on light backgrounds.

.card { position: relative; }
.card::before, .card::after {
  content: '';
  position: absolute;
  border-radius: 12px;
  width: 100%; height: 100%;
  transition: transform 0.35s cubic-bezier(.23,1,.32,1);
}
.card::before {
  background: #d6c9ff;
  top: 8px; left: 6px; z-index: 0;
}
.card::after {
  background: #ffc8d6;
  top: 4px; left: 3px; z-index: 0;
}
.card:hover::before {
  transform: translate(4px,6px) rotate(3deg);
}
.card:hover::after {
  transform: translate(-3px,4px) rotate(-2deg);
}

<div class="card-stack">
  <div class="stack-main">
    <h4>Stacked Paper</h4>
    <p>Pseudo-elements fan out on hover.</p>
    <button class="stack-btn">Open →</button>
  </div>
</div>

08 / 20

Holographic Shimmer Card

Pure CSS

Ultra Rare

Holographic

★

A white light sweeps across the card on hover using translateX animation, over a multi-color gradient background for a trading-card holographic look.

.card {
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(124,108,255,.2),rgba(61,232,245,.15),
    rgba(255,108,138,.2),rgba(30,217,138,.15));
}
.shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg,
    transparent 40%,
    rgba(255,255,255,.15) 50%,
    transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}
.card:hover .shine {
  transform: translateX(100%);
}

<div class="card-holo">
  <div class="holo-shine"></div>
  <div class="holo-content">
    <div class="holo-label">Ultra Rare</div>
    <h4>Holographic</h4>
    <div class="holo-num">★</div>
    <div class="holo-bar"></div>
  </div>
</div>

09 / 20

Slide Reveal Card

Pure CSS

🎨

Hover to Reveal

Content slides up from the bottom replacing the image

On hover the initial image content translates up and out while the description panel slides up from the bottom to fill the card.

.card { overflow: hidden; position: relative; }
.image {
  width: 100%; height: 100%;
  transition: transform 0.4s cubic-bezier(.23,1,.32,1);
}
.card:hover .image { transform: translateY(-100%); }
.content {
  position: absolute;
  bottom: -100%; left: 0; right: 0;
  padding: 16px;
  background: linear-gradient(180deg, #7c6cff, #ff6c8a);
  transition: bottom 0.4s cubic-bezier(.23,1,.32,1);
}
.card:hover .content { bottom: 0; }

<div class="card-reveal">
  <div class="reveal-img">🎨</div>
  <div class="reveal-content">
    <h4>Hover to Reveal</h4>
    <p>Content slides up from the bottom.</p>
  </div>
</div>

10 / 20

Morphing Blob Card

Pure CSS

Blob Shape

border-radius morphs into a completely different blob on hover

8-point border-radius transitions between two organic blob shapes on hover with a smooth CSS transition. Pure CSS, no JavaScript.

.card {
  background: linear-gradient(135deg,#7c6cff,#ff6c8a);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  transition:
    border-radius 0.6s ease,
    transform 0.3s;
}
.card:hover {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  transform: scale(1.04);
}

<div class="card-morph">
  <h4>Blob Shape</h4>
  <p>border-radius morphs into a different blob on hover</p>
</div>

11 / 20

Brutalist Card

Pure CSS

NEW

Brutalist
Design

Raw edges, hard shadows, zero subtlety. Hover to shift the shadow.

Hard offset box-shadow gives a bold physical depth effect. Shadow shifts position and color on hover. Pressing moves card into the shadow.

.card {
  border: 2.5px solid #1a1a1a;
  box-shadow: 6px 6px 0 #1a1a1a;
  background: #fff;
  transition: transform 0.15s, box-shadow 0.15s;
}
.card:hover {
  transform: translate(-3px,-3px);
  box-shadow: 9px 9px 0 #7c6cff;
}
.card:active {
  transform: translate(3px,3px);
  box-shadow: 3px 3px 0 #1a1a1a;
}

<div class="card-brute">
  <span class="brute-tag">NEW</span>
  <h4>Brutalist<br>Design</h4>
  <p>Raw edges, hard shadows, zero subtlety.</p>
  <button class="brute-btn">CLICK ME</button>
</div>

12 / 20

Retro Terminal Card

Pure CSS

$ npm install codefronts

✓ Packages installed

$ npm run build

✓ Built in 0.4s

Green-on-black terminal aesthetic with a blinking cursor using step-end animation. Perfect for dev tools, documentation, and code-related sites.

.terminal { background: #050a05; font-family: monospace; }
.term-bar { background: #111; border-bottom: 1px solid rgba(30,217,138,.2); }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.line { color: #1ed98a; font-size: 11px; line-height: 2; }
.cursor {
  display: inline-block;
  width: 7px; height: 13px;
  background: #1ed98a;
  vertical-align: middle;
  animation: blink 0.8s step-end infinite;
}
@keyframes blink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0; }
}

<div class="card-term">
  <div class="term-bar">
    <div class="term-dot" style="background:#ff5f57"></div>
    <div class="term-dot" style="background:#febc2e"></div>
    <div class="term-dot" style="background:#28c840"></div>
  </div>
  <div class="term-body">
    <div class="term-line"><span class="cmd">$ </span>npm install</div>
    <div class="term-line"><span class="out">✓ Packages installed</span></div>
    <div class="term-line"><span class="cmd">$ </span>npm run build</div>
    <div class="term-line"><span class="out">✓ Built in 0.4s</span></div>
    <div class="term-line"><span class="cmd">$ </span><span class="term-cursor"></span></div>
  </div>
</div>

13 / 20

Neumorphic Card

Pure CSS

🔮

Neumorphic

Soft extrusion from the surface. Hover to push it inward.

Soft UI neumorphism using dual box-shadows — one light, one dark — to create the illusion of being extruded from the background surface.

/* Same color as background is KEY */
.card {
  background: #e0e0e8;
  border-radius: 20px;
  box-shadow:
     6px  6px 14px rgba(0,0,0, 0.18),
    -6px -6px 14px rgba(255,255,255, 0.70);
  transition: box-shadow 0.3s;
}
.card:hover {
  box-shadow:
    inset  3px  3px  8px rgba(0,0,0, 0.12),
    inset -3px -3px  8px rgba(255,255,255, 0.60);
}

<div class="card-neu">
  <div class="neu-icon">🔮</div>
  <h4>Neumorphic</h4>
  <p>Soft extrusion from the surface. Hover to push it inward.</p>
</div>

14 / 20

Animated Stats Card

Pure CSS

📈

+24.8%

48,293

Monthly Visitors

Dashboard metric card with an animated progress bar that grows from 0 using CSS animation. Use IntersectionObserver for scroll-trigger.

.bar-fill {
  height: 4px;
  background: linear-gradient(90deg, #7c6cff, #ff6c8a);
  border-radius: 2px;
  animation: grow 0.8s ease-out both;
}
@keyframes grow {
  from { width: 0; }
  to   { width: 72%; }
}

<div class="card-stats">
  <div class="stats-header">
    <div class="stats-icon">📈</div>
    <span class="stats-trend">+24.8%</span>
  </div>
  <div class="stats-num">48,293</div>
  <div class="stats-label">Monthly Visitors</div>
  <div class="stats-bar-wrap">
    <div class="stats-bar-fill"></div>
  </div>
</div>

15 / 20

Profile Card

Pure CSS

Alex Morgan

Frontend Developer

142

Projects

4.8k

Stars

328

Followers

Social profile card with gradient avatar ring using CSS mask-composite trick, stats row, and a lift animation on hover.

/* Gradient avatar ring without extra element */
.avatar {
  border-radius: 50%;
  position: relative;
}
.avatar::after {
  content: '';
  position: absolute;
  inset: -3px; border-radius: 50%;
  border: 2px solid transparent;
  background:
    linear-gradient(135deg,#7c6cff,#ff6c8a)
    border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

<div class="card-profile">
  <div class="profile-avatar">VR</div>
  <div class="profile-name">Alex Morgan</div>
  <div class="profile-role">Frontend Developer</div>
  <div class="profile-stats">
    <div class="pstat">
      <div class="pstat-num">142</div>
      <div class="pstat-label">Projects</div>
    </div>
    <div class="pstat">
      <div class="pstat-num">4.8k</div>
      <div class="pstat-label">Stars</div>
    </div>
    <div class="pstat">
      <div class="pstat-num">328</div>
      <div class="pstat-label">Followers</div>
    </div>
  </div>
</div>

16 / 20

Pricing Card

Pure CSS

Pro Plan

$29/mo

Everything you need to ship faster.

Unlimited projects

Priority support

Custom domain

Pricing tier card with a top border line that draws in from the left on hover using scaleX transform, and a button that fills with color.

.card {
  position: relative;
  transition: border-color 0.3s, transform 0.3s;
}
/* Top accent line draws in left → right */
.card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,#7c6cff,#ff6c8a);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(.23,1,.32,1);
}
.card:hover::before { transform: scaleX(1); }
.card:hover { transform: translateY(-3px); }

<div class="card-price">
  <div class="price-plan">Pro Plan</div>
  <div class="price-amt">$29<span>/mo</span></div>
  <div class="price-desc">Everything you need to ship faster.</div>
  <div class="price-features">
    <div class="price-feat">Unlimited projects</div>
    <div class="price-feat">Priority support</div>
    <div class="price-feat">Custom domain</div>
  </div>
  <button class="price-btn">Get started</button>
</div>

17 / 20

Notification Stack Card

Pure CSS

New follower

@alex started following you

Build passed

Production deploy successful

Alert

CPU usage exceeded 90%

Stacked notification items that slide right and highlight on hover. Pulsing colored dots indicate notification type.

.item {
  display: flex; align-items: flex-start;
  gap: 10px; padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  transition: transform 0.2s, border-color 0.2s;
}
.item:hover {
  transform: translateX(4px);
  border-color: rgba(124,108,255,.4);
  background: rgba(124,108,255,.06);
}
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100%{ opacity: 1; } 50%{ opacity: .4; }
}

<div class="card-notif">
  <div class="notif-item">
    <div class="notif-dot" style="background:#7c6cff"></div>
    <div class="notif-body">
      <h5>New follower</h5>
      <p>@alex started following you</p>
    </div>
    <span class="notif-time">2m</span>
  </div>
  <div class="notif-item">
    <div class="notif-dot" style="background:#1ed98a"></div>
    <div class="notif-body">
      <h5>Build passed</h5>
      <p>Production deploy successful</p>
    </div>
    <span class="notif-time">8m</span>
  </div>
</div>

18 / 20

Skeleton Loader Card

Pure CSS

Animated skeleton loading state with a sweeping shimmer wave using background-position keyframes. Replace divs with real content after data loads.

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.04) 75%
  );
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}
.avatar { width:44px; height:44px; border-radius:50%; }
.line   { height: 10px; margin-bottom: 7px; }

<div class="card-skel">
  <div class="skel skel-avatar"></div>
  <div class="skel skel-line w-3q"></div>
  <div class="skel skel-line w-full"></div>
  <div class="skel skel-line w-half"></div>
  <div class="skel skel-gap"></div>
  <div class="skel skel-line w-full"></div>
  <div class="skel skel-line w-2q"></div>
  <div class="skel skel-btn"></div>
</div>

19 / 20

Magazine Card

Pure CSS

🌌

Design

The Future of CSS in 2025

Editorial card with image area, category badge, read progress bar that fills on hover, and a smooth lift transition.

.card { overflow: hidden; transition: transform 0.35s; }
.card:hover { transform: translateY(-4px); }
/* Read progress bar fills on hover */
.read-fill {
  height: 2px;
  width: 0;
  background: #7c6cff;
  transition: width 0.4s ease;
}
.card:hover .read-fill { width: 60%; }
/* Image area with gradient overlays */
.mag-img {
  background: linear-gradient(135deg,#1a0533,#0a1535,#0d1a33);
  position: relative; overflow: hidden;
}
.mag-img::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%,
    rgba(124,108,255,.4),transparent 60%);
}

<div class="card-mag">
  <div class="mag-img"><div class="mag-img-inner">🌌</div></div>
  <div class="mag-body">
    <div class="mag-category">Design</div>
    <h4>The Future of CSS in 2025</h4>
    <div class="mag-footer">
      <span class="mag-author">Alex Morgan</span>
      <span class="mag-read">Read →</span>
    </div>
    <div class="mag-read-bar"><div class="mag-read-fill"></div></div>
  </div>
</div>

20 / 20

Interactive Vote Card

CSS + JS

Best CSS feature?

1,284 votes

Pick your favourite modern CSS feature.

Container Queries 64%

:has() selector 22%

CSS Layers 14%

Poll card with clickable options that fill in with a progress bar and show percentage. Selected option persists state via JS class toggle.

.option {
  display: flex; align-items: center;
  gap: 8px; padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px; cursor: pointer;
  position: relative; overflow: hidden;
  transition: border-color 0.2s;
}
.option.selected { border-color: #7c6cff; }
.fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(124,108,255,.12);
  transition: width 0.4s ease;
}

<div class="card-vote">
  <div class="vote-header">
    <h4>Best CSS feature?</h4>
    <span class="vote-count">1,284 votes</span>
  </div>
  <div class="vote-options">
    <div class="vote-opt selected">
      <div class="vote-fill"></div>
      <span class="vote-opt-label">Container Queries</span>
      <span class="vote-opt-pct">64%</span>
    </div>
    <div class="vote-opt">
      <div class="vote-fill" style="width:22%"></div>
      <span class="vote-opt-label">:has() selector</span>
      <span class="vote-opt-pct">22%</span>
    </div>
    <div class="vote-opt">
      <div class="vote-fill" style="width:14%"></div>
      <span class="vote-opt-label">CSS Layers</span>
      <span class="vote-opt-pct">14%</span>
    </div>
  </div>
</div>

document.querySelectorAll('.vote-opt').forEach(opt => {
  opt.addEventListener('click', () => {
    opt.closest('.vote-options')
       .querySelectorAll('.vote-opt')
       .forEach(o => o.classList.remove('selected'));
    opt.classList.add('selected');
  });
});

20 CSS Cards with Animations

Glassmorphism

Neon Border

Hover to Flip

The Back Side

Spinning Gradient

3D Tilt Card

Spotlight Card

Stacked Paper

Holographic

Hover to Reveal

Blob Shape

Brutalist
Design

Neumorphic

New follower

Build passed

Alert

The Future of CSS in 2025

Best CSS feature?

Related collections

22 CSS Button Group Designs

31 CSS Buttons

23 CSS Checkboxes

20 CSS Cards with Animations

Glassmorphism

Neon Border

Hover to Flip

The Back Side

Spinning Gradient

3D Tilt Card

Spotlight Card

Stacked Paper

Holographic

Hover to Reveal

Blob Shape

BrutalistDesign

Neumorphic

New follower

Build passed

Alert

The Future of CSS in 2025

Best CSS feature?

Related collections

22 CSS Button Group Designs

31 CSS Buttons

23 CSS Checkboxes

Brutalist
Design