Neumorphism Generator for Soft UI Shadows

Choose a surface colour and the tool derives the light and dark shadow colours, previews the raised or pressed shape, and writes the background, border-radius and box-shadow rule.

Runs in your browserFree, no sign-upLast reviewed October 8, 2026

Live preview

Soft UI

CSS

.soft {
  background: #e0e5ec;
  border-radius: 26px;
  box-shadow: 12px 12px 24px #c0cad8, -12px -12px 24px #ffffff;
}

Derived colours

Light

Surface

Dark

Quick answers

What is the CSS for a neumorphism effect?: Two box shadows on an element that matches its background: background: #e0e5ec; border-radius: 26px; box-shadow: 12px 12px 24px #c0cad8, -12px -12px 24px #ffffff. The dark shadow falls bottom right and the light one top left.
Does neumorphism work on a white background?: Not fully. On #ffffff nothing can be lighter, so the highlight shadow is also white and disappears. Only the grey shadow remains and the element looks like an ordinary drop shadow. Use an off-white such as #e0e5ec or #e0e0e0 for the page and the element.
What background colour is best for neumorphism?: A light, slightly cool grey with room above and below it, around 88 to 90% lightness. #e0e5ec is the classic choice, and #e0e0e0 and #dde1e7 behave similarly. Mid-tones and saturated colours such as #3b82f6 also work. Pure white and pure black do not.
How do I make a pressed neumorphic button?: Add the inset keyword to both shadows so they fall inside the element: box-shadow: inset 12px 12px 24px #c0cad8, inset -12px -12px 24px #ffffff. Choose Pressed in the Shape menu to get this, and use it for the :active state of a flat button.
What is the difference between concave and convex?: Both keep the outer shadows and add a 145 degree gradient across the face. Convex runs light to dark and looks like a dome bulging towards you. Concave runs dark to light and looks like a shallow dish.
Why must the element be the same colour as the background?: The style imitates a shape pushed up out of the surface itself, like moulded plastic. If the element is a different colour from what is behind it, it reads as a separate card with odd shadows and the illusion is lost.

How Neumorphism Generator works

Neumorphism needs three colours that belong together: a surface, a slightly lighter highlight and a slightly darker shadow. This tool works out the last two from the first. Pick a surface such as #e0e5ec and, at the default 10% intensity, it returns a white highlight and a #c0cad8 shadow, then writes box-shadow: 12px 12px 24px #c0cad8, -12px -12px 24px #ffffff. Sliders set the corner radius, shadow distance, blur and intensity, and the Shape menu switches between flat, concave, convex and pressed. One point decides whether the effect works at all: the surface cannot be pure white, because there is no lighter colour left for the highlight.

Neumorphism colour chart: light and dark shadows for common surface colours

Derived colours the tool returns at the default 10% intensity. A highlight identical to the surface, or a shadow identical to it, means that side of the effect is missing.

Surface colour	Light shadow	Dark shadow	Result
#ffffff (white)	#ffffff	#e6e6e6	No highlight; reads as a plain drop shadow
#fafafa	#ffffff	#e0e0e0	Highlight barely visible
#f5f5f5	#ffffff	#dbdbdb	Faint highlight
#f0f0f3	#ffffff	#d5d5dd	Subtle, highlight weaker than shadow
#ecf0f3	#ffffff	#cdd7e0	Works, slightly shadow-heavy
#e0e5ec	#ffffff	#c0cad8	Balanced; the classic light soft UI
#e0e0e0	#fafafa	#c7c7c7	Balanced neutral grey
#dde1e7	#fcfcfd	#c0c8d3	Balanced
#cccccc	#e6e6e6	#b3b3b3	Balanced, lower key
#3b82f6 (blue)	#6da2f8	#0b64f4	Balanced coloured surface
#2d2d2d	#474747	#141414	Balanced dark soft UI
#1e1e2e	#32324d	#0a0a0f	Works, dark side nearly black
#121212	#2b2b2b	#000000	Shadow side clipped to black
#000000 (black)	#1a1a1a	#000000	No dark shadow; highlight only

Lowering Intensity helps near-white surfaces: at 5%, #ecf0f3 gives #fcfdfd and #dce4e9, and #e0e5ec gives #eff2f5 and #d0d7e2, so neither side is clipped.

How the two shadow colours are calculated

Light = surface with HSL lightness + intensity. Dark = surface with HSL lightness - intensity. Both are limited to the 0 to 100% range. box-shadow: [distance] [distance] [blur] dark, -[distance] -[distance] [blur] light.

Intensity is in percentage points of lightness, not a multiplier. Hue and saturation stay the same, so the shadows look like the same material in different light. #e0e5ec has a lightness of about 90%, so adding 10 reaches 100%, which is white, and subtracting 10 gives #c0cad8. Because lightness cannot go above 100% or below 0%, a surface closer to white than the intensity value loses its highlight, and one closer to black loses its shadow. A workable rule: keep the surface lightness at least as far from both ends as the intensity you choose. The intensity slider runs from 2 to 30. At 2 the default surface gives #e6eaef and #d9dfe8, which is almost invisible. At 30 it gives white and #8195b1, which is heavy and no longer soft.

Neumorphism CSS examples: card, button, dark mode and input well

The declarations the tool writes inside its .soft rule for the settings shown. Fields that are not mentioned stay at their defaults.

Default raised card

Surface colour #e0e5ec, Corner radius 26, Shadow distance 12, Shadow blur 24, Intensity 10, Shape Flat

background: #e0e5ec; border-radius: 26px; box-shadow: 12px 12px 24px #c0cad8, -12px -12px 24px #ffffff;

Pressed state of the same card

Same settings, Shape Pressed

