CSS Neumorphism Generator
Tune the surface and light direction, preview the result, and copy a safe plain-text CSS declaration.
LIVE PREVIEW
A QUICK WALKTHROUGH
How to use this tool
- Choose a background color and adjust radius, distance, blur, and intensity.
- Set the light angle and inspect the browser-local preview.
- Copy the generated box-shadow declaration into your stylesheet.
Paired soft shadows
Neumorphism uses a light shadow and a dark shadow on the same surface. This generator derives both from your base color and light angle.
Safe plain-text output
The result is a CSS declaration only. Inputs are numeric or color controls, the preview uses style properties, and no entered HTML is parsed or executed.
A visual starting point
The effect depends on the surrounding background and contrast. Check the result in your interface and provide additional borders, text, or state cues where needed.
GOOD TO KNOW
Common questions
Does this generate HTML?
No. It generates a box-shadow CSS declaration and uses a controlled style preview.
Is my input uploaded?
No. Calculations, preview, and copyable CSS stay in this browser.
Why are there two shadows?
A light and dark pair creates the raised or pressed neumorphic appearance.