33 CSS Card Hover Effects
06 / 33

All 33 in 33 CSS Card Hover Effects

  1. 013D Tilt & Parallax Card Effects
  2. 02Glowing Gradient & Glassmorphic Borders
  3. 03Image Zoom with Content Reveal / Slide-Up
  4. 043D Flip Cards (Front to Back)
  5. 05Parent Blur / Sibling De-emphasis (Focus States)
  6. 06Minimalist Elevation & Dynamic Shadows
  7. 07Elastic Lift
  8. 08Gradient Border Draw
  9. 09Stacked Reveal
  10. 10Holographic Shimmer
  11. 11Curtain Reveal
  12. 12Corner Peel
  13. 13Neon Sign
  14. 14Scanline
  15. 15Depth Parallax
  16. 16Spotlight
  17. 173D Tilt
  18. 18Slide Up Content
  19. 19Flip Card
  20. 20Glitch Card
  21. 21Gradient Rotate
  22. 22Border Morph
  23. 23Magnetic Float
  24. 24Typewriter Reveal
  25. 25Overlay Slide
  26. 26Grain Texture
  27. 27Frosted Glass Intensify
  28. 28Blueprint Reveal
  29. 29Shockwave
  30. 30Color Burn
  31. 31Prismatic Sweep
  32. 32Book Open
  33. 33Aurora
Pure CSSMIT licensed

Minimalist Elevation & Dynamic Shadows

A clean corporate/SaaS documentation card that sits nearly flat at rest, then lifts on hover with a translateY shift and a layered, multi-step box-shadow that expands to mimic a real card rising off the page. A small arrow nudges forward on the CTA for a final touch of polish. Ideal for SaaS marketing sites, docs platforms, and restrained UI systems where subtlety is the point.

Live Demo
Plain CSSTailwind v4
Try it

Build UI like this from scratch: Flexbox, Grid, animations & responsive CSS

ZTM · The CSS Bootcamp · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

The code

<div class="card-06">
  <article class="card-06__card">
    <div class="card-06__icon">⌘</div>
    <span class="card-06__kicker">Documentation</span>
    <h2 class="card-06__title">Quickstart<br>in 5 minutes</h2>
    <p class="card-06__desc">Install the SDK, authenticate, and ship your first request. The card lifts gently off the page as you focus it.</p>
    <span class="card-06__link">Read the guide <span class="card-06__arrow">→</span></span>
  </article>
</div>
@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500&family=Geist:wght@400;500;600&display=swap');

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

.card-06 {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #f7f8fa;
  font-family: 'Geist', sans-serif;
  padding: 2rem;
}

.card-06__card {
  position: relative;
  width: 340px;
  height: 420px;
  border-radius: 16px;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #e7e9ee;
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  color: #1c2230;
  box-shadow: 0 1px 2px rgba(20,30,50,0.04), 0 2px 4px rgba(20,30,50,0.03);
  transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.35s cubic-bezier(0.2,0.7,0.2,1), border-color 0.35s ease;
}

.card-06__card:hover {
  transform: translateY(-8px);
  border-color: #dfe2e8;
  box-shadow: 0 2px 4px rgba(20,30,50,0.04), 0 6px 12px rgba(20,30,50,0.06), 0 14px 28px rgba(20,30,50,0.08), 0 28px 56px rgba(20,30,50,0.10);
}

.card-06__icon {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: linear-gradient(150deg, #3b82f6, #2563eb);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 6px 14px rgba(37,99,235,0.3);
}

.card-06__kicker {
  margin-top: 1.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a94a6;
}

.card-06__title {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 1.9rem;
  line-height: 1.15;
  margin-top: 0.4rem;
}

.card-06__desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: #5c6678;
  margin-top: 0.9rem;
}

.card-06__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #2563eb;
}

.card-06__arrow {
  transition: transform 0.35s ease;
}

.card-06__card:hover .card-06__arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .card-06__card,
    .card-06__arrow {
    transition: none !important;
  }
}
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 Hover Effect 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: Minimalist Elevation & Dynamic Shadows
Source: https://codefronts.com/motion/css-card-hover-effects/minimalist-elevation-dynamic-shadows/

