Free tool

Neumorphism Generator

Create soft UI styles with a dual shadow (light + dark), raised and pressed variants. Tune the light angle and copy the CSS.

Raised
Pressed
.neu {
  background: #e0e5ec;
  border-radius: 32px;
  box-shadow:
    10px -7px 24px #ffffff,
    -10px 7px 24px #c1c5cb;
}

.neu-pressed {
  background: #e0e5ec;
  border-radius: 32px;
  box-shadow: inset 10px -7px 24px #ffffff,
    inset -10px 7px 24px #c1c5cb;
}

Built by

Miguel Ángel Colorado Marin (MACM)

Full-Stack Developer · Guadalajara, España

I develop web apps, digital tools and full projects — from design to deployment.

GitHubLinkedInBuy me a coffee
Contact me

Neumorphism (or "soft UI") is a design style where elements look extruded from the background itself: a card doesn't float over the surface, it comes out of it. It's achieved with two simultaneous shadows — a light one towards the light source and a dark one on the opposite side — over a background exactly matching the elements'. This tool calculates both shadows from your base color, light angle and chosen intensity, generating ready-to-paste .neu (raised) and .neu-pressed (pressed) classes. The pressed variant is perfect for toggles, sliders or active form fields.

Features

  • ✓Raised and pressed variants included
  • ✓Light angle, distance, blur and intensity
  • ✓Any base color with auto-calculated shadows
  • ✓Preview over the real background color
  • ✓100% in browser, no sign-up

How to generate a neumorphism style?

  1. 1

    Pick the base color

    Background and element must share the exact same color.

  2. 2

    Tune light and depth

    Angle, distance, blur and intensity of the double shadow.

  3. 3

    Compare raised and pressed

    The preview shows both variants at once.

  4. 4

    Copy the CSS

    Paste .neu and .neu-pressed into your stylesheet.

Frequently asked questions

Does neumorphism meet accessibility standards?

With care: since elements share the background color, border contrast is nearly zero. Always give text and interactive elements enough contrast on their own, plus visible keyboard focus states.

Why do my shadows look dirty gray?

Pure black shadows break the effect. This tool darkens and lightens your own base color, keeping the hue consistent; if you change the base color afterwards, re-copy the CSS.

Is anything uploaded to a server?

No, the code is generated by combining your options directly in your browser.

Related tools

Glassmorphism Generator

Frosted-glass effect with blur and transparency.

CSS Box Shadow Generator

CSS shadows with multiple layers and live preview.

CSS Loader Generator

Animated spinners in pure CSS.

Color Converter

HEX, RGB, HSL and WCAG contrast.

Embed Neumorphism Generator on your site

Add Neumorphism Generator to any web page with a simple iframe. Free, with attribution to miguelacm.es.

<iframe
  src="https://miguelacm.es/embed/neumorphism-generator"
  width="100%"
  height="700"
  frameborder="0"
  title="Neumorphism Generator — miguelacm.es"
></iframe>
View embed in new tab →
View source on GitHub