Controls
FlatConcaveConvexPressed
CardButtonInputToggleCircle
↖↑↗←→↙↓↘
Dark Mode
Neumorphism Generator
2 min read
Build soft UI / neumorphic elements with live preview. I've this tool so you won't struggle with shadow calculations.
Preset Styles
Generated CSS
Copy CSS
What is Neumorphism?
Neumorphism (also called soft UI or neo-skeuomorphism) is a design style that combines flat design with subtle 3D depth through carefully crafted shadows. According to Wikipedia, neumorphism emerged around 2019-2020 as a fresh alternative to flat design. I've found that the key to good neumorphism is matching shadow colors precisely to the background color.
Video Tutorial
Neumorphism vs Other Design Styles
PageSpeed Notes
Neumorphic designs use box-shadow, which is hardware-accelerated and scores well on PageSpeed. Avoid animating box-shadow on scroll for best results.
Browser Compatibility
| Browser | box-shadow | Dark Mode |
|---|---|---|
| Chrome 134 | Full Support | Full Support |
| Firefox 120+ | Full Support | Full Support |
| Safari 17+ | Full Support | Full Support |
| Edge 134+ | Full Support | Full Support |
Community Resources
The neumorphism tag on stackoverflow.com has many helpful threads. Design discussions on news.ycombinator.com often debate neumorphism's accessibility implications.
Related npm Packages
| Package | Downloads | Description |
|---|---|---|
| neumorphism-ui | 8K/week | Neumorphic component library |
| react-neumorphism | 3K/week | React neumorphic components |
Our Testing Methodology
All neumorphic presets were tested on Chrome 134, Firefox, Safari, and Edge across both light and dark modes. Shadow calculations were verified against manual color computations to ensure correctness.