FreeDev Tools

Neumorphism Generator

Soft-UI neumorphic shadows — flat, pressed, or convex — with tuned dual shadows.

.neu {
  width: 140px;
  height: 140px;
  border-radius: 24px;
  background: #e0e5ec;
  box-shadow: 10px 10px 20px #bbc0c7,
              -10px -10px 20px #ffffff;
}

/* Works best when the page background is #e0e5ec */

Generated locally in your browser — nothing is uploaded.

How to Use

  1. 1

    Set the surface color

    Shadows are computed from it — light and dark pairs.

  2. 2

    Pick a shape

    Flat, pressed, convex, or concave; tune distance and intensity.

  3. 3

    Copy the CSS

    Use it on a page with the same background color.

Frequently Asked Questions

The soft-extruded UI style: elements appear pressed out of (or into) the background using paired light and dark shadows on a surface the same color as the page. The generator computes the shadow pair from your surface color.

Related Tools

CSS Gradient GeneratorBuild linear and radial CSS gradients visuallyBox Shadow GeneratorCreate CSS box shadows with a live previewBorder Radius GeneratorGenerate CSS border-radius values visuallyFlexbox GeneratorBuild CSS flexbox layouts with a visual editorCSS Grid GeneratorBuild CSS grid layouts with a visual editorText Shadow GeneratorGenerate CSS text-shadow effects with live previewCSS Animation GeneratorCreate CSS keyframe animations with a live editorClip-Path GeneratorGenerate CSS clip-path polygon shapes visually