CSS Neumorphism Generator

Flat: solid background, dual shadows make it look raised. Inset: same shadows reversed, looks pressed in. Concave: same external shadows as flat, plus a gradient on the background going light at the bottom to dark at the top (subtle bowl impression). Convex: gradient inverted (lighter at top to darker at bottom, looks bulged). Concave and convex give that physical button feel.

Neumorphism creates depth by simultaneously casting a lighter highlight (top-left) and a darker shadow (bottom-right) on a surface. The illusion only works if the element background matches the surrounding page background nearly exactly. If they differ noticeably, the element looks like a flat tinted card with odd shadows.

Neumorphism is famously inaccessible. Buttons, inputs, and toggles often have NO border and very low contrast, both of which fail WCAG AA. The “you cannot tell where the click target is” problem limited neumorphism’s mainstream adoption. The warning appears when your base color is in the lightness range where text overlay will fail AA contrast.

Convention is a light source at top-left: light shadow on top-left, dark shadow on bottom-right (for flat/raised). This matches the way macOS and iOS render shadows, the de-facto convention for soft UI. The tool follows that direction; inset flips it so the highlight is on the bottom-right edge of the depression.

Common pattern: hover means slightly increased distance and blur (looks more raised). Active/pressed means swap to inset shadows (looks pressed). Add transition: box-shadow 150ms ease for smoothness. CSS transitions on box-shadow are cheap, with no performance concerns.

Yes, but a page wall-to-wall with soft UI cards looks uncanny, with every shape blending into a soft pillow texture. Best practice is to use neumorphism sparingly for KEY interactive elements (1 to 3 per view) and use flat or material-style cards for everything else.

Yes, but it is harder. Dark soft UI requires LARGER lightness shifts because human eyes perceive smaller changes in darker tones. The tool’s dark preset uses 8% light and 10% dark (vs 7% and 8% for the light preset). Increase further if the depth looks too subtle on your dark theme.

Three reasons: accessibility problems were severe, it required a near-identical page background which constrained layouts, and the dual-shadow look became overused and felt dated within two years. Designers moved to glassmorphism (frosted-glass effect using backdrop-blur) and then to claymorphism (chunkier 3D shadows on bright surfaces). Neumorphism still has its place for interactive controls, smart-home UIs, and calm dashboards.

Yes. Colors, settings, and selector all stay in your browser. Nothing is uploaded.