Neumorphism Generator
Create the soft-UI extruded look: dual light & dark shadows, 4 shape modes, and full control over light, depth and softness.
Tip: neumorphism needs the element background to match the page background — the generator sets both for you.
How to Use the Neumorphism Generator
- Pick a base color — soft UI works best with light, slightly muted colors.
- Choose the light source direction; shadows fall on the opposite side.
- Tune Distance and Blur for depth, and Intensity for contrast between light and dark shadows.
- Switch between Flat, Concave, Convex and Pressed shapes for buttons, cards and inputs.
- Copy the CSS (background + box-shadow pair) or the Tailwind class into your project.
About This Neumorphism Generator
Neumorphism (soft UI) makes elements look extruded from the background by combining two shadows: a dark shadow on one side and a light highlight on the other, with the element filled with the same color as the page background. The result is a soft, tactile, almost physical interface style for cards, buttons and toggles.
This generator computes the light and dark shadow colors from your base color automatically and pairs them with four shape modes: flat (classic extrude), concave and convex (gradient fills for curved surfaces), and pressed (inset shadows for pushed-in states). Remember: the element background must match the page background for the illusion to work — the preview shows both together.
Neumorphism FAQ
Why doesn't neumorphism work on my page?
The style depends on the element blending into its background: the element must use the same (or a very close) background color as the surface behind it. If your page background differs from the base color you picked, update one of them — the generator paints the preview stage with the same color for this reason.
What colors work best for soft UI?
Light, slightly desaturated colors (around 85–95% lightness) work best because both a lighter highlight and a darker shadow remain visible. Pure white kills the highlight; pure black kills the shadow. The Intensity slider controls how far the two tones spread from the base color.
What is the difference between concave and convex?
Both add a subtle linear-gradient fill on top of the dual shadows. Convex bulges toward the viewer (lighter toward the light source), like a raised button. Concave curves inward, like a shallow dish — useful for wells and input fields. Pressed uses inset shadows instead, for an active/pushed state.
Is neumorphism accessible?
Soft UI is low-contrast by nature, so use it for decorative containers rather than critical controls. Ensure text and icons meet WCAG contrast ratios, and consider adding a focus outline for interactive elements.
How are the light and dark shadow colors calculated?
The generator lightens the base color toward white for the highlight and darkens it toward black for the shadow, scaled by the Intensity slider. This keeps both tones in the same hue family, which is what makes the effect feel soft and natural.