Neumorphism Generator
Design neumorphism (soft UI) elements with a live preview. Tweak size, radius, base color, and light/dark shadow offsets, then copy the generated CSS in one click. No upload, no signup.
About the Neumorphism Generator
Neumorphism (or "soft UI") blends an element with its background using two opposing shadows — a dark shadow on one side and a light highlight on the other. The result is a soft, extruded plastic look. This generator lets you tune all the relevant parameters and copy production-ready CSS instantly.
Properties you can control
- Size & radius — Dimensions and corner roundness of the element.
- Base color — The shared background color of the surface and the element.
- Shadow distance — How far the shadows are offset.
- Shadow blur — Softness of the shadows.
- Light / dark opacity — Independent intensity of each shadow.
- Style — Flat (raised), pressed (inset), or convex.
How to use
- Set the Base color — the preview surface uses it automatically.
- Adjust Size and Border radius for the desired shape.
- Tune Shadow distance and blur for depth.
- Balance the light/dark shadow opacity.
- Pick a style (flat / pressed / convex) and click Copy CSS.
Frequently asked questions
Why does the element look invisible? Neumorphism requires the element's background to match the surface behind it. Make sure your page background equals the Base color you set here.
Is neumorphism accessible? Soft UI can hurt contrast and accessibility. Use it for decorative elements, and ensure text meets WCAG contrast ratios by using a sufficiently dark text color.
Can I add hover effects? Yes — for buttons, swap to a "pressed" inset shadow on :active, or intensify the shadows on :hover.