CSS Neumorphism Generator

You saw that soft, clay-like UI on Dribbble — buttons that look pressed into the surface, cards that extrude like they’re molded from the background. You know it’s dual box-shadow (one light, one dark) on a matching background, but getting the shadow colors, blur radius, and distance right by hand means dozens of trial-and-error reloads. Too much contrast looks like a 3D rendering from 2005; too little and the element disappears into the background.

Why This Generator (Not the Glassmorphism Generator)

PureDevTools has a CSS Glassmorphism Generator for frosted-glass effects using backdrop-filter. This tool is specifically for neumorphism — the soft-UI style using box-shadow pairs. You configure background color, shadow intensity, blur, distance, border radius, and shape (flat, concave, convex, pressed), see the result live, and copy production CSS. Everything runs in your browser; no data is sent anywhere.

What Is Neumorphism?

Neumorphism (a portmanteau of “new” and “skeuomorphism”) is a UI design style that makes elements appear to extrude from or be pressed into the background surface. Elements look tactile and three-dimensional — like soft plastic or clay — using carefully calibrated CSS box-shadow.

Unlike glassmorphism (which uses backdrop-filter), neumorphism requires no special browser APIs. It uses only box-shadow and a matching background color, making it supported in every modern browser.

The technique was popularised by the designer Alexander Plyuto in 2019 and became widely adopted in design communities for dashboards, app UIs, and landing pages.

How CSS Neumorphism Works

The effect relies on two simultaneous box-shadows on an element whose background exactly matches the parent container:

.neumorphism {
  background: #e0e5ec;
  border-radius: 12px;
  box-shadow:
    -8px -8px 20px #ffffff,   /* light highlight: top-left */
     8px  8px 20px #b3b7bd;  /* dark shadow: bottom-right */
}

/* Parent must share the same background */
.neumorphism-container {
  background: #e0e5ec;
}

The light source is simulated in the top-left corner:

• Light shadow (-x, -y): a lighter-than-background color offset toward top-left — simulates light hitting the surface
• Dark shadow (+x, +y): a darker-than-background color offset toward bottom-right — simulates the shadow cast away from the light source

The Four Shape Variants

Flat (Default)

Standard raised surface using outset shadows. The most common neumorphic look:

.flat {
  background: #e0e5ec;
  box-shadow: -8px -8px 20px #e6eaf0, 8px 8px 20px #b3b7bd;
}

Concave

Simulates a bowl-shaped surface by combining outset shadows with a darker-to-lighter gradient background:

