Neumorphism Generator

About Neumorphism

Neumorphism (or Soft UI) is a modern visual design trend that creates the illusion of elements being extruded from or pressed into the background surface. It achieves this with dual box-shadows — one light and one dark — applied to elements that share the same color as their parent background. The result is a soft, tactile aesthetic that became popular in UI design around 2020.

While it looks complex, neumorphism relies entirely on the CSS box-shadow property. This generator lets you configure every variable — base color, element size, shadow distance, blur radius, intensity, and shape type — then copies the exact CSS needed to recreate it in your project.

How to Use This Tool

1. Pick a Base Color: Select the background color your element will share with its parent container.
2. Adjust Size & Distance: Control the element's size and how far the shadows are offset from the element.
3. Set Blur & Intensity: Fine-tune the softness and contrast of the shadow for the ideal visual effect.
4. Choose Shape: Select between Flat, Concave, Convex, or Pressed shapes for different UI states.
5. Copy the CSS: Click "Copy CSS" to grab the generated style and paste it into your stylesheet.