Neumorphism Generator
Pick a base color and watch the tool derive the light and dark shadows. Dial in shadow distance, intensity, blur, and light source angle, then switch between convex, concave, flat, and pressed modes — copy CSS, Tailwind, React inline, SCSS, or JSON.
Live preview
Pick a mode, dial in the light source, and watch the card, button, toggle and circle all morph together.
Card
Button
Circle
Toggle
Presets
Hand-tuned starting points — click one to load the full configuration.
Base color
The single source of truth — every shadow color is derived from this with a lightness shift.
Light highlight
#ffffff
Dark shadow
#b1bdcf
Shape
The width and height are cosmetic; only the border radius is part of the exported CSS.
Shadow
Distance, blur and intensity drive how raised the element looks; angle picks the light source.
Code output
Copy ready-to-paste CSS, a Tailwind arbitrary-value combo, a React inline style, SCSS variables, or JSON.
background: #e0e5ec;
border-radius: 24px;
box-shadow: -6px 6px 18px #ffffff, 6px -6px 18px #b1bdcf;