Neumorphism Generator
Pick a base colour, the direction of the light and the shape. The tool works out the matching light and dark shadows and gives you the CSS.
Soft surfaces have little contrast between the shape and its background, so keep text on them large and dark, and do not rely on the shadow alone to show that something can be pressed.
Worked examples
Default soft card
Base #e0e5ec, distance 12, blur 24, strength 15, flat, light from the top left
box-shadow: 12px 12px 24px #bec3c9, -12px -12px 24px #e5e9ef;
The dark shadow is the base mixed 15% towards black, and the light shadow 15% towards white.
About Neumorphism Generator
Neumorphism makes an element look as if it has been moulded out of the page itself. The effect comes from two shadows on opposite sides: a light one facing the imaginary light and a dark one facing away. Getting the two colours right for a given background is the hard part, and this tool works them out for you.
Choose a base colour, a direction for the light and a shape: flat, curved outwards, curved inwards or pressed in. Set the distance, blur, strength and corner radius and the preview updates straight away. The CSS includes the matching page colour, because the effect only works when the card and its background share one colour.
How to use Neumorphism Generator
- Pick the base colour that your page and the card will share.
- Choose the light direction and the shape.
- Adjust distance, blur, strength and corner radius.
- Copy the CSS for the page and the card.
Common uses
- Designing soft cards and panels
- Making toggle switches and buttons that look pressed in
- Exploring a calm, low-contrast interface style
- Generating matching shadow colours for any base colour
Frequently asked questions
Why must the page use the same colour?
The light and dark shadows are mixed from the base colour. On a different background colour the shadows no longer blend in, and the shape looks like an ordinary card with an odd shadow.
What does strength do?
It sets how far the two shadow colours move from the base colour towards white and black. Low strength is subtle, and high strength is bold and can look harsh on mid-tone colours.
Is this style accessible?
It needs care. The shape itself has very low contrast with its background, so text and icons on it must have strong contrast of their own, and interactive controls need a clear focus style as well as the soft shadow.
What do the curved shapes do?
They add a light gradient across the surface. Curved outwards is lighter on the side facing the light, like a dome. Curved inwards is the reverse, like a dish.