Neumorphism (soft UI) is a design style where a component uses the same background colour as its parent and applies two box-shadows: a lighter highlight on the side facing the light source and a darker shadow on the opposite side. That pair of shadows makes the element look softly extruded from — or, with inset shadows, pressed into — the surface. The look depends entirely on low-contrast, monochrome shadows.

The algorithm converts the base surface colour to HSL and shifts its lightness up by an intensity delta to make the highlight (light) colour and down by the same delta to make the shadow (dark) colour. Because both are derived from the base, the element always blends with its parent. The highlight is offset toward the simulated light source and the dark shadow away from it, with a blur about twice the offset distance.

Neumorphism has real accessibility problems. Its defining low-contrast, monochrome shadows routinely fall below WCAG’s 3:1 minimum for interactive UI components (typical edges are around 1.2–1.5:1), the soft edges give weak affordance so users cannot tell what is clickable, and a focus ring on a shadow-only element is barely visible. Use it sparingly on decorative or large controls, always test the real text and component contrast, and pair every control with a clear label, a visible focus outline and a high-contrast fallback.

The Neumorphism Generator is free with no account or limits. Your colour and settings are just numbers and strings — the two shadow colours, offsets, blur and gradient are computed locally in your browser and never sent to a server. It works offline once cached, and copying the CSS uses your device clipboard.