Open menu

CSS Neumorphism Generator

Create soft UI (neumorphism) surfaces from a single base color. Choose flat, concave, convex or pressed, set the light direction with a dial, and adjust distance, blur and intensity. Neumorphism is known for low contrast, so the checks are honest about it, and an accessible-edge option adds a border with 3:1 contrast. 20 presets; export CSS, SCSS or Tailwind.

Preset gallery
Soft UI

Accessibility checks

  • Check Soft UI only separates the element by subtle shadows (1.4:1). For buttons and inputs, turn on the accessible edge or add another visual cue.
  • Pass Text has 8.2:1 contrast with the surface, which meets WCAG AA.
  • Check If this is a button, use the Pressed shape for its active state, and add a clear focus ring: shadows alone are easy to miss.

Export code

/* Place it on a parent with background: #E0E5EC; */
.neu {
  background: #E0E5EC;
  border-radius: 24px;
  box-shadow: 8px 8px 24px #BEC3C9, -8px -8px 24px #EEF1F5;
  color: #334155;
}
Favourites on this device (0)

No favourites yet.

Shape & light
Shape
Colors
Base color
Text color

How to use the neumorphism generator

  1. Choose a base color. The element and its parent share it.
  2. Pick a shape: flat for cards, convex for buttons, concave for wells and dials, pressed for active states.
  3. Set the light with the dial, then adjust distance, blur and intensity.
  4. Turn on the accessible edge for anything people need to find and press.
  5. Copy the CSS, and set the parent’s background to the same base color.

Design tips

  • Use soft UI for decorative surfaces and grouped controls, not for every button.
  • Combine the pressed shape with a color or icon change, so states don’t rely on shadows alone.
  • Add a visible focus outline. Soft shadows are easy to miss for keyboard users.
  • Keep text dark enough: the text check needs 4.5:1 for body copy.

How the colors are calculated

The light shadow is the base color mixed towards white, and the dark shadow is the base mixed towards black. The intensity controls how far they move. The distance sets the shadow offsets along the light direction, and blur controls the softness.

Worked examples

Example 1: a music player control

Load Dome for the large play button and Bowl for the volume dial around it, both on the default #E0E5EC base. The convex button appears to rise out of the surface, and the concave dial looks carved in. Turn on the accessible edge for the play button so its outline is clear for everyone.

Example 2: a toggle with clear states

Use Classic for the off state and Pressed for the on state, and add a color change to the icon or label as well. Soft shadows alone make it hard to tell states apart, so the second cue matters.

Example 3: a dark smart-home panel

Load Dark: a #1E293B base with higher intensity (0.35) so the light shadow still shows against a dark surface. Use light text (#E2E8F0) and keep cards large and well spaced. Soft UI needs breathing room between elements to read well.

Common mistakes

  • Low-contrast text: grey text on a grey surface is the most common neumorphism failure.
  • A different background on the parent: the effect only works when the element and its surroundings share the base color.
  • Inconsistent light direction: keep one direction across the interface.

Frequently asked questions

How does neumorphism work?

The element has the same color as its background. Two shadows, a lighter one towards the light source and a darker one away from it, make it look extruded from the surface. Concave and convex shapes add a subtle gradient, and the pressed shape uses inset shadows.

Why is neumorphism criticized for accessibility?

The element is separated from the background only by soft shadows, which usually have well under 3:1 contrast. People with low vision may not see where a button starts and ends, and pressed and unpressed states can look alike. The accessible-edge option and a clear focus ring fix most of this.

Which background color should I use?

Mid-light colors work best, because both the lighter and the darker shadow need room to show. Very light or very dark bases leave no room for one of them. Raise the intensity for dark themes.

What does the light direction change?

It sets where the light comes from: 315° means top-left, the classic choice. The light shadow appears on that side and the dark shadow on the opposite side. Keep the same direction across a whole interface.

Can neumorphism work in dark mode?

Yes, with a dark background a little lighter than black, so the dark shadow can still show. Pure black leaves nowhere darker for the shadow to go.

Sources