Neumorphic Card
Soft UI neumorphism using dual box-shadows — one light, one dark — to create the illusion of being extruded from the background surface.
Neumorphic Card the 13th of 20 designs in the 20 CSS Cards with Animations collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
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> .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;
}