Neumorphism Generator

Neumorphism (also called soft UI or neo-skeuomorphism) is a design style that creates soft, extruded shapes using subtle box-shadows on a matching background. It uses one lighter and one darker shadow to simulate elements pushing out of or sinking into the surface.

It uses two box-shadows on an element whose background matches the page background. The lighter shadow is offset in one direction and the darker shadow in the opposite. The shadow colours are calculated by adjusting the HSL lightness of the background colour up and down.

Neumorphism works best with soft, desaturated colours like light greys (#e0e5ec), off-whites, and muted pastels. Highly saturated or very dark colours make it difficult to see the shadow contrast that creates the effect.

Neumorphism can pose accessibility challenges because it relies on subtle shadow differences. Ensure interactive elements have additional visual indicators beyond the neumorphic effect, such as text labels, icons, or colour changes on hover and focus.

Flat uses a solid background with outer shadows for a simple raised look. Convex adds a light-to-dark gradient making the top appear closer. Concave reverses the gradient, making the centre look recessed. Pressed uses inset shadows to create a sunken, button-pressed effect.

Yes, but it requires careful colour selection. Use dark grey backgrounds (like #2d2d2d) rather than pure black, so the lighter shadow remains visible. The intensity may need to be higher than in light mode to achieve a similar visual effect.