Neumorphism Generator

What neumorphism actually is

Neumorphism — "new skeuomorphism", often called soft UI — makes a control look moulded out of the same sheet of soft material as the page behind it, either gently raised or pressed in. Unlike a normal drop shadow, which lifts an element off a different-coloured background with one dark shadow, neumorphism uses a pair of shadows in the surface's own colour: a lighter one where the light hits and a darker one on the shaded side. This tool derives that pair from a single colour and writes the exact CSS.

One colour drives everything

Pick a base surface colour and the generator computes two more from it: the highlight is the base mixed toward white, and the shadow is the base mixed toward black, each by the intensity amount. At the default 15% intensity a base of #e0e0e0 becomes a #e5e5e5 highlight and a #bebebe shadow. Deriving both from one colour is the whole trick — the shadows read as light and shade on a single material instead of two unrelated colours. Both derived hex values are shown next to the preview so you can reuse them for a matching border or icon.

Worked example: a raised soft button

The default settings — base #e0e0e0, 20px distance, 60px blur, light from the top-left — produce the classic raised pill:

.soft-button {
  background: #e0e0e0;
  border-radius: 50px;
  box-shadow: 20px 20px 60px #bebebe,
              -20px -20px 60px #e5e5e5;
}

The first shadow is the dark one, offset toward the bottom-right (away from the light); the second is the light highlight, offset the opposite way. Move the light-source selector to another corner and both offsets flip sign together, so the lit and shaded sides swap. Switch the shape to Pressed and the very same pair gains the inset keyword, turning the raised button into one that looks punched into the surface.

Flat, concave and convex

The three raised modes differ only in the element's face. Flat is a solid colour. Convex adds a linear-gradient that runs light-to-dark so the face appears to bulge toward you; concave reverses it to dark-to-light so the face looks scooped inward. They share the same outer shadow pair — the gradient alone sells the curve. Pressed is the odd one out: both shadows become inset.

Where neumorphism works — and where it doesn't

It shines on decorative surfaces and clearly-labelled controls: toggles, sliders, cards, media players, calculator keypads. It struggles the moment you need obvious affordances, because the effect deliberately removes colour contrast between a control and its background. That is a genuine accessibility problem — low-contrast controls are hard to see and can fail WCAG's non-text contrast requirement. Don't lean on the soft edge alone: keep a text label, add a focus ring, or give interactive elements a small accent border. The effect also needs room — the shadow blur bleeds well past the element, so tight layouts clip it.

Honest limits

This generator emits background, border-radius and the dual box-shadow; you still supply the element's size, padding and any text. The preview forces its background to match your surface colour, but in your project you must give the real parent the same colour or the illusion breaks. Very light or very dark base colours have little room to lighten or darken, so the effect flattens at the extremes — a mid-tone surface gives the most convincing result. For raw multi-layer shadows on a contrasting background, use the Box-Shadow Generator; to convert or fine-tune the derived hex values, the Color Converter and Border-Radius Generator pair well with this tool.