Neumorphism Generator

Neumorphism (also written neu-morphism or soft UI) is a design style that creates the illusion of elements extruded from — or pressed into — the background surface. It achieves depth purely through CSS box-shadow: a light shadow on one side simulates a raised edge catching light, and a dark shadow on the opposite side simulates the cast shadow on the surface below. The result is a tactile, almost physical appearance without any gradient textures or images.

This generator lets you tune every parameter with live previews and produces a clean, copy-ready CSS snippet that you can paste directly into your project.

How Neumorphism Works

The core technique uses two box-shadow values on the same element — one lighter than the base color, one darker — offset in opposite directions to suggest a directional light source:

The light and dark colors are derived mathematically from the base color by adding and subtracting the same intensity delta, ensuring the element always blends naturally with its background.

Shape Variants

The Flat and Pressed variants use only box-shadow. Concave and Convex add a subtle linear-gradient on the background property that reinforces the curvature illusion.

Controls Explained

Base color is the background color of both the element and its parent container. For neumorphism to work, the parent surface must share this color — the generator sets the preview background automatically to match.

Element size sets the width and height to a uniform square. The preview updates in real time as you drag.

Border radius rounds the corners from 0 (sharp square) to 50 px (rounded rectangle). At a value equal to half the element size, the shape becomes a perfect circle.

Distance controls how far the two shadows are offset from the element center. Larger values suggest a more elevated surface; smaller values create a subtle, close-to-surface look.

Intensity determines how much lighter and darker the two shadow colors are relative to the base. Low values (5–15 %) produce the gentlest effect; higher values (25–40 %) create strong contrast that reads clearly on small screens.

Blur is the blur-radius of each shadow. A blur roughly double the distance value looks natural. Very low blur values make shadows look sharp and unrealistic.

Light angle rotates the light source around the element. 145° matches the convention of light coming from the top-left, which feels familiar to users accustomed to macOS and iOS interfaces. Changing this value is useful for matching an existing design language.

Accessibility Considerations

Neumorphic elements often have low contrast between the element and its background, which can make interactive controls hard to distinguish for users with low vision. When using this style for buttons, form inputs, or other interactive elements, supplement the shadow effect with clear focus rings, distinct active states, and sufficient text contrast. WCAG 2.1 AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text against background.

Browser Compatibility

box-shadow is universally supported in all modern and legacy browsers including IE 9+. No prefixes are required. The gradient used in Concave and Convex shapes uses standard linear-gradient() syntax, which is also fully supported.

Tips for Production Use

• Keep intensity below 25 % on mid-toned base colors to avoid shadows that look artificial.
• Pair the generated CSS with transition: box-shadow .2s ease create smooth hover and active state transitions.
• For a pressed button state, switch between the Flat (default) and Pressed (active) snippets in JavaScript based on :active or a toggled class.
• Neumorphism works best on greyed pastel base colors (#dde1e7, #e0e5ec, #cacfd8). Pure white or saturated hues tend to produce shadows that look dirty or unnatural.
• Combine with a subtle inner border matching the base color to mask the edge where the shadow meets the element at close viewing distances.