About the Neumorphism Generator
This neumorphism generator derives a complete soft UI treatment from a single surface colour. It lightens and darkens that colour by the intensity you set, places one shadow at the bottom-right and its lighter twin at the top-left, and produces the extruded look that defines the style. Shadow distance runs from 2 to 40 pixels and blur from 2 to 80, and a shape selector switches between flat, concave, convex and pressed — the last moving both shadows inside the element with the inset keyword to make the surface look pushed in.
How to use the Neumorphism Generator
- 1
Pick a Surface colour; this must be the same colour as the page behind the element for the effect to work.
- 2
Set Shadow distance and Shadow blur — the blur is usually around twice the distance.
- 3
Adjust Intensity to control how far the derived light and dark shades diverge from the surface.
- 4
Choose a Shape — Flat, Concave, Convex or Pressed — then copy the CSS and check the derived colour swatches.
What people use it for
Toggle and switch controls
The flat state for off and the pressed state for on gives a physical read that needs no colour change, though a colour or icon cue should still be added for accessibility.
Player and appliance interfaces
Soft UI evokes moulded plastic hardware, which is why the style suits music players, thermostats and smart home dashboards more than it suits dense productivity tools.
Card surfaces in a monochrome layout
When a design uses one background colour throughout, neumorphic shadows separate panels without introducing borders or a second surface colour.
Concave input wells
The pressed shape applied to a text field makes it read as a recess that accepts content, distinguishing it from the raised buttons beside it.
The two-shadow lighting model
Neumorphism simulates a single light source, conventionally at the top-left, falling on a surface that has been extruded slightly from a sheet of the same material. Two shadows produce this. The first is offset down and to the right in a colour darker than the surface, standing in for the shadow the raised edge casts. The second is offset up and to the left in a lighter colour, standing in for the highlight where light strikes the raised edge directly. This generator derives both by shifting the surface colour's HSL lightness up and down by the intensity percentage, which keeps the hue consistent so the whole component reads as one material. The concave and convex shapes add a linear gradient across the face at 145 degrees: light-to-dark makes the surface appear to bulge towards the viewer, dark-to-light makes it appear to dish inwards. Pressed moves both shadows inside using the inset keyword, so the highlight and shadow swap sides and the element reads as depressed.
Why neumorphism struggles with accessibility
The style's defining constraint is also its defining problem: the element and its background must share one colour, so the boundary between a control and the page is defined entirely by low-contrast shadows. WCAG 2.1 success criterion 1.4.11 requires a contrast ratio of at least 3:1 for the visual information needed to identify a user interface component and its state. A typical neumorphic button, where the shadows differ from the surface by ten percent lightness, falls far short — often nearer 1.2:1. Users with low vision, anyone on a dim screen or in bright sunlight, and anyone with a poorly calibrated display may not see the control at all. None of this makes the style unusable, but it does mean the shadows cannot be the only signal. Add a visible text label, an icon that meets 3:1 against the surface, a clear focus-visible ring, and a state change that does not rely purely on which direction the shadow points.
Tips
- Set the parent background to the exact same colour as the element, or the illusion collapses immediately.
- Mid-tone surfaces work best — near-white and near-black leave no room for the light and dark shades to separate.
- Pair every neumorphic control with a focus-visible outline, since the shadows alone will not meet the 3:1 requirement.