Neumorphism (Soft UI) Generator
Generate convex, concave, and flat soft-UI CSS from a base color using dual shadows, with copy
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
From a single base color, it simultaneously computes a light shadow and a dark shadow to create the softly pressed soft-UI (neumorphism) style. Adjust size, roundness, shadow distance, blur, and contrast intensity, pick a convex, concave, or flat form, and copy the CSS alongside a live preview.
How to use
- Pick a base color and the light and dark dual shadows are computed automatically.
- Select your preferred surface form (flat, convex, or concave) with the tabs.
- Refine the texture with the size, roundness, shadow distance, blur, and contrast intensity sliders.
- Copy the finished border-radius, background, and box-shadow CSS to use.
FAQ
- I applied it but the shadows aren't visible.
- Neumorphism only looks natural when the element and its parent background are the same color. Placing a light-gray card on a white background buries the light-side shadow, so set the parent container's background to the same base color.
- What's the difference between convex, concave, and flat?
- Flat has a solid surface color with a raised feel; convex adds a light-to-dark gradient on the surface for a bulging feel; concave flips the gradient for a pressed-in feel. The shadow direction is the same for all three.
- Can the shadow colors differ from actual design tools?
- The light and dark colors are approximated by mixing the base color with white and black, so they may differ slightly from tool to tool. Treat them as a reference, and if needed, copy them and fine-tune the rgb values yourself. All processing happens in your browser.