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.

CSS Neumorphism Generator

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;
}

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.