BluebirdBluebird
Home/Neumorphism CSS Generator

Neumorphism CSS Generator

Design soft-UI (neumorphism) buttons and cards with a live preview and copy-ready CSS. Flat, pressed, concave or convex.

  • Runs in your browser
  • No upload on server
  • Free, forever
  1. Pick input
  2. Tweak
  3. Copy / export
How this works
  1. 1
    Tune shadows & radius

    Move sliders for depth, radius and softness. Preview the pill or button live.

  2. 2
    Match your bg colour

    Neumorphism only works when shadows match the background — set both here.

  3. 3
    Copy the CSS

    Paste the box-shadow rule into your button or card.

Watch: soft shadows form on a button
copy
Style
Copy this CSS
border-radius: 50px;
background: #e0e5ec;
box-shadow: 20px 20px 40px #d1d6dd, -20px -20px 40px #eff4fb;
Live preview matches exactly what you'll paste into your CSS.
How this works
  • Pick a background colour and style.
  • Tune the size, radius, distance and blur.
  • Copy the CSS and drop it into your project.

Rate Neumorphism CSS Generator

One tap. Anonymous. Helps others find the good tools.

No account, no email, no tracking — just a 1–5 number.

Be the first to rate