Neumorphism Generator
Soft UI shadows from one colour: flat, pressed, concave or convex.
About this tool
Pick a base colour and a shape style: flat, pressed, concave or convex. Then set the size, corner radius, shadow distance, intensity and blur. The preview sits on a page of the same colour, as neumorphism requires, and the CSS lists the page background to use.
How neumorphism works, and its limits
Neumorphism, short for new skeuomorphism and also called soft UI, makes elements look as if they are pushed out of, or pressed into, the page. The element has the same colour as the background and casts two shadows: a lighter one towards the imagined light source at the top left, and a darker one away from it. The tool calculates both shades from your base colour. Pressed shapes use inset shadows, while concave and convex add a gentle gradient to suggest a dish or a dome. It works best with light-to-mid, low-saturation colours such as soft greys and pastels, because very dark or very bright bases leave no room for both a lighter and a darker shadow. The honest drawback is accessibility. Soft UI deliberately has low contrast, so buttons can be hard to see for people with low vision, and the difference between pressed and unpressed is easy to miss. Use it for decorative surfaces and cards, and give anything interactive clear text, a visible outline and a strong focus style. The glassmorphism generator makes a contrasting effect, the box-shadow generator edits shadows directly and the CSS button generator checks text contrast.
Frequently asked questions
What is neumorphism?
A soft UI style where elements share the background colour and are shaped by a light shadow on one side and a dark shadow on the other, so they look extruded from the page.
Is neumorphism accessible?
Not on its own. Its low contrast makes controls hard to see, so pair it with clear text, outlines and focus styles for anything interactive.
What colours work best for neumorphism?
Light-to-mid, low-saturation colours such as #e0e5ec. Very dark or very bright colours leave no room for both shadows.
Is my design saved?
No. Everything runs in your browser and nothing is stored or sent.