Neumorphism Generator

PREVIEW

.neu-shape {
  width: 200px;
  height: 200px;
  border-radius: 50px;
  background: #e0e0e0;
  box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
}

CSSSASSSCSS

Edit

Presets

Surface

Background Color:

Shape

Size

Width:

Height:

Border Radius:

Shadow

Distance:

Blur:

Intensity:

Accessibility

Icon / Text Color:

6.71:1

AA Large ✓OK for big headings and icons

AA Text ✓OK for normal body text

AAA ✗Strictest standard, best for everyone

What is a Neumorphism Generator?

Neumorphism (soft UI) creates elements that look extruded from or pressed into a single-color background, using a pair of soft light and dark shadows derived from that same color instead of a border. Pick a background color and shape, tune distance, blur, and intensity, check icon/text contrast against WCAG, preview it live, and export clean CSS, SASS, or SCSS.