🌫️ Neumorphism Generator

Pick a base color, distance and blur to build a soft, extruded "neumorphic" box-shadow effect. Works best with light, low-contrast base colors.

Base Color

Distance (px)

Blur (px)

Style

Two shadows derived from one colour

The effect is a single base colour with a darker copy of itself offset one way and a lighter copy offset the other. Both are made by adding a flat 35 to each channel, or subtracting it, then clamping to 0-255:

light = base + 35 per channel   dark = base - 35 per channel

#e0e5ec = rgb(224, 229, 236)
  dark  -> rgb(189, 194, 201)
  light -> rgb(255, 255, 255)   (259/264/271 all clamp)

box-shadow:  8px  8px 16px rgb(189,194,201),
            -8px -8px 16px rgb(255,255,255);

Distance sets both offsets, so the light always sits up-and-left and the dark down-and-right - a fixed light source in the top-left corner. Choosing "Inset" prefixes both with inset and swaps which corner gets which, turning the raised pad into a pressed well. The border radius is hard-coded at 20px.

Choosing a base colour

Stay off the extremes. The default #E0E5EC is already light enough that the highlight clamps to pure white, so making the base lighter changes the dark side only. Anything above about #F0F0F0 loses the highlight completely.
Blur roughly twice the distance - the 8/16 default - reads as soft plastic. Equal blur and distance looks harder and more like plain embossing.
The card and the page behind it must be the same colour. The illusion is that the shape was pushed out of the surface, and a different background breaks it instantly.

This style has a real accessibility cost. The default card differs from its own darkest shadow by only 1.41:1, where WCAG 1.4.11 asks for 3:1 on the visual boundary of any control. If you use it on buttons or inputs, add a border, a label, or a focus ring that does meet 3:1.

Frequently asked questions

What colour should I use for neumorphism?

A light, desaturated grey with a slight tint - #E0E5EC is the usual starting point. It leaves room below for the dark shadow while keeping the highlight from disappearing into the page.

How do I make a pressed neumorphic button?

Use the same two shadows with the inset keyword on both, which paints them inside the element. Applying that on :active gives a convincing press, since the light and dark corners swap.

Why does neumorphism get criticised for accessibility?

Because the edges of a control are made of shadows a shade or two from the background, there is nothing that reliably marks where a button starts. Contrast ratios around 1.4:1 fall well short of the 3:1 minimum for interface components.