Neumorphism generator (Soft UI)
Neumorphism makes elements look like they rise out of the background using two opposite shadows, one light and one dark. Tune every parameter, choose where the light comes from and copy the CSS.
Processed 100% in your browser
Ctrl + Enter runCtrl + C copy result
How to use
- 1Pick the base color: background and element share the same color.
- 2Adjust size, radius, distance, intensity and blur of the shadows.
- 3Select the shape (flat, concave, convex or pressed) and the light direction.
- 4Copy the CSS or share a link to your design.
Use cases
- Tactile-looking buttons, toggles and controls.
- Cards and panels for minimalist dashboards.
- Smart-home, music player or calculator interfaces.
- Exploring design trends for mockups and Dribbble shots.
Frequently asked questions
What is neumorphism?
A design style (neumorphism or soft UI) where elements seem molded from the same material as the background. It uses two opposite box-shadows: a lighter one towards the light and a darker one on the other side.
What is the difference between flat, concave, convex and pressed?
Flat uses a solid color; concave and convex add a gradient that simulates a surface curving inwards or outwards; pressed uses inset shadows so the element looks pushed in.
Is neumorphism accessible?
Its low contrast can make button and field boundaries hard to see. Combine it with clear icons, text with enough contrast and visible focus states.
Does it work on dark backgrounds?
Yes, but lower the intensity: on very dark colors the light shadow dominates. It works best with mid greys and pastel colors.