CSS Neumorphism Generator

Design visual Neumorphic (Soft UI) interfaces using an interactive design playground. Adjust real-time color bases, light source direction, shadow offsets, blur values, and shape bevels to generate clean CSS box-shadow formulas instantly.

Color & Background Layout

Base Canvas Color

Neumorphic Presets

Neumorphic Details

Distance (Shadow Offset) 20px

Size (Box Width & Height) 200px

Blur Radius 40px

Border Radius (Radius) 30px

Intensity (Shadow Opacity / Color Shift) 0.15

Surface Shape

Light Angle Source

Direct Angle: Top-Left (145°)

Visual Simulator

Backdrop:

Soft UI Element

Sandboxed Viewport

Export Code

CSS Stylesheet declarations

HTML DOM Markup

How CSS Neumorphism Works: The Double-Shadow Extrusion Technique

Neumorphism — sometimes called Soft UI or New Skeuomorphism — derives its entire visual identity from a single, elegant CSS principle: applying two precisely calculated box-shadow layers to an element whose background color exactly matches its parent container. The first shadow, cast in the direction of the simulated light source, uses a lightened variant of the base color to create a highlight edge. The second shadow, cast at 180 degrees opposite, uses a darkened variant to create the lowlight edge. Together, these two shadows sculpt the illusion that the element is a physical protrusion embedded within the surface material.

The mathematics behind this effect are surprisingly elegant. Starting from a hexadecimal base color like #e0e0e0, the generator parses three independent RGB channel values (224, 224, 224 in this case). An intensity factor — typically between 0.10 and 0.30 — is multiplied by 255 to produce an offset integer. This offset is added to each RGB channel (clamped at 255) to produce the highlight color, and subtracted from each channel (clamped at 0) to produce the lowlight color. Both resulting colors are then re-encoded as hex strings and injected into the box-shadow CSS property.

Before & After: Flat Button vs Neumorphic Button

❌ Before — Standard Flat Button

.flat-btn {
  background: #e0e0e0;
  border-radius: 8px;
  padding: 12px 24px;
  /* No shadow depth at all */
}

✅ After — Neumorphic Soft UI Button

.neuo-btn {
  background: #e0e0e0;
  border-radius: 12px;
  padding: 12px 24px;
  box-shadow:
    6px 6px 12px #bebebe,
    -6px -6px 12px #ffffff;
}

Surface Modes: Flat, Convex, Concave, and Inset

Beyond simple flat extrusion, Neumorphism supports four distinct surface personalities. Flat mode extrudes the element outward with no internal gradient — perfect for card containers and panels. Convex mode adds a linear gradient flowing from the highlight color to the lowlight color, following the light source angle, which makes the surface appear domed and rounded. Concave mode reverses the gradient direction, making the center of the element appear scooped inward — ideal for input fields or slots that should look recessed. Inset/Pressed mode moves both shadows inside the element using the CSS inset keyword, simulating a button that has been physically pushed into the surface.

Use-Case Comparison Matrix

Scenario	Developer Sandbox	Production / Design System
Dashboard Cards	Use flat mode with moderate blur for quick prototyping	Combine convex cards with high-contrast typography tokens
Interactive Buttons	Toggle between flat and inset states on click events	Add CSS transitions on box-shadow for smooth press animation
Input Fields	Use concave mode with low intensity for subtle depth	Apply inset mode with :focus outline for accessibility
Dark Mode UI	Switch to dark steel or midnight purple base presets	Test contrast ratios with automated WCAG tooling before shipping

Common Mistakes & Troubleshooting

✕
Background color mismatch: The element background must be identical to the container background. Even a single-digit hex difference breaks the illusion. Always set both to the same CSS custom property.
✕
Pure black or white base: There is no room to shift shadows darker than #000000 or lighter than #ffffff. Use midtone colors in the #888888 to #dddddd range for light themes.
✕
Oversaturation intensity: Intensity values above 0.35 create muddy, harsh transitions that destroy the soft aesthetic. Keep intensity between 0.10 and 0.25 for professional results.
✕
Neglecting accessibility: Neumorphic elements have very low contrast. Always pair them with high-contrast text labels and provide ARIA attributes for screen readers.

Best Practices for Production Neumorphism

