Neumorphism Generator
Design soft-UI neumorphic card and button effects visually. Control size, radius, distance, blur and intensity. Light and dark mode. Copy CSS instantly. Free.
🎨 Design & Color Tools
Free
Browser-based
Card
What Is Neumorphism?
Neumorphism (soft UI) is a design style that uses dual box shadows — one light and one dark — on a matching background to simulate physical extrusion or indentation. Unlike skeuomorphism it stays flat and minimal, and unlike flat design it adds subtle depth.
Shadow Formula
| Effect | Light Shadow | Dark Shadow |
|---|---|---|
| Raised | Top-left, lighter than BG | Bottom-right, darker than BG |
| Inset | Bottom-right, lighter than BG | Top-left, darker than BG |
| Flat | Minimal, same direction | Same direction as light |
Accessibility Note
Neumorphic elements can be hard to distinguish for users with low vision because the contrast is intentionally subtle. Always ensure interactive elements (buttons) have sufficient contrast and consider adding hover/focus states with stronger visual feedback.