CSS neumorphism (soft UI) generator
Generate a CSS neumorphism (soft UI) effect with live preview and copy-ready code.
🔒 100% client-side — no data sent
Create a CSS neumorphism (soft UI) effect with a live preview: adjust the color, radius, distance, blur and shadow intensity, then copy the code. Everything runs in the browser.
What is it for?
- ▸ Design soft UI buttons and cards
- ▸ Get the exact neumorphic box-shadow
- ▸ Test flat / concave / convex variants
- ▸ Grab ready-to-paste CSS
FAQ
What is neumorphism?
A UI style where elements appear extruded from the background thanks to two opposite shadows (one light, one dark).
Why is my effect barely visible?
Neumorphism works best when the element color matches the background. Avoid pure black or white.
What is the “inset” mode for?
It renders an inner shadow, making the element look pressed into the background instead of raised.
Is the result supported everywhere?
Yes, it relies on box-shadow and border-radius, supported by all modern browsers.
Related tools
Aspect ratio · calculator Calculate an aspect ratio (16:9…) and derive a missing proportional dimension. Barcode generator Generate a barcode (EAN-13, Code128, UPC) from a value, downloadable, in your browser. Base64 → image Decode a data URI or Base64 into a viewable, downloadable image, in your browser. CSS border-radius · generator Create CSS rounded corners (border-radius) with a live preview and copy-ready code. CSS box-shadow · generator Generate a CSS box-shadow with a live preview and copy-ready code. Green screen remover Make a background color (green/blue screen) transparent and export a PNG, in your browser.