Generate soft UI neumorphism CSS effects online free with a live preview. Pick a background color and adjust blur, distance, and radius to create Flat, Concave, Convex, or Pressed button and card styles.
If this tool isn’t working as expected, please take a screenshot of the error and report the problem here so we can investigate and improve it.
Neumorphism's distinctive raised-surface effect requires two precisely calibrated box shadows - one lighter than the background, one darker - at opposite corners. Getting the values right manually requires understanding the relationship between background color and shadow colors.
This tool calculates both shadow colors automatically from whichever background color you pick.
Pick a background color and adjust Blur, Distance, and Radius, then choose Flat, Concave, Convex, or Pressed to generate the matching box-shadow CSS. The light and dark shadow colors are calculated automatically from your background color, and the light source is always fixed to the top-left corner - it isn't a control you can change.
Pick a background color, then adjust blur, distance, and radius.
Toggle between flat, concave, convex, and pressed styles - one at a time.
See the neumorphic element update as you adjust sliders.
Copy the CSS for the currently selected shape - switch shapes and copy again for another state.
Choose a color with the picker - the two shadow colors (light and dark) are calculated automatically from it.
These three sliders control the shadow softness, offset, and the element's corner rounding.
Click Flat, Concave, Convex, or Pressed - each recalculates the box-shadow (and, for Convex, the background) for that state.
Copy captures only the shape currently selected - repeat for each additional state you need.
Best For
Input
Shape: Pressed, Distance: 30 vs. Distance: 5Result
Identical output either way: box-shadow: inset 4px 4px {blur/2}px {dark}, inset -4px -4px {blur/2}px {light};The Pressed shape uses a hardcoded 4px offset regardless of the Distance slider - only Blur (via blur/2) and the background color affect its shadow.
Input
Same Blur/Distance/Radius/Background, Shape: Flat vs. Shape: ConvexResult
Identical box-shadow value in both; Flat's background is the flat color, Convex's background becomes a 145deg gradient from the light shadow color to the dark oneThe two shapes are visually different only because Convex swaps the solid background for a gradient - the box-shadow declaration itself is calculated identically.
Input
Background: #e0e0e0Result
Light shadow: rgb(224+40, 224+40, 224+40) clamped to 255; Dark shadow: rgb(224-40, 224-40, 224-40)The lighten/darken amount is a fixed 40 per channel, clamped at 0 and 255 - it isn't adjustable, so very light or very dark backgrounds compress toward less shadow contrast rather than erroring.
Pick a background color and let the tool calculate the light and dark shadow values.
Click through Flat, Concave, Convex, and Pressed to see which reads best before copying.
Copy the Flat (or Convex) CSS for the resting state, then switch to Pressed and copy again for the active state.
Problem
Solution
It doesn't - Pressed always uses a fixed 4px offset; only Blur and the background color change its output.
Problem
Solution
Copy only captures the currently selected shape - you need to switch shapes and copy again for each state.
Problem
Solution
There isn't one - the light is always top-left, dark is always bottom-right, for every shape.
Problem
Solution
The lighten/darken amount is fixed and clamped - very light backgrounds can't get much lighter, and very dark backgrounds can't get much darker, so the raised effect gets subtler at the extremes.
Colors like #e0e0e0 give the shadow math room to lighten and darken in both directions.
There's no combined output - grab the Flat/Convex CSS, then switch to Pressed and copy again.
Since the tool has no built-in contrast checking and neumorphic shadows are inherently low-contrast, pair the effect with a visible focus style or other indicator in your own CSS.
It's the only shape that changes the background from solid to a diagonal light-to-dark gradient.
"Distance" and "intensity" are the same single slider in this tool - there's no second control for shadow strength.
Light is always top-left, dark always bottom-right - this isn't adjustable for any shape.
Pressed uses a hardcoded 4px offset regardless of the Distance slider's value.
Copy only captures the currently selected shape - not a combined raised-and-pressed stylesheet.
The box-shadow output never includes a spread value.
Only a Copy button exists - no Tailwind/SCSS/CSS-variable output, no download, and no reset.
The tool doesn't warn you about low-contrast combinations - the accessibility trade-off inherent to neumorphism applies regardless of the values you pick.
Both calculate neumorphic shadows from a background color, but only one lets you change where the light comes from.
| This Tool (Fixed Top-Left Light) | A Light-Direction-Adjustable Generator | |
|---|---|---|
| Light direction | Fixed top-left/bottom-right | Usually adjustable |
| Combined raised + pressed output | One shape at a time | Sometimes both at once |
| Contrast/accessibility warnings | None | Occasionally included |
The most common question is about accessibility. Neumorphic designs often fail contrast ratio requirements - the subtle shadow differences that define the style are hard for users with low vision to distinguish. Use neumorphism as an aesthetic layer on top of accessible component structure, not as the sole indicator of interactive elements. This tool has no built-in contrast checking - the accessibility trade-off is the same regardless of the values you choose.
No. The light is always fixed top-left, dark bottom-right, for every shape - there's no direction control. Copy also only captures whichever single shape (Flat, Concave, Convex, or Pressed) is currently selected - switch shapes and copy again to get another state's CSS.
No. Distance controls the shadow offset for Flat, Concave, and Convex - but the Pressed shape uses a hardcoded 4px offset regardless of the Distance slider's value. Only Blur and your background color affect Pressed's shadow.
Neumorphism (New Morphism, or Soft UI) is a design style where elements appear to extrude from or press into the background surface - creating a raised or recessed appearance. Achieved through two box shadows of opposite tones (one lighter, one darker than the background) at opposite corners. Popularized around 2020 as an evolution from flat and material design - combining flat design's minimalism with skeuomorphism's tactile feel.
Neumorphism: elements appear to be part of the background surface - raised or recessed. Effect created with light and dark box shadows. Works best on single-color backgrounds. Glassmorphism: elements appear as floating glass panels above the background. Effect created with transparent background and backdrop-filter blur. Works best on colorful or image backgrounds. Both are aesthetic trends rather than accessibility-first design approaches.
Two box shadows are required - one lighter than the background (top-left) and one darker (bottom-right). For a #e0e5ec background: box-shadow: 6px 6px 12px #b8bec7, -6px -6px 12px #ffffff; - creates a raised appearance. For a pressed state (inset): box-shadow: inset 6px 6px 12px #b8bec7, inset -6px -6px 12px #ffffff; The shadow colors must be derived from the background color for the illusion to work. This tool calculates both shadow colors automatically (a fixed ±40 per RGB channel) from whichever background color you choose.
Neumorphic designs have inherently low contrast - the visual differentiation between interactive and non-interactive elements, or between active and inactive states, relies on subtle shadow differences that many users cannot distinguish. WCAG 2.1 requires a 3:1 contrast ratio for UI component boundaries (4.5:1 for text). Neumorphic shadows typically fail these ratios. The pressed vs raised state distinction is also non-obvious for users with low vision. This tool has no built-in contrast checking - the trade-off applies regardless of the values you pick.
Neumorphism requires a specific background color - typically a mid-range gray (#e0e5ec is the classic example). The two shadows are calculated as lighter and darker versions of the base background. Pure white (#ffffff) backgrounds cannot have a lighter shadow. Pure black backgrounds cannot have a darker shadow. The sweet spot is gray in the range #d0d0d0 to #f0f0f0. Colored neumorphism works but requires calculating the tinted shadow variants correctly. This tool doesn't warn you if you pick an extreme background - the lighten/darken math simply clamps at white or black, producing a subtler effect.
Leave your email so we can prioritize similar tools and updates.
Trending tools will appear as visitors explore the catalog.
Your recently visited tools will show up here.