CSS Neumorphism Generator

It's two shadows on one element: a dark one offset toward the bottom right and a light one mirrored toward the top left, both derived from the background color. Your eye reads that pairing as a soft object lit from above, extruded out of the page surface.

Pure white leaves no headroom for the light shadow, since the channels are already at 255, so half the effect vanishes. Use a light gray like the default #E4E4E7, or any mid-tone, so the tool can compute a visibly lighter and darker pair.

The edges of every element are deliberately low contrast, so users with low vision can struggle to find buttons at all. WCAG 2.1 asks for a 3:1 contrast ratio on the boundaries of interactive components, which soft shadows alone rarely reach. Add visible borders, strong focus rings, or clear color changes on interactive states.

Yes. The Inset (pressed) checkbox moves both shadows inside the element, which reads as pushed into the surface. A common pattern is copying two versions from this tool, raised for the resting state and inset for :active, and swapping between them.

It does; the light and dark shadow colors are computed from whatever hex you enter. Very dark surfaces compress the darker shadow, so raise Intensity toward 25 or 30 percent to keep both shadows distinguishable. Charcoal tones around #2A2A2E behave better than pure black.

Honestly, no. Everything melting into one surface makes hierarchy and affordance hard to communicate, which is why the style retreated from full products. It works best on one contained surface, like a media player card, inside an otherwise conventional interface.

Generous ones. The default here is 24px and the slider reaches 80px, because the style imitates molded plastic and sharp corners kill that association. Match the radius roughly to shadow distance so the curvature and the lighting agree.