Create soft UI shadow effects with full control over distance, blur, intensity, shape type, and border radius. Pick a background color and the generator automatically calculates the correct light and dark shadows for a perfect neumorphic look. Copy the CSS in one click.

Controls

<label class="nm-label">Background Color</label>
<div class="nm-color-row">
  <input type="color" id="nm-bg" value="#e0e5ec" oninput="nmUpdate()">
  <span class="nm-color-hex" id="nm-bg-hex">#e0e5ec</span>
</div>

<div class="nm-divider"></div>

<label class="nm-label">Shape Type</label>
<div class="nm-seg" id="nm-shape-seg">
  <button class="active" onclick="nmShape('flat',this)">Flat</button>
  <button onclick="nmShape('concave',this)">Concave</button>
  <button onclick="nmShape('convex',this)">Convex</button>
  <button onclick="nmShape('pressed',this)">Pressed</button>
</div>

<label class="nm-label">Element Shape</label>
<div class="nm-seg" id="nm-el-seg">
  <button class="active" onclick="nmElShape('card',this)">Card</button>
  <button onclick="nmElShape('button',this)">Button</button>
  <button onclick="nmElShape('circle',this)">Circle</button>
</div>

<div class="nm-divider"></div>

<label class="nm-label">Size <span class="nm-val" id="v-size">160px</span></label>
<input type="range" id="nm-size" min="60" max="300" value="160" oninput="nmUpdate()">

<label class="nm-label">Shadow Distance <span class="nm-val" id="v-dist">10px</span></label>
<input type="range" id="nm-dist" min="1" max="50" value="10" oninput="nmUpdate()">

<label class="nm-label">Blur <span class="nm-val" id="v-blur">20px</span></label>
<input type="range" id="nm-blur" min="1" max="100" value="20" oninput="nmUpdate()">

<label class="nm-label">Intensity <span class="nm-val" id="v-int">0.25</span></label>
<input type="range" id="nm-int" min="1" max="50" value="25" oninput="nmUpdate()">

<label class="nm-label">Border Radius <span class="nm-val" id="v-rad">16px</span></label>
<input type="range" id="nm-rad" min="0" max="60" value="16" oninput="nmUpdate()">
PREVIEW
How Neumorphism Works
Neumorphism (soft UI) creates depth by casting two shadows from a single element — one light shadow in the top-left direction and one dark shadow in the bottom-right direction, both derived from the background color. The element itself must use the same color as its container background, which is why the background color picker is the most critical control.
Key tips:
  • Keep background colors in a mid-range lightness (not too dark, not too bright)
  • Shadow intensity above 0.4 can look harsh — 0.15–0.30 is the sweet spot
  • Use Pressed shape for active states like clicked buttons or focused inputs
  • Concave and Convex use a gradient overlay to enhance the 3D illusion
  • Neumorphism works best at larger sizes — tiny elements lose the effect
Glassmorphism effects → Glassmorphism Generator
Box shadows → Box Shadow Generator
CSS buttons → CSS Button Generator