CSS Neumorphism Generator
Generate soft neumorphic shadow styles for UI experiments.
Soft neumorphic surfaces
Neumorphism uses paired light and dark shadows to make elements look extruded from or pressed into the background — a soft, tactile UI style. This generator builds those matched shadows with a live preview so you can shape the effect.
The look depends on precise, symmetric shadows against a matching background, which is exactly what a generator handles well. Tune the distance and blur, and copy the CSS. Mind contrast — neumorphic controls can be hard to see, so use it thoughtfully.
Copy-ready neumorphism
Paired light and dark shadows on a matching background create the extruded look, so the effect depends on the surface color. Generated in your browser.
Frequently asked questions
How does the neumorphic effect work?
Two shadows: a dark one offset down and right, and a white one offset up and left, on an element the same color as its background. The surface looks extruded from the page.
Why does it look wrong on my background color?
The shadow colors are fixed at #b8c2cc and white, which suit light gray backgrounds like the default #e2e8f0. Replace them with slightly darker and lighter versions of your own background.
Is neumorphism accessible?
Often not. Controls defined only by soft shadows have low contrast, so add a visible border, text label, or strong focus style to anything interactive.
Related tools
Practical utilities for front-end design and implementation work.