CSS & Design
Neumorphism Generator
Create soft UI / neumorphic CSS effects with light direction, shapes, and component presets.
Your files stay on your device - processed locally via WebAssembly, never uploaded
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.
Embed this tool on your website
Copy this code to add the Neumorphism Generator to your site for free. It runs entirely in your visitors' browsers - no API key, no usage limits.
<iframe src="https://optipix.art/embed/neumorphism" width="100%" height="600" style="border:1px solid #e4e4e7;border-radius:8px;" title="Neumorphism Generator by OptiPix" loading="lazy"></iframe> <p style="font-size:12px">Free tool by <a href="https://optipix.art/neumorphism">OptiPix Neumorphism Generator</a></p>
❤️ Love this tool? Support our team.
No ads, no tracking, no limits. Tips keep 104 tools free for everyone.
Secure payment via Stripe · No account needed
About Neumorphism Generator
Last updated: June 2026
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
You Might Also Like
If you find Neumorphism Generator useful, check out these related tools: Glassmorphism Generator, CSS Box Shadow Generator, and CSS Gradient Generator. All tools run entirely in your browser with no uploads or signups required.
Explore more: Browse all tools · Step-by-step guides · Tips & tutorials · Compare tools
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.