Soft UI
Generated CSS
Neumorphism (also called Soft UI) is a design style that makes elements appear extruded from the background, as if molded from the same material. It uses two box-shadows — one lighter and one darker than the background — cast from opposite corners to simulate a physical raised surface.
Unlike glassmorphism which is transparent, neumorphism is fully opaque. The base color of the element must match the background exactly for the effect to work.
.neu-card {
background: #e0e5ec;
border-radius: 20px;
box-shadow:
15px 15px 30px #b8bec7, /* dark shadow: bottom-right */
-15px -15px 30px #ffffff; /* light shadow: top-left */
}
| Property | Neumorphism | Glassmorphism |
|---|---|---|
| Transparency | Opaque | Semi-transparent |
| Key CSS | box-shadow (2 layers) | backdrop-filter: blur() |
| Background | Must match element | Any |
| Best on | Light, monochrome UI | Dark or colorful UI |
| Accessibility | Difficult (low contrast) | Manageable |
The element's background color MUST match its parent background exactly. If they differ even slightly, the shadow colors won't line up and the effect breaks. Use the same hex value for both.
Neumorphism has known accessibility challenges — the low contrast between elements makes it hard for users with low vision. Use it for decoration only, never as the sole affordance for interactive elements. Always pair with clear labels and sufficient text contrast.
Flat (default) makes the element appear raised from the surface. Pressed reverses the shadow directions — the element appears pushed into the surface, like a button being held down. This is ideal for active or selected states.
Related tools: Glassmorphism Generator · Box Shadow Generator · Color Palette Generator