Generate soft-UI (neumorphism) styles — flat, pressed, convex or concave — with the light and dark shadows derived from your surface color in OKLCH so the illusion holds.
Generated locally in your browser — your colors, settings and code never leave this page.
One surface, sculpted by light
Neumorphism fakes physical relief: a light shadow from the top-left, a dark one from the bottom-right, on an element the SAME color as its background — the eye reads a raised (or pressed, with inset) region of one continuous surface. This generator derives the shadow pair from your surface color in OKLCH, stepping lightness symmetrically, so the illusion stays balanced on any base — including dark surfaces where naive white/black shadows fail.
Worked example
/* container background must also be #e0e5ec */
.neumorphic {
background: #e0e5ec;
box-shadow: 8px 8px 16px #b8bec9,
-8px -8px 16px #ffffff;
border-radius: 20px;
}The four shapes
- Flat — raised element. Pressed — inset shadows, for active states and input wells.
- Convex/Concave — a subtle gradient adds curvature; knobs and dials.
The honest assessment
- Neumorphism is aesthetically distinctive and accessibility-weak by nature: element boundaries are low-contrast, and states differ only by shadow direction. Use it decoratively or on secondary controls, keep focus indicators strong, and give critical controls an additional affordance. The tool repeats this on every run because it matters.
Related
- The physically-inspired opposite: layered drop shadows; the other soft trend: glassmorphism.
How to use the CSS Neumorphism Generator
- Pick the surface color — the element and its background must share it.
- Choose the shape: flat, pressed, convex or concave; tune distance and intensity.
- Copy the CSS, including the background note.
Frequently asked questions
How does the soft-UI illusion work?
Two opposing shadows — light from top-left, dark from bottom-right — on an element the SAME color as its background, computed here in OKLCH from your surface so the pair stays balanced. Inset shadows flip it to pressed; gradients add convex/concave curvature.
Why must the background match the element?
The illusion is of one continuous surface with raised or carved regions. On a contrasting background the element reads as a normal card and the effect collapses.
Is neumorphism a good idea?
Aesthetically distinctive, accessibility-weak: boundaries are inherently low-contrast. Use it decoratively or for secondary controls, keep focus states strong, and never let it be the only affordance on something critical — the tool says this on every run.
