Neumorphism (soft UI) combines a light and a dark shadow on an element the same color as its background, so it appears raised or sunken.

Is neumorphism accessible?

Low contrast is its weakness. Use it for decoration and make sure text and controls still meet WCAG contrast.

Can I copy the generated CSS?

Yes. Click Copy CSS to put the code on your clipboard, or Download CSS to save a .css file. You can also edit the code by hand before copying.

Is anything uploaded to a server?

No. The CSS is generated in your browser from the settings you choose. The tool keeps working offline once the page has loaded.

Can I share my design?

Yes. The page address updates as you change settings, so the Share button copies a link that restores your exact configuration.

CSS Neumorphism Generator

Pick a base color and let the tool compute the light and dark shadows that make soft UI elements look extruded or pressed into the surface.

Last updated: 2026-07-21 · Runs 100% in your browser

// controls

Presets

Base color

Size180px

Radius32px

Distance14px

Blur28px

Intensity12%

Shape

Live preview

Generated CSS

.neumorphic {
  width: 180px;
  height: 180px;
  border-radius: 32px;
  background: #e0e5ec;
  box-shadow:
    14px 14px 28px #b9c5d4,
    -14px -14px 28px #ffffff;
}

// Example output

.neumorphic {
  width: 180px;
  height: 180px;
  border-radius: 32px;
  background: #e0e5ec;
  box-shadow:
    14px 14px 28px #b9c5d4,
    -14px -14px 28px #ffffff;
}

// Features

▸Flat, concave, convex and pressed
▸Distance, blur and intensity
▸Automatic light/dark shades
▸Radius and size controls
▸Copy-ready CSS

// How to use

01Adjust the controls on the left or pick a preset to start the CSS Neumorphism Generator.
02Watch the live preview update instantly as you change each setting.
03Fine-tune the generated CSS by hand in the code panel if you like.
04Click Copy CSS or Download CSS, or Share to send a link to your design.