A clean corporate/SaaS documentation card that sits nearly flat at rest, then lifts on hover with a translateY shift and a layered, multi-step box-shadow that expands to mimic a real card rising off the page. A small arrow nudges forward on the CTA for a final touch of polish. Ideal for SaaS marketing sites, docs platforms, and restrained UI systems where subtlety is the point.
## HTML
```html
<div class="card-06">
  <article class="card-06__card">
    <div class="card-06__icon">⌘</div>
    <span class="card-06__kicker">Documentation</span>
    <h2 class="card-06__title">Quickstart<br>in 5 minutes</h2>
    <p class="card-06__desc">Install the SDK, authenticate, and ship your first request. The card lifts gently off the page as you focus it.</p>
    <span class="card-06__link">Read the guide <span class="card-06__arrow">→</span></span>
  </article>
</div>
```
## CSS
```css
@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500&family=Geist:wght@400;500;600&display=swap');

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

.card-06 {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #f7f8fa;
  font-family: 'Geist', sans-serif;
  padding: 2rem;
}

.card-06__card {
  position: relative;
  width: 340px;
  height: 420px;
  border-radius: 16px;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #e7e9ee;
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  color: #1c2230;
  box-shadow: 0 1px 2px rgba(20,30,50,0.04), 0 2px 4px rgba(20,30,50,0.03);
  transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.35s cubic-bezier(0.2,0.7,0.2,1), border-color 0.35s ease;
}

.card-06__card:hover {
  transform: translateY(-8px);
  border-color: #dfe2e8;
  box-shadow: 0 2px 4px rgba(20,30,50,0.04), 0 6px 12px rgba(20,30,50,0.06), 0 14px 28px rgba(20,30,50,0.08), 0 28px 56px rgba(20,30,50,0.10);
}

.card-06__icon {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: linear-gradient(150deg, #3b82f6, #2563eb);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 6px 14px rgba(37,99,235,0.3);
}

.card-06__kicker {
  margin-top: 1.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a94a6;
}

.card-06__title {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 1.9rem;
  line-height: 1.15;
  margin-top: 0.4rem;
}

.card-06__desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: #5c6678;
  margin-top: 0.9rem;
}

.card-06__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #2563eb;
}

.card-06__arrow {
  transition: transform 0.35s ease;
}

.card-06__card:hover .card-06__arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .card-06__card,
    .card-06__arrow {
    transition: none !important;
  }
}
```

How this works

Real-feeling elevation isn't a single shadow — it's the sum of two shadows with different falloffs. At rest, the card has one tight ambient shadow (0 1px 2px rgba(0,0,0,0.06)) that gives it just enough presence to sit on the page.

On :hover, the card swaps to a compound: a tight contact shadow (0 4px 12px rgba(0,0,0,0.08)) plus a wide ambient diffusion shadow (0 16px 40px rgba(0,0,0,0.12)). Together they read as light being blocked at two distances — hard for nearby surfaces, soft for distant ones. Physically correct falloff, not decorative.

Combined with transform: translateY(-8px) to lift the card off the surface, the whole hover reads as picking the card up rather than adding decoration.

Make it yours

  • Tune lift height via translateY() — -4px for restrained, -12px for pronounced. Pair with proportionally larger shadows.
  • Rebrand shadow colour from black to the card's accent — a violet card gets rgba(124,108,255,0.15) shadows for a coloured lift.
  • Swap the CTA arrow direction from → to ↗ for &ldquo;visit&rdquo; intent instead of &ldquo;continue reading&rdquo;.
  • Add a subtle border colour shift on hover (border-color: var(--accent)) for a second cue beyond elevation.
  • For dark-mode cards, the shadow strategy inverts — swap to a subtle top highlight (box-shadow: 0 -1px 0 rgba(255,255,255,0.08) inset) instead of a bottom shadow.

Gotchas — read before shipping

  • Animate ONLY transform and box-shadow — neither triggers layout reflow. Avoid animating margin-top or top to fake the lift (those reflow every frame).
  • The transition MUST live on the resting state, not on :hover — otherwise the ease-out on mouseleave doesn't fire.
  • Use will-change: transform only if you measure a jank; over-using will-change pre-allocates GPU layers for elements that don't need them and can hurt overall performance.
  • Keep the shadow layers under 40px blur radius — larger shadows are expensive to composite, especially on mobile Safari.
  • For a dark card on a dark background, the shadow strategy inverts — a top-inset light instead of a bottom-outset shadow reads as elevation.

Browser support

ChromeSafariFirefoxEdge
45+9+16+45+

CSS transitions, transforms and multi-layer box-shadow are universally supported across every current browser. No prefixes needed.

Techniques used in this demo

place-items / place-contentMDN ↗box-shadowMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →