Create soft, extruded UI elements with dual shadows – raised or inset. Live preview & CSS code
Want to embed this neumorphism generator on your website? Use this code:
Learn the soft, extruded design trend – how it works and when to use it.
Read Tutorial →Why background, light and dark shadows should be closely related.
Read Tutorial →| Feature | Our Tool | Tool A | Tool B |
|---|---|---|---|
| Free & unlimited | ✅ | ✅ | ❌ (limit) |
| Live preview on matching background | ✅ | ✅ | ❌ |
| Custom light/dark shadow colors | ✅ | ✅ | ✅ |
| Inset / Pressed mode | ✅ | ✅ | ❌ |
| 4 light direction options | ✅ | ❌ | ✅ |
| Download CSS file | ✅ | ❌ | ✅ |
| Client-side / private | ✅ | ❌ | ✅ |
Neumorphism (soft UI) is a design style that uses dual shadows – one light, one dark – to create elements that appear extruded from or pressed into the background.
The light shadow is usually white or a very light tint of the base color. The dark shadow is a darker shade of the base color (or a neutral grey). The base color should be a medium lightness (around 70‑90% brightness).
Neumorphism works best when the element and its background are the same or very similar color. Our preview background automatically matches your base color for a realistic effect.
Outset (default) makes the element appear raised above the surface. Inset makes it look recessed or pressed down.
Neumorphism brings a tactile, soft, and modern aesthetic to UI elements. It works particularly well for decorative cards, toggle switches, and control panels – but use sparingly, as low contrast can affect accessibility.
Adds physicality without heavy shadows.
Great for highlighting interactive areas.
Use neumorphism for specific components, not entire pages.
Tools to enhance your UI workflow