Neumorphism (Soft UI) Generator
Paired light and dark shadows from one base color, with an honest contrast check.
Preview
A real button with these styles: press it to see the pressed state, and Tab to it to see the focus outline.
Settings
Accessibility check
Code
About the Neumorphism (Soft UI) Generator
Soft UI, or neumorphism, makes an element look pushed out of — or into — a surface of the same color, using two shadows: a dark one on the side away from the light and a light one on the side facing it. Pick a base color and the tool works out both shadow colors by shifting its lightness (keeping the hue, so the shadows look natural on tinted bases), then lets you choose the shape — flat, raised (with a small inner bevel), pressed (inset), concave or convex (a gradient surface) — the size, corner radius, shadow distance, blur, intensity and the direction the light comes from.
Soft UI has a well-known accessibility problem: its edges are faint. The tool measures it. From the same blur maths browsers use for box-shadow, it estimates the colors on both sides of each edge and reports the contrast against the 3:1 that WCAG 2.2 asks for when the shape is what shows a control, plus the contrast of the label. It suggests fixes — a 3:1 border, a stronger intensity, a text label — and writes a focus outline that is visible on your base color. Copy the CSS (with a pressed state for toggles) or Tailwind classes.
How to use it
- Choose a base color: type any CSS color, use the picker, or start from a suggestion. The page behind the element must use the same color.
- Pick the shape and where the light comes from; adjust size, corner radius, distance, blur and intensity. Distance and blur follow the size until you move them yourself.
- Press Toggle me to see the pressed state on a real button, and Tab to it to see the focus outline.
- Read the Accessibility check: if the edge stays below 3:1, add a label, tick Add a border with 3:1 contrast, or raise the intensity.
- Copy or download the CSS, or switch to Tailwind for utility classes.
Examples
Base #e0e5ec · flat · light from the top left · distance 20px · blur 40px · intensity 10%
.soft {
border-radius: 40px;
background: #e0e5ec;
box-shadow:
20px 20px 40px #c0c5cb,
-20px -20px 40px #ffffff;
color: #464a50;
}The edge contrast is 1.28:1. It would take an intensity of 38% for the edge to reach 3:1 on its own; the automatic label color #464a50 reaches 7.04:1.
Same settings · shape: pressed
box-shadow: inset 20px 20px 40px #c0c5cb, inset -20px -20px 40px #ffffff;
Base #e0e5ec · Add a border with 3:1 contrast
border: 1px solid #7f838a;
The shade of the base closest to it that still reaches 3:1 against it; the focus outline uses the same color.
Common uses
- Designing soft UI buttons, cards, toggles and sliders for a dashboard, smart-home or music app.
- Checking whether an existing soft UI design meets WCAG non-text contrast, and finding the smallest fix.
- Getting matching raised and pressed states for toggle buttons.
- Learning how the light direction, blur and intensity shape the effect.
How the shadows are made
Each surface uses two box-shadow layers with the same blur: the dark one offset away from the light, the light one offset towards it, and an element background equal to the page (CSS box-shadow). The shadow colors are the base with its OKLab lightness lowered and raised by the intensity, so a mint base gets mint-tinted shadows rather than grey ones; on light bases the light shadow often reaches pure white. Pressed uses the same pair as inset shadows. Concave and convex add a linear-gradient running from the lit corner to the shaded one — darker first for a dish, lighter first for a dome. Raised adds a thin inner bevel, light on the lit side and dark on the other.
How the edge contrast is estimated
A blurred box-shadow fades with a Gaussian curve whose standard deviation is half the blur radius, so right at the element’s edge a shadow offset by d px with blur b shows Φ(d ÷ (b/2)) of its color, where Φ is the normal distribution — 84% for the default 20px offset and 40px blur. The tool paints the shadows of each side that way, outer ones on the page and inset ones on the surface, and compares the colors just outside and just inside the middle of each edge with the WCAG contrast formula. The strongest edge is reported. It is an estimate for straight edges (corners and very large radii differ a little), and it ignores anti-aliasing, as WCAG does.
What WCAG asks of soft UI
WCAG 2.2 success criterion 1.4.11 asks for 3:1 against adjacent colors for the visual information needed to identify a control and its state (Understanding 1.4.11). A boundary is not required when a text label or a contrasting icon already shows the control, so a soft button with a clear label can pass while its edge is faint; a soft toggle, slider or input without a label usually cannot. Text must reach 4.5:1, or 3:1 when it is large (SC 1.4.3), and the focus indicator needs 3:1 against the background. The pressed and raised states of a toggle differ only in shadow direction, which is hard to see for many people — add a label, icon or color change for the state.
Limitations
- The element and the page behind it must have the same background color; on images or gradients the effect does not work.
- On very dark or very light bases one of the two shadows has little room to change (it reaches black or white), so the effect is weaker there.
- The contrast estimate assumes the edges are straight in the middle; with a radius of half the size (a circle) the edge is curved and the real contrast can be slightly different.
- Mid-grey bases cannot carry text with 7:1 contrast in any color; the automatic label then uses 4.5:1 or, if even that is impossible, the better of black and white — and the check says so.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
Is neumorphism accessible?
Often not on its own: the edges of a classic soft button reach about 1.3:1, far below the 3:1 that WCAG 1.4.11 asks for when the shape is the only cue. It can pass when every control has a clear text label or icon (then no visible edge is required), a visible focus outline, and states that do not rely on shadows alone. The check here tells you which parts pass.
Why must the background match the element?
The effect pretends the element is made of the same material as the page. A different background shows the element’s real edge, and the light and dark shadows then look like an ordinary drop shadow.
What is the difference between concave and convex?
Both keep the outer shadows. Convex adds a gradient that is lighter on the lit side, like a dome; concave is darker on the lit side, like a dish. Pressed instead turns the shadows inward, as if the element were pushed into the surface.
How do I use it in Tailwind CSS?
Switch the code to Tailwind: it writes arbitrary values such as shadow-[20px_20px_40px_#c0c5cb,-20px_-20px_40px_#ffffff] and bg-[#e0e5ec], an aria-pressed: variant for the pressed state and a focus-visible: outline. They work in Tailwind v3 and v4.
Is anything uploaded?
No. Colors, shadows and contrast are calculated in your browser, and the page works offline once loaded.