background: #e0e5ec; border-radius: 26px; box-shadow: inset 12px 12px 24px #c0cad8, inset -12px -12px 24px #ffffff;

Swap between these two rules on :active, or for the on and off states of a toggle.

Convex button

Surface colour #e0e5ec, Shape Convex

background: linear-gradient(145deg, #ffffff, #c0cad8); border-radius: 26px; box-shadow: 12px 12px 24px #c0cad8, -12px -12px 24px #ffffff;

Concave gives the same shadows with the gradient reversed: linear-gradient(145deg, #c0cad8, #ffffff).

Small, subtle pill on an off-white page

Surface colour #f0f0f3, Corner radius 50, Shadow distance 6, Shadow blur 12, Intensity 6

background: #f0f0f3; border-radius: 50px; box-shadow: 6px 6px 12px #e0e0e6, -6px -6px 12px #ffffff;

Dark mode input well

Surface colour #2d2d2d, Corner radius 16, Shadow distance 8, Shadow blur 16, Intensity 8, Shape Pressed

background: #2d2d2d; border-radius: 16px; box-shadow: inset 8px 8px 16px #1a1a1a, inset -8px -8px 16px #424242;

White surface pushed to the maximum

Surface colour #ffffff, Intensity 30

background: #ffffff; border-radius: 26px; box-shadow: 12px 12px 24px #b3b3b3, -12px -12px 24px #ffffff;

Even at full intensity the second shadow is white on white. Raising intensity cannot rescue a pure white surface.

Fixing neumorphism on a white or very light background

If your design has to sit on a white page, there are three workable options.

Darken the page slightly. Moving from #ffffff to #e0e5ec or #e0e0e0 is a small visual change and gives the highlight somewhere to go. Most soft UI that looks white is really a pale grey or pale blue-grey.

Use a tinted panel. Keep the page white and place the neumorphic controls inside a section with an off-white background. Each element only has to match its immediate parent, not the whole page.

Accept a one-sided effect. On pure white you can keep the dark shadow alone and drop the second one. That is no longer true neumorphism, but a soft grey shadow on white is a clean, common look, and it is what the tool's white output amounts to.

The mirror-image problem applies in dark mode. On #000000 the dark shadow vanishes and only the highlight shows. A dark grey such as #2d2d2d leaves room on both sides.

Accessibility: the shadows cannot be the only cue

The edge of a neumorphic control is drawn only by its shadows, and those are deliberately close to the surface colour. For the default output, the dark shadow #c0cad8 against the #e0e5ec surface has a contrast ratio of about 1.3 to 1, and the white highlight about 1.27 to 1. WCAG 2.1 success criterion 1.4.11 asks for at least 3 to 1 for the visual information needed to identify a user interface component and its states.

In practice that means people with low vision, or anyone on a dim screen or in bright sunlight, may not see where a button begins. Keep the style, but add cues that do meet the threshold: a text label or icon with strong contrast against the surface, a visible focus outline, and a state change that involves more than the shadow flipping from raised to pressed, such as a colour or icon change.

What the generator fixes and what you edit by hand

The light source is always top left: the dark shadow is offset down and right, the light shadow up and left. For another direction, change the signs of the offsets in the copied rule.
Both shadows share one distance and one blur. Unequal highlight and shadow sizes need manual editing.
There is no size control. The rule contains no width or height, so it applies to an element of any size.
The concave and convex gradient is fixed at 145 degrees.
The rule uses a placeholder .soft selector. Rename it to match your own class.

How to use it

1
Pick a Surface colour. Use the same colour for the page or panel behind the element.
2
Set Corner radius from 0 to 80 pixels.
3
Adjust Shadow distance and Shadow blur. A blur of about twice the distance, as in the default 12 and 24, gives the usual soft look.
4
Raise or lower Intensity to control how far the light and dark shades sit from the surface.
5
Choose a Shape: Flat, Concave, Convex or Pressed.
6
Check the Light, Surface and Dark swatches under Derived colours, then copy or download the CSS.

Questions people ask

What is neumorphism?

Neumorphism, also called soft UI, is an interface style where buttons and cards look like they are moulded from the background itself. Each element has the same colour as the surface behind it and is shaped by one light shadow and one dark shadow on opposite sides.

What ratio of distance to blur looks best?

A blur about twice the distance is the usual starting point, such as 6 and 12 for small buttons or 12 and 24 for cards. A blur equal to the distance looks harder and more embossed. A much larger blur looks hazy and loses the shape.

Can I use neumorphism with a coloured background?

Yes. The shadows are made by shifting lightness only, so they keep the hue. A #3b82f6 blue surface gives a #6da2f8 highlight and a #0b64f4 shadow. Very saturated or very dark colours leave less room, so check the swatches.

How is neumorphism different from glassmorphism?

Neumorphism is opaque: a solid element the same colour as its background, shaped by two shadows. Glassmorphism is translucent: a semi-transparent panel that blurs whatever is behind it using backdrop-filter. The Glassmorphism Generator on this site builds that effect.

Why does my neumorphic element look flat in the browser?

Check three things. The parent background must be exactly the surface colour. The element needs clear space around it of roughly the distance plus the blur, or neighbouring elements cover the shadows. And overflow: hidden on a parent clips any shadow that reaches past the parent's edge.

Is this the same as claymorphism?

No. Claymorphism uses a coloured element that contrasts with its background, with large rounded corners, inner shadows and a drop shadow, to look like soft clay. The pressed shape here uses inset shadows too, but the tool does not produce the claymorphism look.

How do I animate between raised and pressed?

Put the flat rule on the element and the pressed rule on :active, then add transition: box-shadow 0.15s ease. Browsers can only fade smoothly between shadows of the same kind, so going from outer to inset snaps instead of fading. Keeping the transition very short hides the jump.