Shape Designer
Generate soft UI elements with realistic depth and lighting effects using "soft UI" design principles.
Built With Care
“The generator derives a darker and a lighter shade from your base color by scaling the red, green, and blue channel values with the intensity slider, then pairs them as offset box-shadows for an extruded look. The inset variant reverses the shadow direction for pressed surfaces, while concave and convex variants add linear gradients to suggest curved surfaces.”
Professional Neumorphism Generator
A free neumorphism generator that produces soft UI CSS with a live preview. Adjust distance, blur, intensity, radius, and base color, then copy the finished box-shadow and gradient code for buttons, cards, and inputs.
- 1Pick a base color that matches your page background; light grays and pastels produce the cleanest soft UI effect.
- 2Set Distance to control how far the element appears to float above the surface.
- 3Adjust Blur to soften or sharpen the shadow edge for a more subtle or more dramatic look.
- 4Use Intensity to balance how much lighter the highlight and darker the shadow become.
- 5Choose a shape style: flat, concave, convex, or inset to switch between raised and pressed surfaces.
- 6Copy the generated CSS snippet and paste it into your stylesheet, or into a style attribute for quick testing.
- Automatic Shadow Pairing: Computes light and dark shadow colors from your base color for consistent depth.
- Four Surface Styles: Flat, concave, convex, and inset variants for different UI needs.
- Live Preview: The element renders in real time against your chosen background color.
- Border Radius Control: Rounds corners to match your design without writing extra CSS.
- Copy-Ready Output: Generates clean background and box-shadow declarations ready to paste.
- Fully Local: All color math happens in your browser with no server calls.
Professional Neumorphism Generator Specs
Limits
- Single shape (200×200)
- Flat, concave, convex, inset variants
Formats
- Output: paired box-shadow CSS (light + dark)
Defaults
- #e0e0e0, 40 px radius, 20 px distance, 15% intensity
How it works
- RGB lighten/darken + box-shadow composition
Honest caveats
- Effect depends on background color — designed for #e0e0e0-class surfaces
- Accessibility: low contrast with background — text may need separate contrast handling
Real Ways People Use This
Dashboard Design
Style admin panels with extruded stat cards and buttons that appear to sit on the background.
Mobile App UI
Build iOS-style raised and pressed controls for mobile web apps and hybrid interfaces.
Landing Page Elements
Add quiet depth to feature cards, pricing boxes, and call-to-action buttons without heavy gradients.
Form and Input Styling
Use inset surfaces for search fields and text inputs so they read as recessed and clickable.
Design System Components
Generate a consistent soft UI look across buttons, toggles, and sliders from one base color.
- Soft UI surfaces have low contrast and may not meet WCAG readability guidelines for text placed on them.
- The effect depends on a solid, muted background; busy gradients or images break the illusion.
- If the parent container background differs from the base color, the shadow illusion becomes less convincing.
- 1Test the result against your actual app background color before shipping.
- 2Check text contrast on any element that uses the generated surface.
- 3Compare inset versus outset variants for interactive states like pressed buttons.