Skip to content
LibraryCSS

Free browser tool

CSS Neumorphism Generator

Derive matching light and dark shadows from one surface color and export raised or inset soft-UI CSS.

Live preview

Raised

Generated code

.soft-surface {
  background: #e6e8ec;
  border-radius: 28px;
  box-shadow: 14px 14px 30px #c2c4c8, -14px -14px 30px #ffffff;
}

Controls

14px
30px
0.14
28px

A visual generator with standard output

This tool turns direct manipulation into plain CSS, SVG, HTML, or an image file. The preview and output are generated from the same state, so the code you copy describes the result on screen.

Use the output anywhere

The generated value has no LibraryCSS runtime dependency. Paste it into a stylesheet, component, prototype, or design handoff and adjust the class name to match your project.

Nothing is stored

All controls run in the browser. Values, generated text, and downloaded assets are not saved to an account or sent to a processing service.