Neumorphism Generator

About this tool

Neumorphism — or soft UI — creates the illusion of elements extruding from or pressing into the interface surface by pairing a dark shadow in one direction with a light shadow in the opposite direction. The effect depends entirely on the element and its background sharing the same base color tone; mismatched colors break the illusion completely. The Neumorphism Generator derives the correct highlight and shadow colors automatically from the base tone you choose, using lightness offsets that produce convincing soft depth. Adjust shadow distance and blur to control the height of the extrusion, toggle inset mode for pressed states, and preview the result on its matching surface before copying the background and box-shadow declaration as a single block.

Why use it

• Paired Shadows: Neumorphism needs two box-shadows: a darker one cast down and to the right and a lighter highlight cast up and to the left. The generator writes both from the same Distance, Blur and Spread values so the pair stays symmetrical.

• Background Match: The effect only works when the element color matches its surrounding surface. The generator derives the shadow by subtracting 26 from each RGB channel of your base color and the highlight by adding 24, so the tones always come from the background you picked.

• Pressed State: Choose Inset in the Style dropdown to add the inset keyword to both shadows for pressed buttons, selected tabs, or focused inputs. The same distance and blur values apply, giving the element a sunken appearance on the same background color.

• Independent Sliders: Distance, Blur and Spread are separate controls. Larger distances with more blur produce a taller extrusion; small values create a barely-raised appearance for subtle interactive affordance.

• Live Preview: The preview renders the element on the exact background color it will use in production. This is critical because neumorphic effects are invisible on white and break entirely on mismatched colors — the live preview catches these issues before you copy the CSS.

• One-Block CSS: The generated .neu rule includes background, border-radius and box-shadow together. Background and shadows must ship together since changing the background without updating the shadows destroys the tonal relationship.

How to use

1. Pick the Background color, or click Light (#e0e0e0) or Dark (#2b2f36) for a starting surface tone
2. Drag the Distance slider (2–30px) to set how far the paired shadows offset from the element
3. Adjust the Blur (2–50px) and Spread (−10 to 12px) sliders to soften or tighten the depth
4. Choose Raised or Inset in the Style dropdown to switch between elevated and pressed states
5. Set Element size and Border radius, then check the live preview on the matching background
6. Click Copy CSS to capture the background, border-radius and box-shadow declarations together

When it helps

• When designing a soft-UI dashboard or settings panel with a flat, extruded aesthetic
• When creating tactile-feeling toggle switches, sliders, or knobs for audio or settings interfaces
• When adding a pressed-state indicator to a button using inset shadows on the same background tone
• When experimenting with neumorphic design for an experimental portfolio or creative project
• When a client requests an iOS/macOS-inspired soft-surface interface with physical depth cues
• When testing whether a neumorphic style will meet accessibility contrast requirements before committing to it

Examples

Background #e0e5ec, Distance 6px, Blur 12px, Spread 0, Border radius 20px, Style Raised

.neu {
  background: #e0e5ec;
  border-radius: 20px;
  box-shadow: 6px 6px 12px 0px #c6cbd2, -6px -6px 12px 0px #f8fdff;
}

Background #e0e5ec, Distance 4px, Blur 8px, Spread 0, Border radius 20px, Style Inset

.neu {
  background: #e0e5ec;
  border-radius: 20px;
  box-shadow: inset 4px 4px 8px 0px #c6cbd2, inset -4px -4px 8px 0px #f8fdff;
}

Dark button (#2b2f36), Distance 8px, Blur 16px, Spread 0, Border radius 20px, Style Raised

.neu {
  background: #2b2f36;
  border-radius: 20px;
  box-shadow: 8px 8px 16px 0px #11151c, -8px -8px 16px 0px #43474e;
}

Tips

• The element and its container must share the exact same background color — even a 1% lightness difference collapses the illusion
• Derive highlight color as base + 10–12% lightness and shadow color as base - 10–12% lightness for a convincing tonal pair
• Always add a visible :focus-visible outline or ring on neumorphic interactive elements since the shadow-only affordance fails keyboard and screen reader users
• Inset shadows can enhance pressed states but pair them with a color change or label shift to communicate state to all users
• Keep shadow distance under 8px for small components — larger distances look exaggerated and physically implausible at button and input scales

Frequently Asked Questions

Glossary

Neumorphism

A UI design style that simulates soft physical extrusion by pairing a dark directional shadow with a light opposing shadow on an element that shares its background color exactly.

Soft UI

Another name for neumorphism, emphasizing the gentle, low-contrast aesthetic of the shadow pairing on matching-tone backgrounds.

Inset Shadow

A box-shadow with the inset keyword that renders inside the element's border box, making it appear recessed or pressed into the surface.

Highlight Color

In neumorphism, the lighter of the two shadows — typically the base background color shifted 10–15% higher in lightness — that simulates a light source reflection above the extrusion.

Shadow Pair

The two box-shadow values used together in neumorphism: one dark shadow simulating the cast shadow, and one light highlight simulating reflected ambient light from the opposite direction.

Tonal Background

A background color in the same hue and lightness range as the element it surrounds, required for neumorphism to function. Any significant tonal mismatch breaks the soft-extrusion illusion.