33 CSS Card Hover Effects06 / 33

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.

Published

Live Demo
Try it

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 ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →