33 CSS Card Hover Effects 06 / 33
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.
Best forSaaS marketing sites, docs platforms, and restrained UI systems where subtlety is the point.
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> <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,[email protected],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 {
min-height: 460px;
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;
}
} @import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,[email protected],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 {
min-height: 460px;
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;
}
}