What is Neumorphism?

Neumorphism (also known as Soft UI) is a modern design trend that combines flat design with subtle shadows to create elements that appear to extrude from or press into the background. Unlike traditional shadows, neumorphism uses two shadows — one light and one dark — to simulate soft, realistic depth.

This generator helps you create neumorphic effects visually without writing CSS by hand. Choose your base color, select a shape type, adjust shadow parameters, and copy the production-ready CSS code.

Shape Types Explained

Flat

The element appears raised above the surface with uniform color

Pressed

The element appears pushed into the surface using inset shadows

Concave

The element is raised with a gradient that curves inward (darker center)

Convex

The element is raised with a gradient that curves outward (lighter center)

Key Principle: For neumorphism to work correctly, the element's background color must match its parent container's background. This creates the illusion that the element is part of the same surface — either extruding from it or pressed into it.

How to Use

Choose a Base Color

Select your background color using the color picker or type a hex value directly. The generator automatically calculates matching light and dark shadow colors. Neutral colors like grays work best for neumorphism.

Select a Shape Type

Choose from four shape types — Flat, Pressed, Concave, or Convex. Each type creates a different visual depth effect. Use Flat for raised cards and Pressed for active/clicked states.

Adjust Shadow Parameters

Distance — How far the shadow extends from the element (0–50px)
Blur — How soft the shadow appears (0–100px)
Intensity — The contrast between light and dark shadows (0–100%)
Border Radius — Corner roundness (0–100px)
Size — Preview element dimensions (80–400px)

Set Light Direction

Choose where the virtual light source comes from. This determines which side gets the light shadow and which gets the dark shadow. Top-left is the most natural and commonly used direction.

Copy the CSS

Click the Copy button to copy the generated CSS code. Paste it into your stylesheet and apply it to your HTML element. Remember to set the parent container's background to the same base color.

Features

Visual Shadow Controls

Fine-tune your neumorphic effect with intuitive sliders for distance, blur, intensity, border radius, and element size.

Synchronized number inputs for precise values
Real-time preview updates
Instant CSS code generation

Four Shape Types

Create different depth effects with multiple shape variations.

Flat (raised surface)
Pressed (inset effect)
Concave (gradient inward)
Convex (gradient outward)

Auto Shadow Color Calculation

The generator automatically derives light and dark shadow colors from your chosen base color, ensuring natural and harmonious shadows regardless of your color selection.

Light Direction Control

Choose from four light source directions with automatic shadow offset and gradient angle adjustments.

Top-left (most natural)
Top-right
Bottom-left
Bottom-right

Multiple Element Previews

Preview your neumorphic effect on different UI element types to visualize real-world applications.

Card (square container)
Button (wide rectangle)
Circle (icon button)
Input (text field)

Dark Background Preview

Toggle dark preview mode to see how your neumorphic design looks on darker backgrounds. The preview recalculates shadow colors while keeping your original CSS code intact for export.

Quick-Start Presets: Jump-start your design with six built-in presets: Subtle, Medium, Strong, Pressed, Concave, and Convex. Select a preset and continue customizing with the sliders to achieve your desired effect.

Frequently Asked Questions

Why doesn't my neumorphism effect look right?

The most common issue is that the element's background color doesn't match the parent container's background. Neumorphism requires both to be the same color. Make sure to apply the generated background color to both the element and its parent.

What colors work best for neumorphism?

Neutral, mid-tone colors work best — light grays like #e0e0e0 or soft pastels. Very dark or very light colors reduce the contrast between light and dark shadows, making the effect less visible. Avoid pure white or pure black.

What is the difference between Concave and Convex?

Concave applies a gradient that goes from darker to lighter (creating an inward curve illusion), while Convex goes from lighter to darker (creating an outward curve illusion). Both still use the same raised shadow effect as Flat.

Does the dark preview change the CSS output?

No. The dark preview is for visualization only. The CSS code output always reflects your original base color settings. To generate CSS for a dark theme, simply change the base color to a dark shade.

Is neumorphism accessible?

Neumorphism naturally has lower contrast than traditional UI patterns. For accessible designs, use it primarily for decorative containers rather than interactive elements. Ensure text placed on neumorphic surfaces has sufficient contrast, and combine with clear labels and borders for interactive controls.

Accessibility Note: Always test color contrast ratios and provide alternative visual cues for interactive elements beyond neumorphic styling alone.

Can I use neumorphism with any CSS framework?

Yes. The generated CSS properties (background, box-shadow, border-radius) are standard CSS and work with any framework — Tailwind, Bootstrap, or plain CSS. Simply apply the properties to your element.