What is neumorphism in CSS?

Neumorphism is a UI design style that uses dual box shadows — one lighter than the background and one darker — to create soft, extruded or pressed elements. The element's background color matches the page background, making it look molded from the same surface.

Do I need to install anything to use this generator?

No. The neumorphism generator runs entirely in your browser with no software installation, no signup, and no account required.

How do I use the generated CSS in my project?

Click "Copy CSS" and paste the three CSS properties (border-radius, background, box-shadow) into an existing CSS rule for your element. Or click "With Class" to copy a complete .neumorphic {} class block.

Are there accessibility concerns with neumorphism?

Yes. The low contrast between element and background can make interactive elements hard to perceive for users with visual impairments. For production apps, add clear focus indicators and sufficient text contrast, and do not rely on neumorphic style alone to indicate interactivity.

What does the Intensity slider control?

Intensity controls how much lighter and darker the two shadow colors are compared to the base background color. Higher intensity = more visible, contrasted shadows. Lower intensity = subtler depth effect.

What does the light source do?

The light source determines which corner the virtual light "comes from". The shadow on the light side is lighter than the background; the shadow on the opposite side is darker. Changing the light source direction rotates the shadow positions.

Neumorphism Generator

Create soft UI CSS neumorphism effects with live preview and one-click copy

Presets:

Click corner dot to set light source

Shape Type

Size200px

Radius50px

Distance20px

Blur60px

Intensity0.15

Background Color

CSS Output

border-radius: 50px;
background: #e0e5ec;
box-shadow: -20px -20px 60px rgba(239,244,251,0.6), 20px 20px 60px rgba(209,214,221,0.6);

Free Neumorphism CSS Generator — Create Soft UI Effects Online

Neumorphism (also called Neu-morphism or Soft UI) is one of the most distinctive UI design trends of the last few years. It creates a sense of depth by combining a background-matching element color with carefully calculated dual box shadows — one lighter than the background and one darker. The result is a clean, tactile, almost physical appearance that makes interface elements look like they are molded from the same material as the background itself.

This free Neumorphism Generator lets you design and export CSS neumorphic styles in seconds. Adjust the size, border radius, shadow distance, blur radius, shadow intensity, and background color using the live controls. Choose from three shape modes — Flat (standard raised neumorphic), Concave (inset/pressed appearance), or Convex (bulging outward) — and click any corner dot in the preview to set the virtual light source direction. The CSS output updates in real time, and you can copy it as plain CSS properties or as a complete CSS class block with one click.

Eight color presets (Classic, Slate, Warm, Rose, Sage, Lavender, Dark, Midnight) are available for quick starting points, and the custom color picker lets you use any background color you choose. The tool also automatically calculates readable text colors for the control panel based on your chosen background, so labels remain readable at all times.

Understanding Neumorphism — How It Works

Neumorphism achieves its depth effect through a single CSS property: box-shadow. Unlike traditional skeuomorphism (which used gradients and textures to simulate real-world materials) or flat design (which removes all depth cues), neumorphism uses two shadows from opposite directions:

Light shadow

A lighter version of the background color cast from the direction of the virtual light source. This simulates the part of the element facing the light.

Dark shadow

A darker version of the background color cast from the opposite direction. This simulates the shadow on the side facing away from the light.

Raised (Flat)

Both shadows are external (no `inset`). The element appears to protrude from the background surface, like a button raised from a panel.

Concave

Both shadows are `inset`. The element appears to be pressed into the background, like a selected/active button or an input field.

The key constraint of neumorphism is that the element's background color must match the page background color. The shadow colors are calculated as lighter and darker variants of that same color using the Intensity slider, which controls how much lighter and darker the shadow colors are relative to the base. A higher intensity produces more visible, more contrasted shadows. A lower intensity gives a more subtle, refined look.

Controls Reference

Control	Range	Effect
Size	100–350px	Width and height of the preview element.
Radius	0–175px	Border radius. 0 = sharp corners, 50% of size = circle.
Distance	5–50px	X and Y offset of both shadows from the element. Higher = more pronounced depth.
Blur	10–100px	Spread/softness of the shadows. Higher = softer, more diffuse shadows.
Intensity	0.05–0.30	How much lighter/darker the shadow colors are vs the background. Higher = more contrast.
Shape Type	Flat/Concave/Convex	Controls whether shadows are external (raised), inset (pressed), or reversed external (convex).
Light Source	4 corners	Direction the virtual light comes from. Determines which shadow is light and which is dark.
Background Color	Any hex	The base color for the background and element. Shadow colors are derived from this.

Frequently Asked Questions

What is neumorphism in web design?+

Neumorphism is a UI design style that creates soft, extruded elements by using dual box shadows — one lighter than the background and one darker — applied to elements that match the background color. It creates a physical, tactile depth effect without heavy gradients or textures.

What browsers support neumorphic CSS box-shadow?+

All modern browsers support the CSS `box-shadow` property, including Chrome, Firefox, Safari, Edge, and Opera. Neumorphic styles work in any browser that supports `box-shadow` and `border-radius`, which is effectively all browsers in active use today.

Why does neumorphism require matching background colors?+

The depth illusion breaks if the element color differs from the background. The shadows simulate raised or pressed surfaces on a uniform material — if the element has a different color, it no longer looks like it is part of the same surface.

Is neumorphism accessible?+

Standard neumorphism has known accessibility issues: the low contrast between element and background makes it hard for users with visual impairments to distinguish interactive elements. For production apps, pair neumorphic design with clear focus indicators, sufficient text contrast, and ARIA labels.

What is the difference between flat, concave, and convex modes?+

Flat = element raised above the surface (external shadows). Concave = element pressed into the surface (inset shadows). Convex = element with reversed raised appearance (swapped shadow positions).

How do I use the copied CSS?+

Paste the "Copy CSS" output directly into an element's style rule in your CSS file. Or use "With Class" to copy the CSS wrapped in a `.neumorphic {}` class block, ready to add to a stylesheet.

Can I use neumorphism with dark backgrounds?+

Yes. Select the "Dark" or "Midnight" preset, or any dark color with the color picker. The shadow algorithm adapts to dark backgrounds automatically, lightening and darkening the base color accordingly.

What is the light source in the preview?+

The four corner dots in the preview area represent the location of the virtual light source. Clicking a dot changes the direction the light is "coming from", which reverses which shadow is lighter and which is darker.