Neumorphism Generator
Generate flat, concave, or convex neumorphism CSS from a base color and paired light/dark shadows.
How to use
- Adjust base and shadow colors, mode, and geometry.
Capabilities and scope
Shadow angle, distance, blur, radius, and mode create opposing offsets and optional background gradients.
How it works
cos/sin convert angle to offsets; the base is mixed toward white/black to construct light and dark styling.
Example
Flat mode uses a solid background plus two opposing light/dark shadows.
Useful for
- Prototype soft UI cards or controls
Before you use it
- Low edge contrast can hurt accessibility, so interaction states and focus outlines still need deliberate design.
Frequently asked questions
Do I enter both shadow colors manually?
The secondary color supplies the dark side while the light side is derived by mixing the base toward white.