Neumorphism Generator
Design a soft neumorphism effect — the extruded soft-UI look — and copy the CSS.
The soft, moulded 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. It is made with a pair of light and dark shadows that fake a soft light source. This lets you design it visually and copies the CSS, so you can produce that subtle, tactile look without balancing the two shadows by hand.
Adjust the shape and depth, and copy the CSS.
Handsome, with a real accessibility catch
Neumorphism looks lovely, but it carries an honest accessibility problem worth weighing before you commit. Because elements are the same colour as the background, defined only by soft shadows, contrast is very low — and buttons can be hard to tell apart from decoration, a genuine issue for usability and for people with low vision. It works best as an accent rather than for critical controls, and pairs well with clear labels and obvious states. Designed with that limitation in mind, it can look distinctive; used for essential buttons without enough definition, it leaves users guessing what is actually interactive.
Frequently asked questions
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 pressing it out or in.
What is the downside?
Its low contrast can make controls hard to distinguish — an accessibility concern — so it suits accents more than critical buttons.
Is anything uploaded?
No. It runs entirely in your browser.