CSS Neumorphism Generator
Generate soft-UI neumorphism CSS box-shadows with adjustable distance, blur, and intensity, plus a live preview.
Shadow Distance: 8px
Blur Radius: 16px
Shadow Intensity: 0.15
Live Preview
CSS:
How to Use the CSS Neumorphism Generator
Neumorphism (soft UI) creates the look of an element gently extruded from, or pressed into, its background using two matching box-shadows — a lighter one offset up-left and a darker one offset down-right, both drawn in shades of the same base color. Pick a base background color, then tune the shadow distance, blur radius, and intensity with the sliders to preview the effect live, and copy the resulting CSS.
Example
A light gray background (#e0e5ec) with an 8px shadow distance and 16px blur produces the classic soft, pillowy neumorphic card look popularized in dashboard and mobile app UI concepts.
Common Use Cases
- Designing soft-UI buttons, cards, or toggle switches for a dashboard or app mockup.
- Prototyping a neumorphic design system component without hand-tuning shadow values.
- Creating a subtle, low-contrast visual style for calculator, settings, or media-player UI.
FAQs
- Why do both shadows need to match the background color? Neumorphism works by shading the same base color lighter and darker rather than using a contrasting shadow color, which is what makes the element look like it's carved from the same material as its background instead of floating above it.
- Why does my neumorphic element look flat or low-contrast? Neumorphism relies on subtle brightness differences, so it can naturally read as low-contrast — this is by design, but it means text and icons inside a neumorphic element need extra care to stay accessible and legible.
- Can I make an element look pressed in instead of raised? Yes — swap the technique to use
insetshadows (placing the dark shadow on the same side as the light one is flipped) to create a pressed-in, concave look instead of a raised, convex one.