Online Tool Store
Neumorphism Generator
Generate neumorphic "soft UI" box-shadow CSS with a live preview — flat or pressed, adjustable distance, blur, and intensity. Runs entirely in your browser.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
CSS
How it works
- Pick a base color — neumorphism works best with a light, low-saturation color.
- Choose Flat (raised) or Pressed (inset), and adjust distance, blur, and intensity.
- Copy the generated CSS straight into your stylesheet.
The formula
Two box-shadows are drawn on opposite corners: a darker shade of the base color (as if lit from the top-left) and a lighter shade (as if lit from the bottom-right):
box-shadow: D D B darker, -D -D B lighter;
where D is distance and B is blur.
FAQ
What is neumorphism?
A "soft UI" design style where elements appear to be extruded from or pressed into a single-color background, using two offset shadows (one light, one dark) instead of a visible border or contrasting fill.
What's the difference between Flat and Pressed?
Flat draws the shadows outside the element, making it look raised above the background. Pressed uses inset shadows instead, making it look sunken into the background — useful for an "active" button state.
Why does neumorphism have accessibility concerns?
Because the effect relies on subtle shadow contrast rather than a clear border or color change, neumorphic elements can have very low contrast against their background — worth checking with a contrast checker before shipping it for interactive elements like buttons.
Does this work in every browser?
Yes — it only uses standard box-shadow, supported in every modern browser without any vendor prefixes needed.
How we compare
| Feature | Online Tool Store | neumorphism.io | Hand-tuning box-shadow |
|---|---|---|---|
| Flat and Pressed states together | ✓ | ✓ | Manual trial and error |
| No ads | ✓ | Ad-supported | ✓ |
| Instant, no waiting on generation | ✓ | ✓ | Slowest option |
Getting the two-shadow math right by hand is fiddly — this hands you working CSS in a few slider adjustments.