CSS Neumorphism Generator

Create soft UI neumorphic elements with live preview. Adjust color, size, blur, and shape — copy the ready-to-use CSS instantly.

Colors

Background Color
Dark Shadow
#babfc6
Light Shadow
#ffffff

Shape

Properties

Size 150px
Border Radius 20px
Distance / Offset 20px
Intensity 0.15
Blur 60px

Preview

CSS Output

.element {
  background: #e0e5ec;
  border-radius: 20px;
  box-shadow: 20px 20px 60px #babfc6,
       -20px -20px 60px #ffffff;
}

About the CSS Neumorphism Generator

The CSS Neumorphism Generator lets you create soft UI elements visually with a live preview — no CSS expertise required. Neumorphism (also called Soft UI) is a modern design trend that uses carefully crafted box-shadow pairs to make UI elements appear as if they are extruded from or pressed into the background surface.

The technique relies on two shadows: a dark shadow placed at the bottom-right and a lighter shadow at the top-left. The background color of the element must match its container for the effect to work. This tool computes both shadow colors from a single base color and lets you fine-tune distance, blur, intensity, shape, and border radius in real time.

How to Generate a Neumorphic CSS Effect

  1. Pick a Background Color — this is the base color for both the element and the container.
  2. Choose a Shape: Flat, Concave, Convex, Pressed, or Inset.
  3. Adjust Size to set the preview element's dimensions.
  4. Set Border Radius — use a high value (e.g. half of size) for a circle, or a low value for a card/button.
  5. Increase Distance for a more pronounced shadow depth effect.
  6. Tune Intensity to control how light or dark the shadow colors become.
  7. Use Blur to soften the shadow edges — higher values create a more diffuse look.
  8. Click Copy CSS to grab the finished styles and paste them into your project.

Neumorphism Shape Types Explained

  • Flat — The default style. Two outer shadows create a raised, card-like appearance on the surface.
  • Concave — A gradient background darkens the center of the element, creating a hollow, inward-curving look.
  • Convex — A gradient background lightens the center, giving the element a dome or bubble appearance.
  • Pressed — Uses inset shadows to simulate a button being pushed into the surface.
  • Inset — Similar to pressed, but commonly used on input fields and text areas to create a recessed, editable area.

Frequently Asked Questions

What is Neumorphism?

Neumorphism (short for New Skeuomorphism) is a UI design style that simulates physical depth using matched background colors and dual box-shadow values — one dark and one light — to create elements that appear to rise from or sink into the page surface.

Why must the element background match the container?

The illusion of depth in neumorphism depends on the element blending with its surroundings. If the element's background differs from its container, the shadow contrast breaks and the effect no longer looks like it is extruded from the surface.

How are the shadow colors calculated?

The generator takes your chosen base color, converts it to RGB, then subtracts the intensity factor from each channel to produce the dark shadow color and adds it to produce the light shadow color. Both colors are clamped to the valid 0–255 range.

What is a good background color for neumorphism?

Neumorphism works best with neutral mid-tone colors — light grays such as #e0e5ec or #d1d5db are the most common. Avoid pure white or very dark backgrounds, as there is not enough room to lighten or darken the shadow colors effectively.

Is neumorphism accessible?

Neumorphism can present accessibility challenges because the low-contrast shadows used to define element boundaries may be difficult to perceive for users with low vision. When using neumorphic styles in production, ensure that interactive elements also have sufficient color contrast and are clearly identifiable without relying solely on the shadow effect.

Can I use neumorphism on dark backgrounds?

Yes — dark neumorphism uses the same two-shadow technique but on a dark base color. The dark shadow becomes near-black and the light shadow becomes a slightly lighter shade of the base. This generator supports any color, so try a dark gray like #2d2d2d for a dark mode variation.