Skip to content
M2TOOLKIT

Popular tools

Menu

Neumorphism CSS Generator

Create soft, extruded UI shapes and copy the CSS.

  • Free
  • No sign-up
  • Nothing is sent or stored
Shape
180px
32px
14px
28px
15%

Neumorphism has low contrast by nature — add clear text labels and focus styles so buttons stay accessible.

The calculation happens instantly in your browser. The numbers you enter are not sent to our servers or saved.

How to use the Neumorphism CSS Generator

  1. Pick the surface colour and shape style.
  2. Adjust size, radius, distance, blur and intensity.
  3. Copy the CSS.

What does this tool do?

Neumorphism makes elements look pressed out of, or into, the background using two shadows: a lighter one towards the light source and a darker one away from it. The surface colour must match the background.

Pressed (inset) shapes work well for active buttons and inputs; convex and concave add a subtle gradient.

Why use it?

  • Four shape styles.
  • Shadows derived from your colour.
  • Live preview.

Accuracy and limits

  • Neumorphic buttons have low contrast — add labels, icons and visible focus states for accessibility.

Privacy

The calculation happens instantly in your browser. The numbers you enter are not sent to our servers or saved. There's no account to create and nothing to install.

Last reviewed by the M2Toolkit team.

Other tools people use alongside the neumorphism css generator.