CSS Neumorphism Generator
The soft-UI look: an element that seems molded from its background, using paired light and dark shadows. Dial in distance, blur, intensity and shape — the generator derives both shadows from your background color.
Settings
Ready-made examples — click any card to copy its CSS
Proven starting points. Clicking a card copies the full CSS to your clipboard.
The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
Related generators & tools
- CSS Box Shadow GeneratorShadows & Effects
- CSS Glassmorphism GeneratorBackgrounds & Color
- CSS Card GeneratorUI Components
- CSS Button GeneratorTypography & Buttons
- CSS Layer Styles GeneratorShadows & Effects
How it works
Neumorphism is two shadows pretending to be one light source: a dark shadow toward the light's opposite corner, a light one toward it, both derived by shifting the background color. That's why the element must share its parent's background — the illusion is that it's extruded from the surface, not floating above it.
The convex/concave variants add a subtle diagonal gradient on top, reversing direction between them. Pressed simply flips both shadows inset.
Run the code — try it yourself
Turn the square into a raised neumorphic tile on the #E4EBF1 body: two 10px/24px shadows, one #C1C9CF, one white.
Frequently asked questions
Why does my element look wrong on white?
Pure white leaves no room for the light shadow. The style needs a tinted background — light gray-blue is the classic.
Is neumorphism accessible?
Its weakness: contrast is inherently low, so it fails for critical controls. Use it decoratively and keep interactive elements clearly distinguishable — see the accessibility article on the blog.
Can I combine it with dark mode?
Yes — the same math on a dark base works; the generator handles it, just pick a dark background.
Keep going
Soft UI is a mood, not a system — use it where calm matters and contrast doesn't. Its glassy sibling lives in the Glassmorphism Generator.
CSSmatic is a non-profit project, made by developers for developers.