CSS & Design
Neumorphism Generator
Create soft UI / neumorphic CSS effects with light direction, shapes, and component presets.
Shape
Light Direction
CSS
background: #e0e5ec; border-radius: 12px; box-shadow: 8px 8px 16px #b0bdcf, -8px -8px 16px #ffffff;
Component Presets
🔒 All CSS generation happens in your browser. Nothing is sent anywhere.
☕ Love this tool? Support the developer.
100% free — no ads, no limits. Your support keeps every tool free.
Secure payment via Stripe · No account needed
About Neumorphism Generator
OptiPix Neumorphism Generator creates the soft, extruded UI effect using CSS box-shadow. Set the background color (classic neumorphism gray #e0e5ec or any color), shadow distance, blur, intensity, and shape (flat, concave, convex, or pressed/inset). Choose the light direction from four corners. The tool automatically computes matching light and dark shadow colors from your background color. Preview the element on a matching background (neumorphism requires element and background to share the same color). Choose from component presets: button, pressed button, card, input field, toggle switch, and circle. Copy the generated CSS. Everything runs locally in your browser.
How It Works
The tool takes the background color and computes a lighter and darker variant using HSL manipulation. These become the two box-shadow colors, offset in the chosen light direction. Flat shapes use standard box-shadow; concave/convex add a subtle gradient overlay; pressed uses inset shadows.
Use Cases
- •Design soft UI buttons and interactive elements
- •Create neumorphic card components for dashboards
- •Build soft input fields and form elements
- •Design neumorphic toggle switches and radio buttons
- •Experiment with neumorphic design for app prototypes
Frequently Asked Questions
What is neumorphism?
How are the shadow colors calculated?
What shapes are available?
Why must the background color match the element?
Is any data sent to a server?
Related Tools
Glassmorphism Generator
Create frosted glass CSS effects with backdrop blur, transparency, and customizable backgrounds.
CSS Box Shadow Generator
Create CSS box shadows with visual controls, multiple layers, and Material Design presets.
CSS Gradient Generator
Create linear, radial, and conic CSS gradients with a visual editor and presets gallery.
CSS Text Shadow Generator
Create CSS text shadows with visual controls, multiple layers, and creative presets like neon glow, fire, and retro 3D.