How to use the neumorphism generator
- Choose the surface colour. Neumorphism only works when the element and the page behind it share the same colour. The preview background follows your choice automatically.
- Adjust distance, blur and intensity. Distance sets how far the shadows are offset, blur softens them, and intensity controls how much lighter and darker the two shadows are than the surface.
- Pick a shape and light source. Flat, concave and convex change the surface fill. Pressed flips the shadows inward so the element looks pushed in, which works well for active buttons.
- Copy the CSS. Copy the rule and set the same background colour on the parent element.
What is neumorphism?
Neumorphism (short for new skeuomorphism) is a soft UI style where elements look extruded from, or pressed into, the background. It uses one light shadow and one dark shadow placed on opposite sides, as if lit from one corner.
How the shadows are calculated
The generator lightens and darkens your surface colour by the intensity value to make the two shadow colours. The dark shadow is offset away from the light source and the light shadow towards it. Concave and convex shapes add a subtle gradient across the surface in the same direction.
Use it carefully
Because neumorphic elements have very little contrast against the page, they can be hard to see for people with low vision. Use the effect for decorative or secondary surfaces, and make sure buttons still have clear text labels, icons or a visible focus state.
Frequently asked questions
Why does my neumorphic element look flat?
The element background and the page background must match. If the parent is a different colour, the light shadow disappears.
Does neumorphism work in dark mode?
Yes, but use a mid-dark surface such as #2b2f36 rather than near black. On pure black there is no room for a darker shadow.
What does the pressed option do?
It uses inset shadows, so the element looks sunk into the surface. It is commonly used for toggles and the active state of buttons.