Neumorphism Generator
Set a background color, shadow distance and blur, and copy the soft extruded card CSS.
Quick answer: enter your details below and click Generate neumorphic CSS — your result appears instantly, right here in your browser. Nothing you enter is uploaded or stored.
N
Developer
Enter your details below.
How to use
- 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.
About this tool
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.
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.