Complete Guide to Neumorphism Generator: Design Soft UI with CSS

Neumorphism — sometimes called "soft UI" — is one of the most distinctive interface design trends of the last several years. It blends the monochrome minimalism of flat design with the subtle, tactile depth of skeuomorphism, producing elements that look as if they've been extruded from (or pressed into) the surface of the screen. The result is an interface that feels calm, physical, and quietly elegant: buttons that invite a press, cards that float just above the background, and controls that respond visually before you ever touch them.

The trick behind the look is deceptively simple. Instead of relying on a single drop shadow, neumorphism layers two opposing shadows — a light one cast from one corner and a dark one cast from the opposite corner — onto an element whose background color matches the surface it sits on. This creates the illusion that the element shares the same material as the page, simply shaped into relief. Get the balance right and the effect is striking; get it wrong, and the element looks muddy, harsh, or just broken.

Balancing those two shadows by hand is the hard part. You have to pick matching light and dark tones derived from your background, tune the offsets, blur, and spread together, and then build the :active pressed state on top of that. The Neumorphism Generator removes all of that friction. Drag a few sliders, pick a background color, and watch the dual shadows — plus the inset pressed state — update live alongside copy-ready CSS.

Why Use a Neumorphism Generator?

• Instant visual feedback — every slider movement re-renders the preview immediately, so you design by eye instead of by trial-and-error in a stylesheet.
• No manual color math — the generator derives the light and dark shadow tones from your background color automatically, so the pair always reads as a cohesive light source.
• Dual shadows generated automatically — the signature light-from-one-corner, dark-from-the-opposite-corner combo is built in; you never have to hand-write two stacked shadows and balance their offsets.
• Pressed and raised states together — a default raised (extruded) state and an :active inset (pressed) state are produced side by side, ready for interactive elements.
• Copy-paste CSS — one click gives you a complete, correctly formatted declaration block, including border-radius, background, and the full multi-layer box-shadow.
• Accessible experimentation — because iteration is free and instant, you can explore subtle, moderate, and dramatic variants of the same design in seconds.

Key Features

The Neumorphism Generator exposes every parameter that defines a neumorphic surface. Here's what each control does:

Beyond the sliders, the generator always emits two CSS blocks: a default raised state and an :active pressed state with inset shadows. That means a single click gives you everything you need for an interactive element that visibly depresses when clicked.

How to Use the Neumorphism Generator

1. Open the generator — head to the Neumorphism Generator. You'll see a live preview element on one side and the control panel on the other, with the generated CSS below.
2. Set your background color — pick the surface color your design will sit on. The classic choice is #e0e5ec, but any soft, low-saturation color works. The generator derives matching light and dark shadow tones from this value.
3. Adjust the sliders — dial in Distance for how far the element extrudes, Softness for how diffuse the shadows are, and Intensity for how strong the light/dark contrast reads. Tweak Size, Width, and Height to match the element you're prototyping.
4. Copy the CSS — click the copy button to grab the full declaration block (background, border-radius, and dual-shadow box-shadow) plus the :active pressed state, then paste it straight into your stylesheet or component.

Understanding Neumorphism

To use the generator well, it helps to understand what's actually happening under the hood.

Neumorphism — a portmanteau of "new" and "skeuomorphism" — was popularized around 2020 by designer Michal Malewicz. It takes the flat, monochrome surfaces of modern minimal design and reintroduces a physical, tactile quality, but without the heavy gradients, textures, and gloss of the old skeuomorphic era. The result feels like soft plastic or clay: elements appear to be molded out of the same material as the background.

The entire effect rests on two shadows pointing in opposite directions. Imagine a single light source in the top-left corner of your screen. The element casts:

• a dark shadow toward the bottom-right (the side away from the light), and
• a light shadow (a bright highlight) toward the top-left (the side facing the light).

On a monochrome background, these two opposing shadows trick the eye into perceiving the element as a raised shape extruded from the surface itself.

.neumorphism {
  background: #e0e5ec;
  border-radius: 20px;
  box-shadow:
    10px 10px 1px [lightColor],
    -10px -10px 1px [darkColor];
}

Why background and element color must match

This is the single most important rule of neumorphism, and the one beginners most often break. For the extruded illusion to work, the element's background color must be identical to the surface it sits on. If the element is a different color, it stops looking like shaped material and starts looking like a flat card with shadows bolted on — the magic disappears. The Neumorphism Generator keeps these in sync for you, but it's worth understanding why.

Raised vs. pressed (inset) states

Flip the shadow direction inward and you get the pressed variant. By swapping the outer shadows for inset shadows, the element appears to sink into the surface rather than rise above it:

.neumorphism-pressed {
  background: #e0e5ec;
  border-radius: 20px;
  box-shadow:
    inset 5px 5px 5px rgba(0, 0, 0, 0.1),
    inset -5px -5px 5px rgba(255, 255, 255, 0.1);
}

This is why neumorphism is so compelling for interactive elements: a button can be raised by default and visibly depress into the surface on :active, giving the user immediate, physical-feeling feedback.

How it compares to other styles

• Flat design uses no shadows or depth at all — everything lives on a single plane. Clean, but can feel sterile.
• Material design uses layered elevation shadows to imply a z-axis, but elements remain clearly distinct from the background.
• Glassmorphism uses transparency and backdrop blur to create frosted-glass panels that float over colorful backgrounds.
• Neumorphism is unique in that the element and surface share the same color and material; depth comes purely from the dual-shadow relief.

