Neumorphism Generator

Generate soft-UI elements with auto-derived light and dark shadows from any base color — flat, concave, convex or pressed, with a movable light source. Export CSS or Tailwind.

Preview

Click a sun to move the light source. The stage shares the element's color — that's what makes the effect work.

Surface

Base color

Size200px

Radius40px

Distance16px

Intensity50%

Blur32px

Auto blurKeeps blur at 2× distance — the classic soft-UI ratio.

Export

Remember: the parent surface must share the base color.

.neumorphic {
  border-radius: 40px;
  background: #e0e0e0;
  box-shadow: 16px 16px 32px #bababa, -16px -16px 32px #ffffff;
}

/* The parent must share the same background for the effect to work */
.neumorphic-surface {
  background: #e0e0e0;
}