Neumorphism Generator
Design soft UI shadows with real color math — light and dark shades computed from your base color's actual lightness, all four shapes, and matching button and icon previews so the effect reads as one system. Runs entirely in your browser.
Getting Soft Shadows That Actually Read as a Shape
- Start from a light, low-saturation base color. Neumorphism's entire illusion depends on the element and its background being nearly the same color — a vivid or dark base leaves too little lightness range to carve a believable light shade and dark shade out of.
- Keep intensity moderate. A subtle 15-20% lightness shift reads as soft and premium; pushing it much higher starts to look like an ordinary hard-edged drop shadow, which defeats the entire point of the effect.
- Match distance and blur to element size. A value that looks right on a large card will usually look exaggerated on a small icon button — scale both down for smaller components rather than reusing one number everywhere.
- Don't rely on neumorphism alone to signal "clickable." Because the effect avoids strong contrast and borders by design, pairing it with a clear icon, label or hover state matters more here than on higher-contrast UI styles.
Features
Two Shadows, Not One, Is the Entire Trick
An ordinary drop shadow uses one dark shadow offset in one direction, which reads as an object floating above a surface with light coming from somewhere unseen. Neumorphism instead pairs that dark shadow with a second, lighter one offset in the exact opposite direction — dark toward the bottom-right, light toward the top-left, by convention — which simulates a single consistent light source hitting a shape that's embossed into, rather than floating above, its own background. Removing either shadow breaks the illusion completely: only the dark one looks like a normal, slightly odd drop shadow, and only the light one looks like an accidental glow with no clear cause.
Shadow Direction Isn't Cosmetic — It Decides Raised or Pressed
The direction each shadow points matters just as much as its presence. Swapping which corner gets the light shadow and which gets the dark one — light toward the bottom-right instead of the top-left, for instance — doesn't just mirror the effect, it changes what the shape appears to be doing: the same two shadows reversed can make a raised card look pressed in, or vice versa, without touching color or blur at all. That directional consistency is also why mixing shadow directions across different elements on the same screen tends to look unintentional — a coherent neumorphic interface keeps every element's implied light source pointing the same way.
Why the Shadow Colors Have to Come From the Base Color
A dark shadow and light shadow picked independently of the element's own color almost always look wrong in a way that's hard to name precisely — slightly muddy, slightly artificial, like two unrelated effects layered on top of each other rather than one coherent material. The fix is mathematical, not aesthetic: both shadow shades need to be the same base color with only its lightness shifted up or down, since that's what makes them read as the same surface catching light differently rather than two arbitrary colors. This generator computes both shades directly from the chosen base color's HSL lightness rather than offering two separate color pickers, specifically to keep that relationship intact no matter what base color is chosen.
Intensity is really just a name for how far that lightness shift goes in each direction, and it has a natural ceiling worth understanding rather than pushing blindly. A base color that's already fairly light has much less headroom before its light shade clips to pure white than a mid-tone base does, and the same is true in reverse for a fairly dark base running out of room before its dark shade clips to pure black. When a shape suddenly looks flat or loses its shading entirely at a high intensity value, that clipping is almost always the cause — the fix is usually choosing a base color with more lightness range to work with, not raising intensity further.
Four Shapes, Two Underlying Mechanisms
Flat and Pressed share a solid background and differ only in whether the shadow pair sits outside the element (raised) or inside it (recessed) — the simplest and most common neumorphism variant, and the right default for most cards and buttons. Concave and Convex layer a second illusion on top of that same raised shadow: a subtle diagonal gradient built from the identical light and dark shades, running dark-to-light or light-to-dark across the surface. That gradient is what suggests the surface itself curves slightly inward or outward, rather than staying perfectly flat — a more advanced, more decorative variant that reads best on larger, simpler shapes where the gradient has room to be visible, rather than on small buttons where it would barely register.
A Card Alone Doesn't Prove the System Works
Neumorphism is meant to feel like a consistent material applied across an entire interface, not a one-off effect on a single element — which is exactly why judging it from one isolated card preview can be misleading. The same shadow math applied to a much smaller button or a circular icon needs proportionally smaller distance and blur values to look right, not the same numbers copied at a different size; a 40px blur that looks soft and premium on a 200px card would visually swallow a 44px icon entirely. Previewing the button and icon variants alongside the main card, both scaled from the same base settings automatically, is what actually confirms a given set of values works as a system rather than as one lucky-looking card.
This is also where a design actually reveals whether its base color choice has enough range — a base that looks fine on a large card can produce a barely-there icon button once the same proportionally-smaller distance and blur are applied, since there's less surface area for a subtle shadow to register against in the first place. Catching that at the preview stage, with all three sizes visible together, is considerably cheaper than discovering it after a whole component library has already been built around one base color.
From a Tuned Effect to a Real Interface
A typical path: start from Classic Soft UI or whichever preset is closest to the intended mood, adjust the base color to match an existing brand palette if one exists, and check the result against both the button and icon previews before finalizing distance and blur. Given neumorphism's well-known contrast and accessibility limitations, it's worth deciding deliberately where it's used — a secondary control panel or a settings toggle tends to be a safer fit than a primary call-to-action a user genuinely needs to notice. Pairing a neumorphic panel with more clearly defined corners via the border radius generator, or contrasting it against a bolder box-shadow-based element elsewhere on the same page, is a common way to keep an interface from feeling uniformly flat when neumorphism is only one part of it.