Neumorphism generator
Pick a surface colour and the generator works out the matching light and dark shadows that make an element look pressed out of, or into, the background. Change the shape, light direction, distance, blur and intensity, then copy the CSS.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Choose the surface colour. Mid-light colours work best; pure white has no room for a lighter shadow.
- Adjust distance, blur and intensity until the depth looks right.
- Pick a shape and where the light comes from, then copy the CSS.
How it works
The CSS has two shadows. The dark one is offset away from the light by the distance; the light one is offset towards it. Pressed puts both inside the element with inset. Convex and concave add a gradient across the surface, lighter on the lit side for convex and darker there for concave, using half the intensity.
Worked example
Surface #e0e5ec, distance 20 px, blur 40 px, intensity 15 %, light from the top left. Red 224 × 0.85 = 190.4, green 229 × 0.85 = 194.65, blue 236 × 0.85 = 200.6, rounded to #bec3c9; the light shadow 224 × 1.15 and the rest exceed 255, so it is #ffffff. The result is:
box-shadow: 20px 20px 40px #bec3c9, -20px -20px 40px #ffffff;
Tips
- Blur about twice the distance gives the classic soft look.
- Use pressed for toggles and active buttons, flat or convex for cards and resting buttons.
- On dark surfaces lower the intensity; the light shadow shows quickly there.
Frequently asked questions
What is neumorphism?
A soft UI style where elements share the background colour and stand out only through two shadows - a lighter one towards the light source and a darker one away from it - so they look extruded from the surface.
How are the shadow colours chosen?
Each red, green and blue channel of the surface colour is multiplied by 1 + intensity for the light shadow and 1 − intensity for the dark one, then limited to 0–255. At 15 % intensity, #e0e5ec gives #ffffff and #bec3c9.
Why does the background need the same colour?
The effect relies on the element and the page being one material. Put the CSS on an element whose parent has the same background colour, as in the preview, or the shadows look like a plain drop shadow.
Is neumorphism accessible?
Low contrast is its weak point. Buttons drawn only with soft shadows can be hard to see, especially for people with low vision. Add clear text or icons with enough contrast, and a visible focus outline.