neumorphism soft-ui card shadow depth emboss neumorphic product card soft-UI settings panel elevated widget on monochrome background cards feel flat but borders look heavy want depth without harsh outlines monochrome UI needs subtle elevation
Soft Card
Fetch snippet JSON:
curl https://webspire.de/snippets/soft-ui/card.json Preview
Background
Customize
Quick Start
<div class="soft-card p-8"><h2>Title</h2></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-color-scheme
- Size
- 498 bytes · 27 lines
- Custom Properties
-
--soft-bg--soft-radius--soft-light--soft-shadow - Classes
-
.soft-card
neumorphism soft-ui card shadow depth emboss
A neumorphic (soft-UI) card. Two shadows — one lighter, one darker — emerge from opposite corners to create the illusion of extrusion. The background matches the page; depth is purely shadow-derived.
Accessibility note: The shadow technique provides visual depth but no color contrast on its own. Always pair with sufficient text contrast (WCAG AA) and avoid relying on elevation alone to communicate meaning.
Basic card
<div style="background: oklch(93% 0.01 75); padding: 3rem; border-radius: 2rem;">
<div class="soft-card p-8 max-w-sm">
<h2 class="text-xl font-bold text-slate-700 mb-2">Workspace</h2>
<p class="text-sm text-slate-500">Your personal design environment.</p>
</div>
</div>Dark mode
Set --soft-bg, --soft-light, --soft-shadow to dark values, or rely on the built-in prefers-color-scheme: dark rule.
<div style="background: oklch(22% 0.01 75); padding: 3rem; border-radius: 2rem;">
<div class="soft-card p-8 max-w-sm">
<p class="text-slate-300">Dark soft card</p>
</div>
</div>