border-radius: 24px;
background: #e0e0e0;
box-shadow: 12px 12px 24px #bababa, -12px -12px 24px #ffffff;The CSS Neumorphism Generator builds soft-UI elements — the style where a shape looks gently extruded from or pressed into the background using paired light and dark shadows. You set the surface color, shadow distance, blur, contrast intensity, corner radius, and shape, watch a live preview, and copy the exact CSS.
Neumorphism works by placing two box-shadows on an element that shares its background with the page: a lighter shadow on the top-left and a darker one on the bottom-right. Getting the two shadow colors and offsets to look convincingly soft is finicky by hand. This tool derives the light and dark shades from your surface color automatically, so the effect always looks balanced.
Everything runs in your browser. Pick a preset, adjust the sliders, switch between flat, concave, convex, and pressed shapes, and copy the CSS. No account, no uploads, and it keeps working offline once the page has loaded.
Choose the color of your element, which should match the page background behind it — neumorphism relies on the element and page sharing the same base color.
Adjust distance, blur, and intensity to control how far the element lifts off the page and how strong the light/dark contrast is.
Switch between flat, concave, convex, and pressed. Pressed uses inset shadows to look sunken, while concave and convex add a subtle gradient.
Copy the generated block — border-radius, background, and the paired box-shadow — and paste it onto your card, button, or panel.
The light and dark shadow shades are derived from your surface color, so the soft-UI effect always looks balanced without manual tweaking
Flat, concave, convex, and pressed cover raised and sunken looks, with pressed using inset shadows and concave/convex adding a subtle gradient
Sliders for shadow distance, blur, contrast intensity, and corner radius let you dial the effect from barely-there to dramatic
The preview sits on a matching background so the soft shadows read correctly, updating instantly as you edit
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create frosted-glass UI with a live preview and sliders for backdrop blur, transparency, saturation, color, and radius — then copy production-ready CSS.
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
0 comments
No comments yet. Be the first to share your thoughts!