Define both the shadow colors as CSS custom properties and swap them in a [data-theme="dark"] selector rather than hardcoding hex values.
Use CSS transition: box-shadow 150ms ease, background 150ms ease on interactive elements to animate between flat and inset states.
Test all Neumorphic surfaces against WCAG 2.1 contrast requirements using automated tools like axe or Lighthouse before shipping to production.
Avoid Neumorphism for critical actionable elements (checkout buttons, form submits) — reserve it for decorative panels and ambient UI surfaces.
Modern browsers support the standard box-shadow property natively — no vendor prefixes are required for Chrome, Firefox, Safari, or Edge.

Frequently Asked Questions

What is Neumorphism in web design?

Neumorphism (or Soft UI) is a visual design trend that simulates physical depth by extruding elements from their backgrounds using carefully calculated light and dark box-shadows. Unlike skeuomorphism, which mimics real-world textures, Neumorphism uses pure CSS shadow math — two opposing shadows — to create a tactile, plastic-like appearance. The result is an interface that looks as if every element was sculpted from the same material as the page itself. It gained mainstream traction around 2020 as an evolution of flat design and remains popular in dashboard and settings UI kits.

How do you calculate Neumorphic shadow offsets and colors?

Neumorphism uses exactly two box-shadow layers: a highlight shadow cast in the direction of the simulated light source (shifted toward the lighter side of the color wheel) and a lowlight shadow cast in the exact opposite direction (shifted darker). To compute these, you parse the base hex color into individual RGB channels, then add or subtract an intensity multiplier clamped between 0 and 255 to each channel independently. For example, a base gray of #e0e0e0 with 20% intensity shift produces a highlight of roughly #ffffff and a lowlight of #b9b9b9. The x/y offsets match the light source direction, and the blur radius determines how soft or sharp the edges appear.

What is the difference between convex, concave, flat, and inset Neumorphic shapes?

Flat shapes use external box-shadows only and appear as if raised slightly above the canvas surface — the most common Neumorphic button style. Convex shapes add a linear gradient flowing from the highlight to the lowlight color, reinforcing the illusion of a rounded, domed surface bulging outward. Concave shapes reverse this gradient, making the element appear as a scooped indentation in the canvas. Inset/Pressed shapes move the shadows inside the element boundaries using CSS inset shadow syntax, giving the visual impression that the element is recessed into the surface — ideal for active toggle or clicked button states.

Why does my Neumorphic card look flat or muddy?

Neumorphism fundamentally requires the element background color to match the page canvas background color exactly. If these two colors differ, the light-and-shadow illusion breaks entirely, and the effect looks like a normal flat card with poor contrast. Additionally, intensity values that are too low will produce near-invisible shadow transitions, while values that are too high (over 30%) produce overly harsh, unrealistic contrasts. Using midtone base colors — slate grays, muted blues, sandy beiges — yields the most dramatic and authentic results. Pure black (#000000) or pure white (#ffffff) base colors do not work because there is no room to shift shadows darker or lighter.

Is Neumorphism accessible for all users?

Neumorphic elements inherently have low color contrast ratios because they intentionally blend with the background color. This creates significant accessibility challenges for users with visual impairments, color blindness, or low-vision conditions. WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text, which Neumorphic buttons rarely achieve. To address this, combine Neumorphic styling with clearly labeled text using high-contrast colors, add supplementary focus-visible outlines for keyboard navigation, and consider providing an accessible theme toggle that replaces Neumorphism with a high-contrast variant.

What CSS properties power the Neumorphic effect?

The entire Neumorphism effect relies on the CSS box-shadow property, which accepts multiple comma-separated shadow layers. Each shadow layer takes the form: offset-x offset-y blur-radius spread-radius color. The highlight layer uses a positive offset matching the light source direction (e.g., "6px 6px 12px #b9b9b9"), while the lowlight uses negative offsets in the opposite direction ("-6px -6px 12px #ffffff"). The spread-radius is typically left at 0 to avoid unwanted size changes. Convex and concave variants also employ a linear-gradient on the background property to reinforce surface curvature.

Can Neumorphism be animated or used for interactive states?

Yes — Neumorphism pairs beautifully with CSS transitions to create interactive pressed effects. On :hover, you can subtly reduce shadow offsets and blur to suggest the card rising toward the viewer. On :active or :focus, switching from a flat external shadow to an inset shadow gives immediate tactile feedback simulating a physical button press. The CSS transition property should target box-shadow and background to ensure smooth 60fps GPU-accelerated interpolation. Keep transition durations short (100ms to 200ms) for an authentic, snappy physical feel rather than a sluggish animation.