Neumorphism, or soft UI, is a style where elements look extruded from or pressed into the background. It uses a single surface color and two opposing box-shadows, one dark and one light, to simulate a soft light source.

Why must the element and parent share a color?

The effect relies on the element appearing to be part of the same material as its container. If the background behind the element differs from the element color, the twin-shadow illusion breaks and it looks like an ordinary floating card.

How are the two shadow colors chosen?

The generator reads your base color, then computes a darker shade and a lighter shade by mixing it toward black and white by the intensity percentage. The dark shade goes on the side away from the light source and the light shade on the lit side.

What is the difference between raised and pressed?

Raised uses outer shadows so the element appears to push out of the surface, ideal for buttons and cards. Pressed adds the inset keyword so the same shadows fall inside the element, making it look recessed, ideal for inputs and active states.

Is neumorphism accessible?

It can struggle with contrast because the surface and shadows are close in color, which makes borders and focus states hard to see. Use it sparingly, add clear focus outlines, and confirm any text on the surface meets a contrast ratio of at least 4.5 to 1.

What is the CSS Neumorphism Generator?

Generates CSS neumorphic (soft-UI) styles with twin box-shadow values that create raised, pressed, concave, and convex effects. Computes color-matched light and dark shadows from one base background color. Live preview and copy-paste CSS. It runs free in your browser on Gera Tools, with nothing uploaded.

CSS Neumorphism Generator

Name: CSS Neumorphism Generator
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

This generator produces neumorphic (soft-UI) CSS from a single base color. It computes matching light and dark shadows automatically and previews the result live, so you get a balanced soft-UI effect without hand-tuning hex values.

How it works

Neumorphism simulates a soft light hitting a surface of one solid color. Two box-shadow values do the work: a darker shadow on the side facing away from the light and a lighter highlight on the lit side.

The tool derives both shadow colors from your base color by mixing it toward black and toward white by the intensity percentage. The light-source setting decides the offset signs — for example a top-left light puts the dark shadow at the bottom-right and the highlight at the top-left. Distance sets the offset in pixels, and the blur is distance times your blur multiplier. Pressed mode adds the inset keyword so the shadows fall inside the element; concave and convex add a subtle linear gradient between the two shades.

.neumorphic {
  border-radius: 28px;
  background: #e0e0e0;
  box-shadow: 14px 14px 28px #bebebe, -14px -14px 28px #ffffff;
}

The four shape modes

Mode	Shadow type	Visual effect	Use case
Raised	Outer	Element appears to extrude from the surface	Buttons, cards, toggles
Pressed	Inset	Element appears recessed into the surface	Active states, pressed buttons, inputs
Concave	Outer + gradient	Sunken bowl shape with colour gradient	Input fields, photo frames
Convex	Outer + gradient	Rounded dome shape	Knobs, rounded badges

The difference between raised and pressed is the inset keyword on the box-shadow. The concave and convex modes additionally apply a linear-gradient background between the dark and light shadow colours to reinforce the depth illusion.

Worked example: button with active state

A raised button that becomes pressed when active:

/* Base (raised) */
.btn {
  border-radius: 12px;
  background: #e0e0e0;
  box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
  border: none;
  cursor: pointer;
}

/* Pressed (inset) */
.btn:active {
  box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #ffffff;
}

This pattern is commonly used for toggle switches and icon buttons in soft-UI dashboards.

Accessibility considerations

Neumorphism has an inherent contrast problem: the dark and light shadows are derived from the same surface colour, so there is never strong contrast at the element’s edge. This makes it difficult for users with low vision to identify where one component ends and another begins.

Practical mitigations:

Use neumorphism only for decorative framing (panels, backgrounds), not for interactive controls that need clear affordances.
When you do use it for buttons, add a clear focus ring with outline that uses a high-contrast colour unrelated to the surface palette.
Test with forced-colors: active (Windows High Contrast mode) — neumorphic shadows typically disappear, so you need a border or background-color fallback.
Verify that any text on the neumorphic surface meets a contrast ratio of at least 4.5:1 against the surface background, not against the shadow edge.

Tips and notes

For the illusion to hold, the element and its parent container must use the same background color. Keep intensity moderate (around 10–20%) so the shadows stay soft. Use raised for buttons and cards, pressed for inputs and active toggles. Because neumorphism has weak contrast by nature, always add visible focus outlines and verify text contrast reaches at least 4.5:1.