How to Use the Neumorphism Generator

Start by choosing your base color — neumorphism works best with mid-tone, desaturated colors (light to medium grays, pale pastels). The generator automatically calculates a lighter and darker variant of your chosen color to produce the two-shadow combination that defines the neumorphic look.

Use the Distance slider to set how far the shadows are offset. Larger values increase the apparent elevation. The Blur slider controls the softness of the shadow edge — high blur creates a pillowy, cloud-like feel. Intensity changes how much lighter and darker the two shadow colors are relative to your base, controlling contrast. Choose from four styles: Flat (standard raised), Concave (slightly sunken center gradient), Convex (slightly raised center gradient), and Pressed (inset shadows for a pushed-in state).

What is Neumorphism?

Neumorphism (or Soft UI) is a design style that blends skeuomorphism and flat design. Elements appear to extrude from or push into the background surface using carefully calculated dual box-shadows — one light and one dark — that simulate a light source shining from the top-left corner. The result is a soft, tactile, almost physical appearance, as if UI controls were molded from soft clay or plastic.

The style was widely discussed in the design community starting in 2020, inspired by works from designers like Alexander Plyuto. Unlike glassmorphism which layers over a background, neumorphism works entirely through background-matching shadows on a uniform-color surface.

The Four Styles Explained

Flat: The standard raised look. Two outer shadows — a light one in the upper-left and a dark one in the lower-right — lift the element off the background.
Concave: The same shadow arrangement but the background of the element itself is a subtle gradient (dark top-left to light bottom-right) that makes the center appear sunken.
Convex: The inverse gradient (light top-left to dark bottom-right) makes the element appear to bulge forward, like a raised button or dome.
Pressed: The shadows are moved inside the element using the inset keyword, creating the appearance of the element being pushed into the surface — ideal for active/clicked states.

Accessibility Warning

Neumorphism has significant accessibility challenges. The very low contrast between the element and its background that defines the aesthetic often fails WCAG contrast requirements for interactive elements (3:1 for UI components). Text placed on neumorphic surfaces may also fail the 4.5:1 ratio required for normal text. Before deploying neumorphic UI, always test contrast ratios using tools like the WebAIM Contrast Checker. Consider adding borders, stronger shadows, or higher-contrast text colors to compensate for the inherently low-contrast nature of the style.

When Neumorphism Works Best

Neumorphism is best suited for single-purpose UI screens — dashboards, music players, wearable device interfaces — where visual simplicity and a tactile feel are more important than information density. It works poorly for complex content-heavy interfaces where high contrast and clear hierarchy are critical. The style is also challenging to implement for dark themes, as the dual-shadow trick requires a specific mid-tone background to be convincing.

Practical Examples

Neumorphic Card

.neu-card {
  background: #e0e0e0;
  border-radius: 20px;
  box-shadow: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff;
}

Pressed Toggle

.neu-toggle.active {
  background: #e0e0e0;
  border-radius: 12px;
  box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
}

Neumorphism CSS Generator