Neumorphism CSS Generator

How the Neumorphism works

Neumorphism CSS generator: the two shadows

The soft UI style rests on a single trick: the element and its background are the same colour, and the only thing separating them is a pair of shadows implying a light source. Get the shadow pair right and the shape appears extruded from the page; invert them and it appears pressed into it.

Two shadows, opposite offsets. box-shadow accepts a comma-separated list, and here the list is exactly two entries with mirrored offsets. The one facing the light is lighter than the surface; the one facing away is darker. Both use the same blur. Because the offsets are mirrored, changing the light direction is a matter of flipping the sign on both X and Y.

Both shadows come from the surface colour. This is the part hand-written neumorphism usually gets wrong. The light shadow is not white and the dark shadow is not black — they are the surface colour shifted up and down in lightness. The shift is asymmetric, because a highlight reads as brighter than a shadow of the same magnitude reads as darker, so the light side is pushed slightly further. Using pure white and pure black produces the chalky, washed-out look that gave the style its bad reputation.

Mid-tone surfaces are mandatory. The effect needs headroom in both directions. On a near-white background there is no room for a lighter highlight, and on near-black there is none for a darker shadow, so the element flattens into a single-sided drop shadow. Something around 15–25% away from either extreme — the classic #e0e5ec is a good starting point — leaves room for both.

Pressed is the same shadows, inset. Adding the inset keyword to both entries moves them inside the element's box, and the shape immediately reads as a recess. This is the standard way to show a toggle in its active state, or a form field, without changing colour: extruded is the resting state, pressed is the engaged one, and transitioning box-shadow between them gives you the interaction for free.

Distance and blur have a working ratio. Blur roughly twice the distance is the range that looks like soft diffuse light. Much less and the shadows read as hard-edged duplicates of the shape; much more and they dissolve into a vague glow with no implied direction. Keep the distance under about a quarter of the element's size or the shadows escape the shape they belong to.

The accessibility problem is real. Because the element and the background share a colour, the only boundary is a low-contrast shadow — which is exactly what fails WCAG's non-text contrast requirement of 3:1 for interactive controls, and what disappears entirely in high-contrast mode or bright sunlight. Neumorphism is safe for decorative panels and cards. For buttons, inputs and anything a user must find and operate, add a border, a colour change or a text label that carries the affordance on its own, and verify the result with a contrast checker rather than by eye.

One light source per screen. The illusion depends on consistency. If one card is lit from the top left and its neighbour from the bottom right, both stop reading as three-dimensional and start reading as a mistake. Pick a direction, set it as a custom property, and use it everywhere.

Related tools