Neumorphism Design Generator
Advanced Soft UI generator: dynamic 4-way light angles, concave/convex gradients, pressed states, with CSS & Tailwind classes.
Neumorphic Card
Soft physical depth with dual 4-way light physics.
border-radius: 32px; background: #e0e5ec; box-shadow: 16px 16px 32px #babfc6, -16px -16px 32px #ffffff;
rounded-[32px] bg-[#e0e5ec] shadow-[16px_16px_32px_#babfc6,-16px_-16px_32px_#ffffff]
className<div className="...">Export & saved snippets
.element {
border-radius: 32px;
background: #e0e5ec;
box-shadow: 16px 16px 32px #babfc6, -16px -16px 32px #ffffff;
}How to Use Neumorphism Design Generator
Pick your surface color or choose from modern light & dark presets.
Select light source direction (↖ Top-Left, ↗ Top-Right, ↘ Bottom-Right, ↙ Bottom-Left).
Choose shape curvature: Flat, Concave, Convex, or Pressed (Inset).
Copy standard CSS properties or Tailwind CSS arbitrary classes from their dedicated boxes.
Frequently Asked Questions
How does Neumorphism work?
Neumorphism simulates soft plastic extrusion by combining two offset shadows calculated from light physics: a darker shadow on the opposite side of the light source, and a lighter highlight facing the light.
How do I use the Tailwind CSS output?
Copy the provided Tailwind classes (such as shadow-[...], rounded-[...], bg-[...]) directly into your JSX or HTML class attribute.
Can I create dark mode neumorphic components?
Yes, toggle between light surface (#e0e5ec) and dark mode (#1e222b) to see automatic shadow contrast adjustment.
Related Developer Tools
Explore more free client-side developer utilities in this category