Each style has its place, and they can even be combined — a neumorphic button inside a glassmorphic panel, for example.

Practical Use Cases

Dashboard Cards

Neumorphic cards feel substantial without being heavy. The matching background color lets them read as shaped panels rather than floating boxes:

.metric-card {
  background: #e0e5ec;
  border-radius: 20px;
  padding: 24px;
  box-shadow:
    8px 8px 16px #bec3c9,
    -8px -8px 16px #ffffff;
  transition: box-shadow 0.2s ease;
}

.metric-card:hover {
  box-shadow:
    5px 5px 10px #bec3c9,
    -5px -5px 10px #ffffff;
}

.metric-card:active {
  box-shadow:
    inset 4px 4px 8px #bec3c9,
    inset -4px -4px 8px #ffffff;
}

Settings Toggles

Toggles are a natural fit for neumorphism because the on/off states map perfectly to raised vs. pressed. The knob extrudes when off and sinks (or the track inverts to inset) when on:

.toggle-track {
  width: 60px;
  height: 32px;
  background: #e0e5ec;
  border-radius: 16px;
  box-shadow:
    inset 4px 4px 8px #bec3c9,
    inset -4px -4px 8px #ffffff;
}

.toggle-knob {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e0e5ec;
  box-shadow:
    3px 3px 6px #bec3c9,
    -3px -3px 6px #ffffff;
}

.toggle-knob.active {
  box-shadow:
    inset 2px 2px 4px #bec3c9,
    inset -2px -2px 4px #ffffff;
}

Media Player Buttons

Circular play, pause, and skip buttons look especially tactile in neumorphic form. A generous border-radius: 50% combined with a moderate distance sells the physical, pressable quality:

.play-button {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #e0e5ec;
  display: grid;
  place-items: center;
  box-shadow:
    6px 6px 12px #bec3c9,
    -6px -6px 12px #ffffff;
}

.play-button:active {
  box-shadow:
    inset 4px 4px 8px #bec3c9,
    inset -4px -4px 8px #ffffff;
}

Calculator Keypad

A calculator is the canonical neumorphism showcase: a grid of identical buttons that depress on tap. Keep the distance modest so the keys don't fight each other for attention:

.keypad {
  background: #e0e5ec;
  border-radius: 24px;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.key {
  background: #e0e5ec;
  border: none;
  border-radius: 14px;
  padding: 16px 0;
  font-size: 18px;
  color: #4a5568;
  box-shadow:
    5px 5px 10px #bec3c9,
    -5px -5px 10px #ffffff;
}

.key:active {
  box-shadow:
    inset 3px 3px 6px #bec3c9,
    inset -3px -3px 6px #ffffff;
}

Login Form

A login card with neumorphic inputs feels inviting and premium. The input fields use inset shadows to appear recessed, while the submit button stays raised and presses in on click:

.login-card {
  background: #e0e5ec;
  border-radius: 24px;
  padding: 40px;
  box-shadow:
    10px 10px 20px #bec3c9,
    -10px -10px 20px #ffffff;
}

.login-input {
  width: 100%;
  background: #e0e5ec;
  border: none;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow:
    inset 4px 4px 8px #bec3c9,
    inset -4px -4px 8px #ffffff;
}

.login-button {
  width: 100%;
  background: #e0e5ec;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-weight: 600;
  box-shadow:
    6px 6px 12px #bec3c9,
    -6px -6px 12px #ffffff;
}

.login-button:active {
  box-shadow:
    inset 4px 4px 8px #bec3c9,
    inset -4px -4px 8px #ffffff;
}

Best Practices

1. Keep backgrounds monochromatic. Neumorphism depends on the element and surface sharing the same color. Stick to a single soft, low-saturation hue for the whole surface — once you introduce strong color contrast, the extruded illusion breaks down.
2. Don't overuse it. An entire interface of neumorphic elements can become a sea of identical soft shapes with no visual hierarchy. Use it for focal interactive elements and pair it with flatter surfaces for contrast.
3. Ensure sufficient text contrast. Because everything lives on a soft monochrome field, text can easily fall below accessibility thresholds. Choose a text color dark (or light) enough to meet WCAG contrast ratios against your background, and verify it with a contrast checker.
4. Use color accents sparingly. A single colored accent — an active toggle, a primary button, a selected icon — can pop beautifully against a neumorphic surface. Reserve color for meaning (state, emphasis) rather than decoration.
5. Test on both light and dark themes. Neumorphism works in dark mode too, but the shadow tones must be re-derived from the dark background: darker shadows for depth, subtler highlights for the light side. What looks elegant on #e0e5ec can look muddy on #1a1d24 if you don't recalibrate.

Start Designing Soft UI Today

Neumorphism is a powerful style to have in your toolkit — tactile, modern, and surprisingly easy to achieve once you understand the dual-shadow technique. The Neumorphism Generator handles the fiddly color math and shadow balancing for you, so you can focus on the design itself. Give it a try, copy the CSS, and bring a little softness to your next interface.

Related Tools You Might Like:

• Glassmorphism Generator
• Box Shadow Generator
• CSS Animation Generator

Happy designing!