Neumorphism Generator

Neumorphism, or soft UI, makes an element look as if it were pushed out of the page, or pressed into it, with nothing but shadows. The trick is that the element and the page have the same colour: a light shadow on one side and a dark shadow on the other do the work that borders and colour fills normally do. It became popular in 2020 for dashboards and mock-ups. This generator works out the two shadow colours from the surface colour you pick, so you do not have to guess them.

How the shadows work

Light seems to come from the top left, so a raised element has a light highlight on that side and a dark shade on the opposite one. CSS needs two box-shadow layers: a dark one offset to the bottom right and a light one offset to the top left, both blurred. The page derives the colours from your surface: the light one is the base mixed towards white, the dark one towards black. At intensity 40, for the default base #e0e5ec, the shadows come out as #e9ecf1 and #b3b7bd.

A worked example

Press Sample to load the default look: base #e0e5ec, distance 9 px, blur 18 px, radius 24 px, intensity 20, flat. The page writes background: #e0e5ec;, border-radius: 24px; and box-shadow: 9px 9px 18px #caced4, -9px -9px 18px #e4e9ef;. The first colour is the dark shade, the second the light highlight. Switch to Pressed and the same two shadows become inset shadows, which reads as a dent. Concave and convex keep the outer shadows and add a diagonal gradient from a color 7% lighter to one 7% darker.

The settings

Distance moves the shadows away from the element, so larger values suggest a taller object. Blur softens them; a blur of about twice the distance gives the classic look. Intensity sets how far the shadow colours move from the base, and low intensities give subtle, calm depth while high ones look heavy. Corner radius rounds the shape, and pill-shaped buttons with a radius of half the height work well. The surface colour must also be the page background, or the effect collapses.

Accessibility

Soft UI is low in contrast on purpose. The edges of a control may be only a few percent lighter or darker than the page, which makes them hard to see for people with low vision and in bright light. Do not rely on the shadows alone to show where a control is or whether it is pressed. Keep text at full contrast, give focus a visible outline, and avoid the style for primary calls to action. It suits decorative panels and settings screens better than critical buttons.

Edge cases

Large blurs with many elements slow painting, particularly on phones. Shadows are clipped by a parent with overflow: hidden, so leave room around the element. On pure white or pure black bases the mix towards white or black produces no visible difference on one side, so choose a mid-tone for the surface. If the page has a gradient behind the element, the matched-colour trick no longer holds.

Limits

The generator makes the CSS of one element and a preview on a flat background. It does not check contrast or the colour of the surrounding page. Everything is computed locally.

Related tools

• Box Shadow Generator builds general-purpose shadows.
• Glassmorphism Generator covers the translucent style.
• Color Converter helps you pick the surface color.
• Contrast Checker tests the text colours you put on the surface.