TTULAKITO
Designer

Neumorphism Generator

Build soft neumorphism shadow surfaces with a live preview.

All tools

Preview

CSS

background: #e0e5ec;
border-radius: 30px;
box-shadow: 12px 12px 24px #babfc6, -12px -12px 24px #ffffff;

Frequently asked questions

What is neumorphism?
Neumorphism is a soft UI style where elements look extruded from or pressed into the background using two opposing shadows (one light, one dark) on a matching surface color. The look peaked around 2020 and divides opinion on accessibility.
Why is neumorphism considered bad for accessibility?
The signature look depends on very low contrast between elements and background, which usually fails WCAG 3:1 for non-text UI controls. Buttons and inputs become invisible to users with low vision.
What background color works best for neumorphism?
Mid-tone neutrals like #e0e5ec, #f0f0f3, or a desaturated pastel. Pure white and pure black don't have enough room for both lighter and darker shadows to read on the same surface.