Content is loading…
Soft UI / neumorphic shadow generator with live preview.
border-radius: 50px; background: #e0e5ec; box-shadow: 20px 20px 60px #bec3c9, -20px -20px 60px #e7ebf1;
Design soft, extruded UI shapes (neumorphism / soft UI) with paired light and dark shadows that match your background color. Pick distance, intensity, blur, shape (flat, concave, convex, pressed) and copy the CSS instantly. Light and dark mode previews.
The Neumorphism CSS Generator provides an immediate, visual way to build soft UI elements with precise control over distances, blur, intensity, and shadow effects. Because it generates the CSS instantly and offers both light and dark mode previews, it removes the guesswork involved in manually coding complex multi-layered box shadows.
Good to know: Since neumorphism requires specific contrast considerations for accessibility, users building production interfaces may need to manually verify that generated soft shadows meet standard readability guidelines.
Create soft UI design elements by generating custom neumorphic shadows and shapes with live CSS previews.
Select your element background color
Choose a background color for your UI element to ensure the light and dark shadows blend perfectly for the soft UI effect.
Adjust shadow distance and intensity
Use the sliders to define how far the shadows extend and how strong the contrast appears against the surface.
Configure blur and shape style
Set the blur radius and choose between flat, concave, convex, or pressed shapes to achieve the desired extrusion depth.
Preview in light and dark modes
Check the live preview area to see how your neumorphic design looks in different lighting environments.
Copy the generated CSS code
Click the copy button to grab the complete box-shadow and background CSS properties for use in your project.
Estimated time: PT1M
Share this tool
Visually create CSS box shadows with live preview and one-click copy.
Build frosted-glass effects with live preview and copy-ready CSS.
Design custom CSS border radius shapes with live preview.
Remove whitespace and comments to minify CSS code.
Convert colors between HEX, RGB, and HSL formats.
Visually build CSS gradients and copy the CSS output.
Upload an image and get all favicon sizes + HTML link tags.
Generate custom placeholder images with any size, color, and text.
Extract dominant colors from any image and export as HEX, RGB, HSL, CSS, or JSON.
Convert text or Markdown to a Word .docx file with live preview, RTL, and page-setup options.
Draw a Secret Santa with exclusions and share a private reveal link for each person.
Make custom bingo cards from your own words — play, print, or share a link.
Convert images to video with the Ken Burns zoom/pan effect. Add music and export as WebM.
Load and compare multiple URLs side by side in resizable iframes.
Rank anything with quick 1-v-1 matchups → a full ordered list you can share.
Convert Markdown to a fully customized, RTL-ready PDF.
See your public IP address plus full location, ISP, ASN, timezone, coordinates, and more.
