How to Create a Neumorphic Card with CSS
Neumorphism uses paired light and dark shadows to press a card out of its background. This guide covers color choice, distance and blur.
What is the Neumorphism Generator?
Neumorphism makes a card look pressed out of its background, using two shadows: a darker one on one side and a lighter one on the other. Pick a background color and set the shadow distance and blur, and this tool writes the card rule with both shadows derived from your color. It looks best on muted, mid-tone backgrounds.
How to use it
- Enter a background color as a hex value.
- Set the shadow distance and blur in pixels.
- Click Generate neumorphic CSS and copy the rule into your stylesheet.
Worked example
With a #e0e5ec background, a distance of 10 and a blur of 20, the result is a .neumo rule with a 20px radius and two shadows: 10px 10px 20px rgb(179, 183, 189) and -10px -10px 20px rgb(246, 252, 255).
Is neumorphism good for buttons people must find quickly?
It can look subtle to the point of hiding controls, so pair it with clear labels and strong text contrast. Save the softest version for decorative cards rather than primary actions.
Frequently asked questions
Why two shadows instead of one?
The dark shadow suggests a raised edge catching shade, while the light shadow suggests the opposite edge catching light. Together they create the pressed-out look.
Which background colors work best?
Soft mid-tones like light greys and pastels work best, because both a darker and a lighter shade stay visible against them.