Neumorphism (the "soft UI" look — elements that appear carved from or embossed into the same surface they sit on) is technically just two box-shadow values. That part takes ten minutes to copy. The part that actually makes it look right, and the part almost every broken attempt at it gets wrong, is that the background color isn't a style choice — it's a constraint the shadow colors are derived from.
Neumorphism with inset and outset shadows.
Same button, shadows inverted inward.
.soft-card {
background: #e8eaf0;
border-radius: 16px;
padding: 24px;
box-shadow:
6px 6px 14px #c8cacc,
-6px -6px 14px #ffffff;
}
.soft-btn {
background: #e8eaf0;
border-radius: 8px;
padding: 10px 20px;
box-shadow:
3px 3px 8px #c8cacc,
-3px -3px 8px #ffffff;
border: none; cursor: pointer;
}Two shadows, offset in opposite directions. The bottom-right shadow (6px 6px, darker color) simulates the side facing away from a light source; the top-left shadow (-6px -6px, lighter color) simulates the side catching the light. Layer them on an element that shares the page's background color, and the element reads as pressed into or raised out of the surface rather than sitting on top of it like a normal card with a drop shadow.
Both shadow colors in the example above — #c8cacc and #ffffff — only work because they're derived from the actual background, #e8eaf0: one is a step darker, one is a step lighter (white, at the lightest extreme). Swap the background to something unrelated — a saturated blue, a near-black — and the same two shadow colors stop reading as "light and shadow on this surface" and start reading as two random colored blurs. The background isn't decoration behind the shadow trick; it's the third input the trick depends on.
| Background | Dark shadow (away from light) | Light shadow (toward light) |
|---|---|---|
#e8eaf0 (light gray, this example) | #c8cacc | #ffffff |
#2d3748 (dark mode variant) | #1a202c | #3d4a5f |
Notice the dark-mode row doesn't use white for the light shadow — it uses a lighter gray. A pure white highlight on a dark background stops looking like a light source and starts looking like a glow or an active/focused state, which is a different signal entirely.
The only difference between an element that looks like it's popping out of the surface and one that looks pressed into it is the inset keyword on both shadows:
.soft-btn.pressed {
box-shadow:
inset 3px 3px 8px #c8cacc,
inset -3px -3px 8px #ffffff;
}This is genuinely useful for a real interaction, not just a style variant: toggle the inset version on :active and a neumorphic button gets a tactile "pressed" feedback state for free, without a transform or a separate image asset.
This neumorphic card, plus 39 other CSS card patterns (glassmorphism, hover effects, 3D flips) with live previews and copy-ready code, is in UIXDraft's free CSS card gallery.
See the full card gallery →Neumorphism's signature look comes from very low contrast between an element and its background — that's precisely what makes it look "carved from the same material." That's also precisely what WCAG contrast guidelines exist to prevent for interactive elements. A neumorphic button with no visible border and a background nearly identical to the page can be genuinely hard to locate for low-vision users, and it fails automated contrast checks by design, not by accident. Where it's used, add a visible focus state (a real outline, not just a shadow shift) and consider a subtle border for the resting state, so keyboard and low-vision users get a cue that doesn't depend on the light/shadow illusion.
The background color is almost always the cause, not the shadow values. Neumorphism needs a background in the light-to-mid gray range (roughly #dfe3e8 to #ebeef2) — go too light and the light shadow disappears against it; go too dark or too saturated and both shadows read as muddy smudges instead of a light source.
It can, but the shadow colors need to invert in relationship, not just in brightness: pick a mid-dark gray background, then a shadow darker than it for the "away from light" side and a lighter gray (not white) for the "toward light" side. Pure white highlight shadows on a dark background look like a glow effect, not a light source, which breaks the illusion just as badly as the wrong background does in light mode.
The whole effect depends on very low contrast between the element and its background (that's what makes it look "carved from the same material"), which directly conflicts with WCAG contrast requirements for interactive elements. It works fine for decorative, non-interactive surfaces, but a neumorphic button or input with no additional border/label cue can be genuinely difficult for low-vision users to even locate.