.concave {
  background: linear-gradient(145deg, #d4d9e0, #eaeef4);
  box-shadow: -8px -8px 20px #e6eaf0, 8px 8px 20px #b3b7bd;
}

Convex

Simulates a dome-shaped surface by reversing the gradient direction (lighter top-left → darker bottom-right):

.convex {
  background: linear-gradient(145deg, #eaeef4, #d4d9e0);
  box-shadow: -8px -8px 20px #e6eaf0, 8px 8px 20px #b3b7bd;
}

Pressed

Simulates the element being pushed into the background surface using inset shadows — the standard look for neumorphic input fields and active states:

.pressed {
  background: #e0e5ec;
  box-shadow: inset 8px 8px 20px #b3b7bd, inset -8px -8px 20px #e6eaf0;
}

Choosing the Right Background Color

Neumorphism is most effective on medium-light neutral backgrounds. The shadows need contrast to be visible:

Rule of thumb: pick a background that is neither too light nor too dark — somewhere in the L (lightness) range of 30%–85% works well.

Shadow Intensity

Shadow intensity controls how far apart the light and dark shadow colors are from the base background:

• Low (5–10%): very subtle, barely visible shadows — suitable for minimal UIs
• Medium (15–25%): balanced neumorphism — the sweet spot for most designs
• High (35–50%): dramatic, high-contrast shadows — can look harsh on very light backgrounds

The intensity is applied symmetrically: the light shadow moves toward white and the dark shadow moves toward black by the same factor.

Shadow Blur and Distance

Two parameters control the shadow softness and reach:

A good starting ratio is distance ≈ blur / 2. For example: blur=20px, distance=8px.

Setting distance higher than blur can make the shadows look sharp and angular — which may be intentional for some designs.

CSS Implementation Examples

Card Component

.card {
  background: #e0e5ec;
  border-radius: 16px;
  padding: 24px;
  box-shadow: -8px -8px 20px #e6eaf0, 8px 8px 20px #b3b7bd;
}

Button with Active State

.button {
  background: #e0e5ec;
  border-radius: 8px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  box-shadow: -4px -4px 10px #e6eaf0, 4px 4px 10px #b3b7bd;
  transition: box-shadow 0.15s ease;
}

/* Active/pressed state */
.button:active {
  box-shadow: inset 4px 4px 10px #b3b7bd, inset -4px -4px 10px #e6eaf0;
}

Input Field

Inputs are always pressed in neumorphic UIs — they look like they are recessed into the surface:

.input {
  background: #e0e5ec;
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  outline: none;
  box-shadow: inset 4px 4px 8px #b3b7bd, inset -4px -4px 8px #e6eaf0;
}

.input:focus {
  box-shadow:
    inset 4px 4px 8px #b3b7bd,
    inset -4px -4px 8px #e6eaf0,
    0 0 0 2px #6366f1; /* focus ring */
}

Toggle / Switch

.toggle-track {
  background: #e0e5ec;
  border-radius: 50px;
  box-shadow: inset 3px 3px 6px #b3b7bd, inset -3px -3px 6px #e6eaf0;
}

.toggle-thumb {
  background: #e0e5ec;
  border-radius: 50%;
  box-shadow: -2px -2px 5px #e6eaf0, 2px 2px 5px #b3b7bd;
}

Dark Mode Neumorphism

Neumorphism works on dark backgrounds too. For a dark background, you need appropriate light and dark shadow colors:

.dark-card {
  background: #2d3748;
  border-radius: 16px;
  /* Light shadow: lighter than background */
  /* Dark shadow: darker than background */
  box-shadow: -6px -6px 16px #3d4f65, 6px 6px 16px #1d2535;
}

When using this generator, simply set your background color to a dark value (e.g., #2d3748) and the shadow colors will be computed automatically.

Using Neumorphism in Tailwind CSS

Tailwind CSS does not have built-in utilities for neumorphic shadows, but you can use arbitrary values:

<!-- Flat neumorphism (Tailwind v3+) -->
<div class="bg-[#e0e5ec] rounded-xl shadow-[−8px_−8px_20px_#e6eaf0,_8px_8px_20px_#b3b7bd]">

<!-- Or add to tailwind.config.js -->

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'neu-flat':    '-8px -8px 20px #e6eaf0, 8px 8px 20px #b3b7bd',
        'neu-pressed': 'inset 8px 8px 20px #b3b7bd, inset -8px -8px 20px #e6eaf0',
      },
    },
  },
}

<div class="bg-[#e0e5ec] shadow-neu-flat rounded-xl p-6">Card</div>
<input class="bg-[#e0e5ec] shadow-neu-pressed rounded-lg p-3" />

Accessibility Considerations

Neumorphism has known accessibility challenges:

1. Contrast ratio: Soft shadows can make interactive elements hard to distinguish. Always add a focus indicator (:focus-visible ring) on interactive elements.
2. Depth perception: Users with low vision may not perceive the subtle depth cues. Consider adding explicit borders or labels for important UI elements.
3. Color alone: Don’t rely solely on shadow depth to indicate state — add text labels or icons for button states.

/* Accessible focus indicator for neumorphic buttons */
.button:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 3px;
}

Browser Support

box-shadow with multiple values and inset is universally supported in all modern browsers. No vendor prefixes are required.

Frequently Asked Questions

Why does my neumorphism effect look flat? The most common cause is that the element’s background doesn’t match the parent container’s background. Both must be exactly the same color. For example, if your page background is #e0e5ec, the neumorphic element must also have background: #e0e5ec. If they are different, the illusion breaks.

Can neumorphism be used for entire page backgrounds? Neumorphism works best for individual components (cards, buttons, inputs) rather than full-page layouts. An entire page done in neumorphism can feel visually overwhelming. Use it selectively for interactive and focal elements.

What is the difference between neumorphism and skeuomorphism? Skeuomorphism imitates real-world materials and textures with high-fidelity textures (gradients, reflections, textures). Neumorphism is more minimal — it only uses subtle shadows to suggest depth and physicality without detailed texture work.

How do I animate a button being pressed in neumorphism? Transition between the outset (flat) and inset (pressed) box-shadow on :active:

.button { box-shadow: -4px -4px 10px #light, 4px 4px 10px #dark; transition: box-shadow 0.1s ease; }
.button:active { box-shadow: inset 4px 4px 10px #dark, inset -4px -4px 10px #light; }

Does this tool send my data to a server? No. All CSS generation and preview rendering happens entirely in your browser. No data is transmitted to any server.