CSS Neumorphism Maker
Design a soft neumorphism effect — the extruded, soft-UI look — and copy the CSS.
The soft, extruded look
Neumorphism is the soft-UI style where elements look gently pressed out of or into the background, as if moulded from the same material — created with a pair of light and dark shadows that fake a soft light source. This lets you design the effect visually and copies the CSS, so you can produce that subtle, tactile look without hand-balancing the two shadows.
Adjust the shape, distance and intensity, and copy the CSS.
Handsome, with a real caveat
Neumorphism looks lovely, but it comes with an honest accessibility problem worth knowing before you commit to it: because everything is the same colour as the background with only soft shadows for definition, contrast is low, and buttons can be hard to distinguish from decoration — a genuine issue for usability and for people with low vision. It works best for accents rather than critical controls, and pairs well with clear labels and states. Design it with that trade-off in mind and it can look distinctive without leaving users guessing what is clickable.
Questions & answers
How is the neumorphism effect made?
With a pair of light and dark shadows on an element the same colour as its background, faking a soft light source.
Does neumorphism have any downsides?
Yes — its low contrast can make controls hard to distinguish, an accessibility concern. It suits accents more than critical buttons.
Is anything uploaded?
No. It runs entirely in your browser.