How to Generate Neumorphic Soft-UI CSS

You’ve seen the “soft UI” or neumorphic design style — buttons and cards that look extruded or pressed into a flat background, using subtle light and dark shadows rather than borders or flat drop shadows — and want that look for a button or card in your project. Getting it right by hand means carefully balancing two opposing box-shadows (a lighter one on one side, a darker one on the other) with matched blur and offset values, which is fiddly to tune manually and easy to get looking flat or muddy instead of genuinely soft.

The visual trick is simple in concept but sensitive in execution: too little contrast between the two shadows and the effect disappears; too much and it stops looking soft and starts looking like a heavy, unnatural border.

What makes neumorphism actually work visually

The soft-UI effect works by simulating a single, consistent light source: one box-shadow, lighter than the background, positioned as if light is hitting that edge, and a second, darker box-shadow on the opposite edge, as if that side is in shadow. Get the direction and softness of both consistent and the element reads as either raised out of the background (a “flat” or convex state) or pressed into it (a “pressed” or concave state), depending on which shadow you position where.

The specific values that make this work — blur radius, offset distance, shadow intensity — are sensitive to the background color they’re layered on, which is why a value that looks great on one background can look flat or overdone on another and needs re-tuning rather than just copy-pasting the same CSS everywhere.

Why people get stuck here

• Manual shadow tuning is trial and error. Getting the light/dark balance right by hand usually means repeatedly adjusting CSS values and reloading to check the result.
• The effect is background-color sensitive. The same shadow values that look soft on one background color can look wrong on a different one, so there’s no single universal CSS snippet that works everywhere.
• Flat vs. pressed states need different shadow arrangements. Simulating an element that looks pushed in versus popped out requires understanding which shadow goes where, which isn’t intuitive without seeing it live.
• Accessibility concerns are easy to overlook. Neumorphism’s low-contrast, monochromatic style can create real accessibility issues (hard-to-see button boundaries, poor contrast) if pushed too far without checking it.

What a good neumorphism generator looks like

Live preview as you adjust

Since the effect is sensitive to small value changes, seeing the result update in real time is far faster than tweaking CSS and reloading repeatedly.

Both flat and pressed states

Being able to toggle between an element that looks raised versus pressed in covers the two core states most soft-UI designs actually use.

Adjustable distance, blur, and intensity

Fine control over these three variables, rather than a single fixed preset, is what lets the effect actually look right against your specific background color.

Common mistakes to avoid

• Overusing neumorphism across an entire interface, where the subtle, low-contrast style can hurt overall usability and make interactive elements hard to distinguish from static ones.
• Copying a neumorphic CSS snippet from one project into another without re-tuning it for the new background color.
• Ignoring contrast and accessibility — neumorphic elements can fail basic visibility and contrast checks if the shadow values are too subtle for users with lower vision.
• Applying the effect to text-heavy or dense interfaces where soft UI’s decorative style competes with readability.

How to do it with Neumorphism Generator

Online Tool Store’s Neumorphism Generator generates neumorphic soft-UI box-shadow CSS with a live preview — flat or pressed, adjustable distance, blur, and intensity — entirely in your browser.

1. Open the Neumorphism Generator tool.
2. Set your background color to match your actual design.
3. Choose flat or pressed, and adjust distance, blur, and intensity while watching the live preview.
4. Copy the generated CSS into your stylesheet.

Frequently asked questions

Why does the same CSS look different on another background color?

Because the effect depends on light and dark shadows that read correctly only against the specific background they’re tuned for — moving the same values to a different background color usually needs re-tuning to look right.

Is neumorphism good for buttons and interactive elements?

Use it carefully — the style’s low-contrast, subtle boundaries can make interactive elements harder to distinguish from static ones, which is a real accessibility concern if overused across critical UI controls.

What’s the difference between “flat” and “pressed” states?

Flat (or convex) simulates an element raised out of the background, with the light shadow and dark shadow positioned accordingly; pressed (or concave) simulates the same element pushed into the background, which reverses the shadow arrangement.

Final thought

Neumorphism’s soft, tactile look is genuinely appealing in small doses, but it’s sensitive enough to background color and contrast that hand-tuning it by trial and error wastes time a live preview tool eliminates entirely.

Try the free Neumorphism Generator tool