Neumorphism Generator
Generate soft UI neumorphic shadows with a light-source control, four shapes and live preview. Copy the CSS. Free, no signup.
Shape
Light Source
Style
.neu {
border-radius: 50px;
background: #e0e5ec;
box-shadow: 20px 20px 60px #ccd0d7,
-20px -20px 60px #e5e9ef;
}About the neumorphism generator
Neumorphism, or soft UI, makes an element look pressed out of the surface behind it rather than placed on top. It is built from two shadows: a dark one on the side away from the light, and a light one on the side facing it. Because both shadows are close in colour to the background, the shape appears moulded from the same material.
The technique lives or dies on the background colour. The two shadows are derived from it, so the element and the surface must share a colour. That is why this generator asks for the surface colour first and calculates both shadows from it.
How to use it
- 1Set the surface colour. Everything else is derived from it, so start here.
- 2Choose where the light comes from. All four shadows flip to match.
- 3Pick a shape: flat, concave, convex or pressed. Pressed uses inset shadows for a button-down state.
- 4Tune distance and blur. Larger distance reads as further from the surface.
- 5Adjust intensity for how much contrast the two shadows carry.
- 6Copy the CSS. Remember to apply the same background colour to the parent.
Worth knowing
- The parent element must use the same background colour, otherwise the effect collapses.
- Contrast is the known weakness of this style. Neumorphic buttons often fail accessibility checks because the edges are so subtle.
- Use it for accents, not for every control on a page.
Questions
Why does my neumorphic element look flat?
The parent background does not match the element background. The illusion depends on both being the same colour, so the shadows read as moulding rather than as a separate object.
Is neumorphism accessible?
Not by default. The soft edges give very low contrast, so buttons can be hard to identify as interactive. If you use it, pair it with clear labels and make sure focus states are obvious.
What is the difference between flat, concave and convex?
Flat keeps a solid fill. Concave adds a gradient that runs dark to light, making the surface look scooped inward. Convex reverses it so the surface bulges out. Pressed switches both shadows to inset for a pushed-in button.