Neumorphism Generator – Soft UI CSS Shadows

How to use the Neumorphism CSS Generator

Choose a Base colour; the preview background uses the same color, as your page should.

Set Size, Radius, Distance, Intensity and Blur.

Pick a Shape (Flat, Concave, Convex or Pressed) and a Light source corner.

Copy the rule with Copy or Download on the CSS tab, or use Copy CSS + HTML / Download HTML demo. Reset restores the defaults.

A neumorphism generator for soft UI

Neumorphism, or soft UI, makes an element look as if it is pressed out of (or into) the page. The element has the same color as its background and is shaped only by two shadows: a darker one on the side facing away from the light and a lighter one on the side facing it. This neumorphism generator calculates both shadow colors from your base color, so they always match.

Example output

With the default base color #e0e5ec, a 20px distance and 15% intensity:

.neumorphic {
  border-radius: 50px;
  background: #e0e5ec;
  box-shadow: 20px 20px 60px #bec3c9,
    -20px -20px 60px #ffffff;
}

The Pressed shape uses the same two shadows with the inset keyword, so the element appears sunk into the surface:

  box-shadow: inset 20px 20px 60px #bec3c9,
    inset -20px -20px 60px #ffffff;

Options explained

Intensity sets how far the shadow colors move from the base. The dark shadow multiplies each RGB channel by (1 − intensity) and the light shadow by (1 + intensity), capped at 255.
Distance is the shadow offset in px; Blur softens the edge. The defaults use a blur three times the distance, which keeps the edges soft.
Shape: Flat uses a solid background; Concave adds a dark-to-light gradient so the face looks dished; Convex reverses it so the face bulges; Pressed switches to inset shadows.
Light source flips the offsets and the gradient angle. With the light at the top right, the dark shadow moves to -20px 20px.
Size only sizes the preview; add your own width and height.

Tips and common mistakes

Match the page color. The illusion breaks if the element sits on a different background. Set the parent's background to the base color.
Avoid pure white or black. White cannot get lighter and black cannot get darker, so one shadow disappears. Even the default light shadow is already capped at #ffffff; mid-tone base colors give both shadows room.
Mind accessibility. Soft UI has very low edge contrast, so buttons can be hard to spot. Give interactive elements a clear label, an icon or a visible :focus-visible outline, and use it sparingly.
Use Pressed for states. A common pattern is Flat for a button's normal state and Pressed for :active or a toggled "on" state.

For ordinary drop shadows, the box shadow generator gives full control over each layer. For a translucent look over colorful backgrounds, try the glassmorphism generator, and check label colors with the contrast checker.

Privacy

Everything is calculated in your browser. Your colors and settings are not uploaded.

Frequently asked questions

Why does my neumorphic element look flat?

Usually the page background differs from the element color, or the intensity is too low to see. Make the parent background the same base color and raise Intensity or Distance until both shadows are visible.

Can I use neumorphism in dark mode?

Yes. Pick a dark mid-tone base such as a charcoal gray rather than pure black, so the dark shadow still has room to be darker than the surface.

What is the difference between concave and pressed?

Concave keeps the outer shadows, so the element still rises from the page, but gives its face a gradient that looks dished. Pressed moves the shadows inside with inset, so the whole element appears pushed into the surface.

Is neumorphism accessible?

Not on its own. The low contrast between element and background makes controls hard to identify, so pair it with clear text, icons and focus indicators, and avoid it for critical actions.

Neumorphism CSS Generator