Neumorphism generator
Design soft UI elements with the neumorphic box-shadow technique. Drag the light anywhere on the preview, resize and round the shape by hand, generate the hover and active states — copy it as CSS, custom properties or Tailwind.
Drag the surface to move the light (Shift snaps to 15°, Alt is fine) · drag the corner square to resize · drag the inner dot to round it · scroll over the shape for depth · double-click to press it in.
How the two shadows are calculated
Nothing here is an image. The generator derives two colours from the single surface colour you pick and writes them into one box-shadow declaration. The dark half is a plain multiply — every RGB channel is scaled by 1 − intensity/100. The light half interpolates towards white instead: each channel moves intensity/100 of whatever distance is left to 255.
Those two operations are not symmetric, and on a pale surface that asymmetry is the look. At the default #e0e5ec with intensity at 15%, the highlight resolves to rgb(229,233,239) — roughly five levels brighter than the surface — while the shadow drops to rgb(190,195,201), thirty-four levels darker. Raising intensity mostly deepens the shadow, because the highlight has almost no headroom left. Switch to the dark preset #2d3038 and the ratio inverts: the highlight gains far more than the shadow loses, which is why dark soft-UI reads as glow rather than depth. Both derived values are shown as chips above the preview, next to the live contrast figure, so you can see exactly what is being written.
Light direction is a real angle, not a set of eight presets. The light's position is a unit vector at the angle you set — 0° is due right, 90° is straight up — and the dark shadow is cast the opposite way at exactly the Distance you asked for, with the highlight mirroring it. Because the vector is normalised, turning the light does not change how deep the element sits; only Distance does that. The default 135° (light from the top left, shadow to the bottom right) is the convention almost every soft-UI kit follows.
Concave and convex add a linear-gradient at half the intensity on top of that. Its angle follows the light too, so the lit face of a convex bump always points at the light source and a concave dish is always lit on its far wall.
Where the technique breaks down
Contrast is the real problem, not a stylistic quibble. WCAG 1.4.11 asks for 3:1 between an interactive control's visual boundary and its background. A neumorphic control has no boundary — element and page share one colour by definition. At the default settings, the darker shadow against the surface computes to about 1.4:1, and the live figure above the preview will tell you so. That is not a ratio you can tune your way out of: winding intensity all the way to 40% on the default light surface still only reaches 2.76:1, and the only settings that do clear 3:1 are dark surfaces at an intensity nobody would call subtle. It is what the style is. Use it for decoration and pair it with something that carries the affordance on its own: a text label, an icon at proper contrast, a visible focus ring.
The copied rule is a static appearance by default. Tick Hover & active states and it also emits a :hover rule at 1.3× the depth, an :active rule that flips to inset so the control presses in under the pointer, and the transition that joins them. That still leaves :focus-visible and the disabled state to you — and :focus-visible is the one that matters most here, because it is the only part of a neumorphic control that can carry real contrast.
Geometry sets other hard edges, and the generator now says so out loud rather than letting you walk into them. On Pressed, once distance passes half the shortest side the two inset shadows meet in the middle and the face turns into a flat darker blob instead of a dent; on the outer styles the same combination throws the shadow entirely clear of the element; and a blur below the distance stops reading as a soft extrusion at all. Each of those three states raises a warning under the preview the moment you reach it. And because every element carries two blurred shadows, a fifty-row neumorphic list is a hundred blur passes for the browser to paint — fine as a static card, expensive as a scrolling list.
Finally, the effect only holds on a solid background that matches the element's own fill. Over a photograph, a gradient, or a page that switches between light and dark themes, both derived colours are simply wrong and the element reads as a smudge. That is the case where glassmorphism is the right tool instead — it is designed to sit on busy backdrops.
Picking values that hold up
Distance and blur at roughly 1:2 is the safe zone, and Link blur holds that ratio for you while you work — drag Distance, or scroll over the shape, and Blur follows at twice the value. Touch the Blur slider and the link releases, because reaching for it means you want it yourself. Tightening the ratio — high distance, low blur — gives you a hard drop shadow that stops reading as a soft extrusion; widening it past about 1:5 dissolves the edge entirely.
Intensity at 15% is already near the top of what stays subtle on a light surface. If a design needs more separation than that, the honest fix is a different surface colour rather than a heavier shadow. The eight suggested swatches sit in the narrow band the technique actually works in — five near-white tints at low saturation, three dark greys — and Randomize stays inside the same band: light surfaces at HSL lightness 84–92%, dark ones only 30% of the time, with distance capped at a quarter of the shortest side and blur held to 1.5–2.5× distance. It will not hand you a combination that trips one of the geometry warnings. Saturated or mid-tone surfaces produce two derived colours that both look muddy.
Two practical notes on the output. The Radius slider and the round corner handle are both inactive unless Shape is set to Rounded — Pill, Circle and Square hard-code 9999px, 50% and 4px respectively, so there is nothing left to control. And in the plain CSS output the shadow colours are baked in as literal rgb() values; switch the output to Variables and you get the same rule expressed through --nm-surface, --nm-shadow, --nm-highlight, --nm-x, --nm-y and --nm-blur, which is what you want if the surface colour is ever going to change. Before shipping a neumorphic component, run its label colour through the contrast checker; more soft-UI designs fail on text than on the shadows.
What each control writes into the CSS
| Control | Range | Effect on the output rule |
|---|---|---|
| Style | Flat · Pressed · Concave · Convex | Pressed prefixes both shadows with inset. Concave and Convex leave the shadows untouched and add a linear-gradient at half the intensity value, angled to face the light, running dark→light and light→dark respectively. |
| Shape | Rounded · Pill · Circle · Square | Sets border-radius to the slider value, 9999px, 50% or 4px. Pill also halves the height; Circle keeps it square. |
| Size | 40–320 px | width, and height unless the shape is Pill. Also driven by the square handle on the element's bottom-right corner. |
| Radius | 0–80 px | border-radius. Active only when Shape is Rounded; also driven by the round handle inside the top-left corner. |
| Distance | 0–60 px | How far both shadows are pushed along the light axis. Also driven by scrolling over the shape. |
| Blur | 0–120 px | The blur radius shared by both shadows. Follows Distance at 2× while Link blur is on. |
| Intensity | 2–40 % | How far the two derived colours travel from the surface colour. |
| Light | 0–359° | The angle the light comes from, as a unit vector. Drag the dial, drag anywhere on the preview, or focus the dial and use the arrow keys. |
| Hover & active states | on / off | Appends :hover and :active rules plus a transition. |
| Output | CSS · Variables · Tailwind | The same rule as a plain declaration, as custom properties, or as Tailwind arbitrary-value classes. |
For shadows that are not neumorphic — ordinary elevation, multiple layered shadows, coloured glows — the CSS shadow generator covers a wider range, and the rest of the set is grouped on the design tools page.
Neumorphism FAQ
What is neumorphism?
Neumorphism (or "new skeuomorphism") is a design style that uses subtle dual box-shadows — one light, one dark — to make UI elements appear extruded from or pressed into the background. It requires the element and its background to share the same color.
Does neumorphism have accessibility problems?
Yes, and they are structural rather than fixable by tuning. A neumorphic control has no boundary against its background, so at the default settings the shadow-to-surface contrast is about 1.4:1 — well under the 3:1 that WCAG 1.4.11 asks of interactive controls. The generator shows that figure live above the preview and turns it green only once it clears 3:1. On a light surface it never gets there — even at the maximum 40% intensity, #e0e5ec tops out at 2.76:1. A dark surface can reach 3.5:1, but only at an intensity far past anything that still looks subtle. Treat the effect as decoration and let a label, an icon or a visible focus ring carry the affordance.
How do I move the light source?
Drag anywhere on the preview surface and the light follows your pointer; hold Shift to snap to 15° steps or Alt for fine control. The dial in the Light section does the same thing and takes arrow keys when focused, so the angle is reachable without a pointer. It is a continuous angle rather than eight fixed directions, and because it is stored as a unit vector, turning the light never changes how deep the element sits.
What else can I drag on the preview?
The square handle on the bottom-right corner resizes the element, and the round handle just inside the top-left corner sets the corner radius — both appear as soon as the pointer enters the preview. Scrolling over the shape changes the depth, and double-clicking it toggles between Flat and Pressed. Every one of those also has a slider or button, and Ctrl/⌘+Z undoes any of them.
When should I use neumorphism vs glassmorphism?
Neumorphism works best on light, monochromatic backgrounds with minimal UI. Glassmorphism works on rich, colourful or photographic backgrounds. For dark UIs, glassmorphism generally performs better visually.
What is the difference between concave and convex?
Only the gradient direction. Both produce identical box-shadows; convex fills the element with a gradient running from the darkened colour to the lightened one so the lit face points at the light source, and concave runs the same gradient the other way, as a dish whose far wall catches the light. The gradient angle follows the light direction and uses half the intensity value, so it stays weaker than the shadows themselves.
Why is the Radius slider greyed out?
Because the shape you picked already fixes the corner radius. Pill, Circle and Square write 9999px, 50% and 4px into the rule, leaving nothing for the slider to change — the round corner handle on the preview disappears for the same reason. Switch Shape back to Rounded and both come back.
Can it generate hover and pressed states?
Yes. Tick Hover & active states under the preview and the output gains a :hover rule at 1.3× the depth, an :active rule that flips the shadows to inset so the control presses in, and the transition that ties them together. If the base style is already Pressed the relationship inverts: hover eases the dent, active deepens it.
Can I export CSS variables or Tailwind classes?
Yes — the three tabs above the code switch between them. CSS is a plain rule with literal rgb() shadow colours. Variables lifts the surface, the two derived colours, the offsets and the blur into --nm-* custom properties, which is what you want if the surface colour will ever change. Tailwind emits arbitrary-value utilities such as shadow-[7px_7px_20px_rgb(190,195,201),-7px_-7px_20px_rgb(229,233,239)].
Why does my element vanish on a different background?
The two shadow colours are derived from the surface colour you chose, so the effect only reads correctly when the element and the page behind it share that colour — that is why the copied CSS opens with a comment saying so. Drop the same component onto a photo, a gradient or the opposite theme and both shadows are wrong. Regenerate for the new surface colour, or use a style that does not depend on the backdrop.