UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

Neumorphism Generator

Craft soft extruded or inset soft UI shadows tuned for light and dark surfaces.

About Neumorphism Generator

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 Neumorphism Generator

Paired Shadows

Neumorphism requires exactly two box-shadows: one dark shadow cast downward and one light highlight cast upward. The generator creates both shadows at the correct offset, opacity, and color relationship so the two-shadow pair reads as genuine soft depth rather than a random shadow stack.

Background Match

The effect only works when the element color exactly matches its surrounding surface. The generator derives highlight and shadow colors as automatic lightness offsets from your chosen base, ensuring the shadows blend into the background correctly without manual tonal calculation.

Pressed State

Toggle the inset switch to flip both shadows inward for pressed buttons, selected tabs, or focused inputs. The same distance and blur values apply but the shadow directions reverse, giving the element a convincingly sunken appearance on the same background color.

Distance Control

A single distance slider controls both shadow offset and blur proportionally so the shadows stay physically consistent. Larger distances with proportionally higher 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 output includes both the background-color and box-shadow in a single copyable block. Background and shadows must ship together since changing the background without updating the shadows destroys the tonal relationship.

How to use Neumorphism Generator

Set the base background color using the color picker — this determines the surface tone for all shadows
Drag the distance slider to increase or decrease how far the paired shadows offset from the element
Adjust the blur radius to soften or sharpen the soft-UI depth illusion
Toggle Raised or Pressed (inset) to switch between elevated and pushed-in states
Preview the element against the matching background color to evaluate the soft-UI effect
Click Copy CSS to capture the background-color and box-shadow declaration together

When to use Neumorphism Generator

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

Raised soft card

Input: Base color: #e0e5ec, distance: 6px, blur: 12px, raised state

Output: background: #e0e5ec; box-shadow: 6px 6px 12px #b8bec7, -6px -6px 12px #ffffff;

Pressed inset button

Input: Base color: #e0e5ec, distance: 4px, blur: 8px, inset state

Output: background: #e0e5ec; box-shadow: inset 4px 4px 8px #b8bec7, inset -4px -4px 8px #ffffff;

Dark neumorphism

Input: Base color: #2d2d34, distance: 8px, blur: 16px, raised state

Output: background: #2d2d34; box-shadow: 8px 8px 16px #1f1f24, -8px -8px 16px #3b3b44;

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

What is neumorphism and why is it controversial?▾

Neumorphism is a UI style that simulates physical extrusion from a surface using paired light and dark shadows. It is controversial because the resulting low contrast between elements and their background makes it extremely difficult for users with low vision to perceive interactive affordances, failing WCAG accessibility standards.

How do I pick the right background color for soft UI?▾

Neutral mid-tone grays in the #d0d8e4 to #e8edf5 range are the classic neumorphic palette. Very light or very dark backgrounds reduce the shadow depth contrast. The generator's base color picker works best in the 60–85% lightness range for light mode and 15–30% for dark mode.

Why does neumorphism have accessibility issues?▾

The style requires element and background colors to match closely, which inherently reduces the contrast ratio between interactive components and their surface. WCAG 2.1 AA requires 3:1 contrast for large UI components. Neumorphic designs rarely meet this threshold without additional visual cues.

How are pressed and raised states styled?▾

Raised (default) uses outward box-shadows — one dark shadow below-right and one light shadow above-left — to simulate extrusion. Pressed uses inset shadows flipping both directions inward, making the element appear to sink into the surface.

Can I use neumorphism in dark mode?▾

Yes. The generator's dark-mode neumorphism uses a dark base color with appropriately dark shadows (nearly black) and lighter highlights (slightly lighter than the base, not pure white). Dark neumorphism typically looks more subtle than the light variant.

Why does my element disappear into the background?▾

This happens when the element background does not exactly match the parent surface color, causing the shadows to not integrate correctly. Ensure you copy both the background-color and box-shadow as a unit and that the surrounding surface uses the same exact color.

How is neumorphism different from skeuomorphism?▾

Skeuomorphism mimics real-world objects with textures, gradients, and detailed material rendering (like leather or brushed metal). Neumorphism is more abstract — it uses only color-derived shadows on a flat, untextured surface to suggest physical extrusion, without any representational textures.

Should I use neumorphism for production buttons?▾

Generally no, unless you have tested it with real users including those with visual impairments and you supplement the shadow affordance with additional cues like labels, icons, or color changes on interaction. Most accessibility guidelines advise against neumorphism as a sole interactive indicator.

Explore the category

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.