WebToolsPlanet
css Tools

Neumorphism Generator

Create soft UI neumorphic box-shadow effects — configure shape, blur, distance, and intensity with live CSS preview.

Last updated: March 25, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is Neumorphism Generator?

Neumorphism (also called "Soft UI") is a UI design language that emerged around 2020, creating the visual illusion of elements that appear to be sculptured from the background surface — as if elements are plastic extrusions pushing out from or sinking into the background. Unlike flat design (elements float above with drop shadows) or skeumorphism (photorealistic textures), neumorphism uses two box-shadows on the same background color — a lighter shadow in one direction and a darker shadow in the opposite direction — to simulate a single curved light source illuminating a soft, unified surface.

The CSS implementation uses: box-shadow: [positive offset] [blur] [lighter color], [negative offset] [blur] [darker color]. For a light source coming from the top-left, a 6px 6px blur with a lighter color (lighter than background) on the bottom-right and a darker color on the top-left creates the extruded "raised" effect. Reversing the shadow positions creates the "inset" pressed state. The effect only works when the element color exactly matches the background — hence why neumorphism requires careful color pairing.

How to Use Neumorphism Generator

1

Choose a background color for both the element and page background (muted grays and pastels work best)

2

Select the shape variant: Flat (default raised), Concave (dish-shaped), Convex (dome-shaped), or Pressed (inset)

3

Adjust the shadow Distance (how far the shadows offset from the element center)

4

Set the Blur radius (how soft the shadows appear — higher values create softer, more subtle effects)

5

Configure Intensity (how strong the shadow contrast is) then click "Copy CSS" for the complete box-shadow declaration

Common Use Cases

  • Creating a soft-UI card component for a music player or smart home dashboard
  • Designing a toggle switch with a pressed/released state using concave vs convex variants
  • Building a calculator interface with tactile-looking button elements
  • Designing a smartwatch or IoT device UI mockup with physical depth
  • Creating a settings panel with input fields that appear sunken into the background
  • Styling a sidebar navigation with depth cues that make it feel grounded
  • Designing the pressed state of a button to give tactile feedback visual anchor
  • Creating a minimal card layout for a portfolio with subtle depth without harsh drop shadows

Example Input and Output

CSS for a raised neumorphic card on a gray background:

Configuration
Background color: #e0e0e0 (light gray)
Shape: Flat (raised)
Distance: 6px
Blur: 12px
Intensity: Medium
Generated CSS
/* Neumorphic Card — Raised */
.card {
  background: #e0e0e0;
  border-radius: 16px;
  box-shadow:
    6px 6px 12px #bebebe,   /* dark shadow — bottom-right */
    -6px -6px 12px #ffffff; /* light shadow — top-left */
}

/* Pressed state (for interactive elements) */
.card:active {
  box-shadow:
    inset 6px 6px 12px #bebebe,
    inset -6px -6px 12px #ffffff;
}

Client-Side Processing

All CSS generation and live preview happen in your browser. No configuration data is sent to our servers.

Dark Mode Neumorphism

Dark neumorphism uses the same principle on dark backgrounds: background: #2d2d2d; box-shadow: 6px 6px 12px #1e1e1e, -6px -6px 12px #3c3c3c. The dark shadow becomes near-black and the light shadow becomes a slightly lighter dark. Dark neumorphism is actually more readable than light neumorphism for many users because the shadow contrast ratio is more achievable on dark surfaces.

Performance Note

Box-shadows with large blur values can trigger GPU repaints on scroll or animation. Avoid animating box-shadow directly — it forces layer composition. Instead, animate opacity on a ::before pseudo-element overlay, or precompute two shadow states and transition between them for smoother performance.

Frequently Asked Questions

Why must the element color match the background?
Neumorphism creates illusion of depth by making two shadows (lighter and darker than the background) appear to emerge from behind the element. If the element is a different color from the background, the shadows are inconsistent with the surface — the "extruded from the same material" illusion collapses. This is neumorphism's main design constraint: the entire UI must share a single background color.
Is neumorphism accessible?
Neumorphism has significant accessibility concerns. The low-contrast shadow cues that create depth are invisible to users with low vision. WCAG 2.1 AA requires 4.5:1 text contrast and 3:1 for interactive element boundaries — neumorphic elements often fail both because they rely on shadow for definition rather than borders or high-contrast backgrounds. Avoid using neumorphism exclusively for interactive element states; always provide an additional visual indicator (outline, text label, icon change) for interactive elements.
What background colors work best for neumorphism?
Muted mid-tones work best: light grays (#e0e0e0 to #f5f5f5), pastel blues (#dde8f0), off-whites. Very dark or very light backgrounds have less room for shadow contrast: #ffffff leaves no room for a lighter highlight shadow; #000000 leaves no room for a darker shadow. The ideal background has a medium-light luminosity with enough room for both a 20% lighter and 20% darker shadow color.
How do I create the "pressed" state for a button?
Switch the outer box-shadow to an inset box-shadow: box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #ffffff. The inset keyword makes the shadow appear inside the element boundary, creating the visual impression of the element being pushed into the surface — perfect for :active state or activated toggle states.
What is the difference between flat, concave, and convex shapes?
Flat (raised): standard dual box-shadow with no background gradient — element appears to protrude uniformly from the surface. Concave: adds a gradient background (lighter in center) that makes the surface appear to curve away like a bowl — the center appears recessed. Convex: adds a gradient background (lighter offset based on light source) making the surface appear to dome outward like a button cap. Pressed: inset shadows that make the element appear pushed below the surface.
Should I use neumorphism for production UI?
For mainstream products targeting broad audiences: limit neumorphism to decorative elements and supplement every interactive element with accessible contrast indicators. For niche products (smart device dashboards, luxury apps, portfolio showcases) targeting design-conscious users in controlled environments, neumorphism can work well. The trend peaked around 2020-2021 — many designers now use it sparingly as an accent rather than a full UI language, or combine it with glassmorphism for more modern depth effects.

How This Tool Works

The tool calculates shadow colors by lightening and darkening the selected background color by a configurable percentage. Using HSL color space: the light shadow increases lightness by the intensity %, and the dark shadow decreases lightness by the same %. Offset values (x/y) are set from the Distance slider. Blur value is set from the Blur slider. For concave and convex shapes, a CSS gradient is added to the background property alongside the box-shadows. The final CSS declarations are assembled and displayed for copy.

Technical Stack

HSL color lightness manipulationCSS box-shadow compositionCSS radial-gradient for shape variantsClient-side only

Related Tools

CSS Unit Converter
Convert between PX, REM, EM, VW, VH, and % CSS units — with configurable base font size and live conversion.
Box Shadow Generator
Create CSS box shadows with a visual editor.
CSS Gradient Generator
Create beautiful CSS gradients with a visual editor.
Border Radius Generator
Create complex CSS border-radius shapes with independent corner controls — from rounded buttons to organic blobs.
Flexbox Generator
Build CSS Flexbox layouts visually — configure every container and item property and get ready-to-use CSS.
CSS Grid Generator
Build CSS Grid layouts visually — configure columns, rows, gaps, and named areas and copy production-ready CSS.