BYTETOOLS

CSS Neumorphism Generator

Build soft UI neumorphism CSS from one surface colour: two mirrored box-shadow layers with raised, pressed, concave and convex modes plus a contrast warning.

Neumorphic

Soft UI settings

Surface
145
200
50
20
40
9

Derived colours

#fcfdfd
Highlight (+9% L)
#e0e5ec
Surface
#c4cddb
Shadow (−9% L)
Shadow offset-16px, 11px
Surface vs shadow contrast1.27:1
Best text contrast on this surface16.59:1

CSS

.neumorphic {
  width: 200px;
  height: 200px;
  border-radius: 50px;
  background: #e0e5ec;
  box-shadow: -16px 11px 40px #c4cddb, 16px -11px 40px #fcfdfd;
}

Soft UI is a low-contrast style by design, and that is an accessibility problem. The edge of this component differs from its background by only 1.27:1, well under the 3:1 that WCAG 2.1 asks of a non-text UI boundary, so people with low vision may not see the control at all. Use it for decoration, keep real buttons and inputs conventionally outlined, and never rely on the shadow alone to signal that something is interactive.

What is the CSS Neumorphism Generator?

Neumorphism, or soft UI, makes an element look extruded from its background rather than floating above it.

  • Highlight and shadow derived automatically from one colour
  • Raised, pressed, concave and convex modes
  • Light angle control that moves both shadows together
  • Live preview on a matching background
  • Reports surface-to-shadow and text contrast ratios
  • Single background declaration, so nothing gets reset when pasted

How to use the CSS Neumorphism Generator

  1. 1

    Set the surface colour with the swatch or by typing a hex value.

  2. 2

    Choose a shape: flat, concave, convex, or pressed for an inset look.

  3. 3

    Drag the light angle, distance, blur and intensity sliders until the preview looks right.

  4. 4

    Check the derived highlight and shadow swatches and the contrast read-outs.

  5. 5

    Copy the CSS, and remember to give the parent element the same surface colour.

About the CSS Neumorphism Generator

Neumorphism, or soft UI, makes an element look extruded from its background rather than floating above it. The trick is that the element and its parent share a colour, and two mirrored shadows — one lighter, one darker — do all the work. This generator derives both shadow colours from a single surface colour so the effect stays consistent.

Pick your surface, set a light angle, and the tool shifts the base colour up and down in HSL lightness to create the highlight and the shadow, then offsets them in opposite directions along that angle. Raised, pressed, concave and convex modes cover the four shapes the style is built from, and every value is a slider so you can feel your way to the right softness.

It also tells you the truth about the accessibility cost, because soft UI is deliberately low contrast. Everything is computed in your browser with no uploads and no account.

Frequently asked questions

What is neumorphism in UI design?

It is a style where controls appear to be pushed out of or pressed into the background rather than layered on top of it. It works by giving the element the same colour as its parent and adding two opposite shadows, one lighter and one darker, to suggest a single light source.

Why does my neumorphism effect not show up?

Almost always because the parent element is a different colour. The whole illusion depends on the element and its background being identical, so the only thing your eye sees is the pair of shadows. Copy the surface colour onto the container as well and it will appear.

Is neumorphism bad for accessibility?

It has a real problem. The style is defined by very low contrast between a control and its background, and WCAG 2.1 asks for at least 3:1 at the boundary of a non-text UI component. This tool shows you the actual ratio so you can decide, but treat soft UI as decoration rather than as the only cue that something is a button.

What is the difference between concave and convex?

Both add a gradient to the surface as well as the shadows. Convex runs from light to dark in the direction of the light source so the face looks like it bulges towards you; concave reverses it so the face looks dished inward. Flat leaves the surface a solid colour.

What colours work best for soft UI?

Light, slightly desaturated greys and off-whites around 88 to 94 percent lightness, because they leave room to shift in both directions. Very dark or fully saturated colours give you almost no headroom for the highlight, so the effect flattens out.

Related tools