20 CSS Cards with Animations 13 / 20
Neumorphic Card
Soft UI neumorphism using dual box-shadows — one light, one dark — to create the illusion of being extruded from the background surface.
The code
<div class="stage-13">
<div class="card-neu">
<div class="neu-icon">🔮</div>
<h4 style="color: #3a3a4a">Neumorphic</h4>
<p style="color: #8a8898; font-size: 11px; line-height: 1.5; margin-top: 4px">
Soft extrusion from the surface. Hover to push it inward.
</p>
</div>
</div> <div class="stage-13">
<div class="card-neu">
<div class="neu-icon">🔮</div>
<h4 style="color: #3a3a4a">Neumorphic</h4>
<p style="color: #8a8898; font-size: 11px; line-height: 1.5; margin-top: 4px">
Soft extrusion from the surface. Hover to push it inward.
</p>
</div>
</div>.card-neu {
width: 200px;
padding: 22px;
border-radius: 20px;
background: #e0e0e8;
box-shadow:
6px 6px 14px rgba(0, 0, 0, 0.18),
-6px -6px 14px rgba(255, 255, 255, 0.7);
transition: box-shadow 0.3s;
}
.card-neu:hover {
box-shadow:
2px 2px 6px rgba(0, 0, 0, 0.15),
-2px -2px 6px rgba(255, 255, 255, 0.6),
inset 3px 3px 8px rgba(0, 0, 0, 0.12),
inset -3px -3px 8px rgba(255, 255, 255, 0.6);
}
.neu-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: #e0e0e8;
box-shadow:
4px 4px 8px rgba(0, 0, 0, 0.15),
-4px -4px 8px rgba(255, 255, 255, 0.65);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: 14px;
}
.card-neu h4 {
font-size: 13px;
font-weight: 700;
color: #3a3a4a;
margin-bottom: 4px;
}
.card-neu p {
font-size: 11px;
color: #8a8898;
line-height: 1.5;
}
/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
width: 100%;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 2.5rem 1.5rem;
box-sizing: border-box;
}
.stage-13 {
background: #e0e0e8;
} .card-neu {
width: 200px;
padding: 22px;
border-radius: 20px;
background: #e0e0e8;
box-shadow:
6px 6px 14px rgba(0, 0, 0, 0.18),
-6px -6px 14px rgba(255, 255, 255, 0.7);
transition: box-shadow 0.3s;
}
.card-neu:hover {
box-shadow:
2px 2px 6px rgba(0, 0, 0, 0.15),
-2px -2px 6px rgba(255, 255, 255, 0.6),
inset 3px 3px 8px rgba(0, 0, 0, 0.12),
inset -3px -3px 8px rgba(255, 255, 255, 0.6);
}
.neu-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: #e0e0e8;
box-shadow:
4px 4px 8px rgba(0, 0, 0, 0.15),
-4px -4px 8px rgba(255, 255, 255, 0.65);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: 14px;
}
.card-neu h4 {
font-size: 13px;
font-weight: 700;
color: #3a3a4a;
margin-bottom: 4px;
}
.card-neu p {
font-size: 11px;
color: #8a8898;
line-height: 1.5;
}
/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
width: 100%;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 2.5rem 1.5rem;
box-sizing: border-box;
}
.stage-13 {
background: #e0e0e8;
}