About the CSS Neumorphism Generator
What is neumorphism?
Neumorphism, or soft UI, makes an element look as though it's been pushed up out of the surface behind it rather than floating above it. The trick is two shadows instead of one. A darker shadow falls away from the light source and a lighter one falls toward it, and both are derived from the same base color as the surface. That's what sells the illusion of a single sheet of material being deformed.
It has one hard rule that trips people up. The element and its background must be the same color. Put a neumorphic button on a white page when its base color is light gray and the effect falls apart immediately, because the "material" no longer matches its surroundings. This tool ties the preview background to your base color so you're always seeing the honest version.
How to Use This Tool
- Pick a base color. A light gray around
#e0e0e0 is the classic. Pure white and pure black don't work, since there's no room left to go lighter or darker.
- Choose the shape. Flat is a raised slab. Concave and convex add a subtle gradient so the surface looks curved. Pressed puts both shadows inside.
- Set the light direction. Whatever you choose, use it on every element in the interface, or the lighting stops being consistent.
- Tune distance, blur and contrast. Distance moves the shadows apart, blur softens them, contrast decides how far each one strays from the base color.
- Copy it. CSS, an SCSS mixin, a Tailwind class or a JS style object.
Common Use Cases
Soft UI suits interfaces that want to feel physical and calm. It's a style with real limits, so it pays to know where it works.
- Toggles and switches: The pressed and raised states map naturally onto off and on.
- Media and player controls: Buttons that read like physical keys on a device.
- Dashboard cards: Panels that separate from the background without a hard border.
- Input fields: The pressed shape makes a text field look like a recessed well.
- Sliders and progress tracks: A pressed groove with a raised handle sitting in it.
Two more worth a look, the CSS Box Shadow Generator builds the same property without the matched-pair constraint, and the CSS Border Radius Generator shapes the corners. Or browse all our free developer tools.
Frequently Asked Questions
Why does my neumorphic element look wrong on my page?
The background behind it almost certainly isn't the same color as the element. Neumorphism works by pretending the element and the surface are one continuous material, so the moment the two colors differ the shadows stop making sense and you get a gray box with an odd double shadow. Copy the base color into your page background as well, not just the element.
Is neumorphism accessible?
Often not, and it's worth being clear about it. Because the element and its background are the same color, the only thing marking the edge is a soft shadow, which can fall well below the 3:1 contrast that non-text UI components need. People with low vision may not see the boundary of a button at all. If you use it for anything interactive, add a real border, a distinct text color, or a clearly visible focus style, and don't rely on the shadow alone to say "this is a button".
What is the difference between concave and convex?
Both add a faint gradient across the element's own background. Convex runs light to dark, which makes the surface look like it bulges toward you. Concave runs dark to light, which makes it look scooped inward. The outer shadows stay the same in both cases, so the difference is subtle and only really reads at larger sizes.
Why do very light or very dark base colors break the effect?
Because there's nowhere left to go. The lighter shadow is the base color shifted up and the darker one is the base shifted down, so if you start at pure white the light shadow can't get any lighter and only one of the pair shows. The tool warns you when your base gets close to either end. Somewhere around 10% away from white gives both shadows room to work.
Does the effect work in dark mode?
Yes, and it can look very good. Use a dark base that isn't pure black, such as a deep slate, so the lighter shadow still has room. The Dark mode preset is a reasonable starting point. Keep the contrast setting lower than you would on a light base, since shifts read more strongly against dark colors.
Can I animate between raised and pressed?
Yes, and it's the most convincing use of the style. Transition the box-shadow between the raised and pressed values on :active and the button genuinely feels like it depresses. Keep the transition short, around 150ms, and be aware that animating a shadow repaints the element, so avoid doing it on dozens of elements at once.
