Neumorphism Generator

Generate soft-UI neumorphism shadows with live preview.

  • 100% free
  • Private in browser
  • No signup
  • No watermarks

CSS

.neu-card {
  background: #e0e5ec;
  border-radius: 24px;
  box-shadow: rgb(186, 191, 198) 20px 20px 40px, rgb(255, 255, 255) -20px -20px 40px;
}

Rate this tool

Be the first to rate — helps others and improves this page.

About Neumorphism Generator

Neumorphism Generator creates soft extruded shadows from any base color. Adjust distance, radius, and intensity to get modern soft-UI cards for your design system.

How to use Neumorphism Generator

  1. Pick the base surface color.
  2. Adjust distance, radius, and intensity.
  3. Copy the generated CSS.

Key features

  • Light and dark shadow pair
  • Adjustable distance and blur
  • Live soft-UI preview
  • Copy-ready CSS

Frequently asked questions

What is neumorphism?
Neumorphism is a UI style where elements appear extruded from the background using twin light and dark soft shadows.