Neumorphism Generator
Neumorphism makes an element look pressed out of, or into, the surface it sits on. Pick a surface color and tune the distance, blur and intensity of the two shadows.
bg-[#e0e5ec] rounded-3xl shadow-[10px_10px_20px_#c0cad9,-10px_-10px_20px_#ffffff]
background: #e0e5ec; border-radius: 24px; box-shadow: 10px 10px 20px #c0cad9, -10px -10px 20px #ffffff;
Frequently asked questions
How does neumorphism work in CSS?
The element uses the same background color as the page and gets two shadows: a darker one down and to the right, and a lighter one up and to the left. That pair of shadows creates the illusion of a soft raised surface.
How do I get the pressed look?
Add the inset keyword to both shadows. The shadows then fall inside the element, so it looks pushed into the surface. Switch to Pressed in this tool to see it.
What background colors work best?
Mid-light, slightly desaturated colors such as #e0e5ec work best. Pure white cannot get a lighter highlight, and very dark colors make the effect hard to read.
Is neumorphism accessible?
It often is not. Edges have very low contrast, so buttons and inputs can be hard to see. Use it for decoration, keep text contrast high, and add a visible focus style to anything interactive.
Guides that go with this tool
More free Tailwind CSS tools
More free tools & components
Keep going with another tool, or grab a ready-made component.