Box shadow
Writes an eased multi-layer falloff — the hand-tuned “smooth shadow” technique, automated. Fine-tune any layer below after.
The two-shadow trick, pre-built
Neumorphism is one precise recipe: a dark shadow falling down-right, a light one rising up-left, on a card the exact color of the page behind it — the element looks molded from the surface instead of floating over it. This neumorphism generator opens with that recipe already assembled and the card correctly locked to the background, so what you tune is the feel (distance, softness, depth), not the plumbing. Every slider move updates the real CSS you'll copy.
How to get your soft-UI shadow
- Start from the light or dark neumorphic preset in the Presets drawer.
- Tune the paired layers — offset for depth, blur for softness, alpha for weight.
- Flip the surface toggle to preview on light and dark; the card follows the background automatically.
- Copy CSS for a stylesheet, or Copy Tailwind for a shadow-[…] utility class.
Where neumorphism works — and where it honestly doesn't
The style shines on calm, decorative surfaces: music-player cards, smart-home dashboards, calculator keys, onboarding tiles. It struggles where contrast is the job — dense forms, data tables, primary CTAs — because edges are implied by shadow rather than drawn. Two rules keep it usable: the card and page background must be the same color (on a mid-tone, never pure white or black), and text must still clear normal contrast standards. If soft-and-glassy is closer to your brand than soft-and-molded, the glassmorphism generator is the sibling tool; for conventional elevation shadows, the full box-shadow generator has Material-style presets and per-layer editing.
Frequently asked questions
What is neumorphism, in one paragraph?
A soft-UI style where elements look pressed out of (or into) the background instead of floating above it. The recipe is two opposing shadows — a dark one down-right, a light one up-left — on a card the same color as the page. It reads as tactile, molded plastic; Apple-adjacent concept designs made it famous around 2020 and it still owns a distinctive niche.
How does this neumorphism generator work?
It opens our box-shadow engine pre-loaded with the neumorphic recipe: the paired light/dark shadows, a surface picker, and the card locked to the background color (the one condition the style needs). Drag the sliders to tune distance and softness, flip light/dark, then copy the result as plain CSS or a Tailwind arbitrary shadow utility.
Why does my neumorphic card look wrong on my site?
Almost always because the card color does not match the page background — the illusion is literally made of that equality. The second cause is a pure-white or pure-black background: the light shadow needs somewhere brighter to go and the dark one somewhere darker, so mid-tone backgrounds (light grey, deep slate) work best.
Is neumorphism bad for accessibility?
It can be, honestly. The style trades contrast for softness: button edges are implied by shadow, not outline, which is hard for low-vision users. Keep text contrast at WCAG AA regardless of the soft edges, reserve the style for decorative surfaces over critical controls, and give interactive elements a visible focus ring — the generator’s output never removes yours.
Does it work in dark mode?
Yes — there is a dedicated dark preset where the “light” shadow becomes a subtle pale glow and the dark one deepens. Dark neumorphism actually hides the style’s banding artifacts better than light mode. Flip the surface toggle and both shadows retune; the copied CSS carries exactly what you see.
Can I get the shadow as a Tailwind class?
Yes — Copy Tailwind emits the full stack as a shadow-[…] arbitrary-value utility, ready to paste onto any element. Because the whole recipe is standard box-shadow CSS, it also works in styled-components, vanilla stylesheets, or inline styles without any plugin.
Need regular elevation shadows? Open the box-shadow generator → Prefer frosted glass? Try the glassmorphism generator →