Neumorphism (soft UI) is a design style that creates the illusion of elements being extruded from or pushed into the background surface using light and dark shadows. It produces a tactile, slightly three-dimensional appearance on flat interfaces.

What CSS properties create the neumorphic effect?

Neumorphism uses two box-shadows on the same element — a light shadow on the top-left and a dark shadow on the bottom-right (or inverse for a pushed-in effect). Both shadows use the background color as a base, lightened or darkened by a fixed amount.

Is neumorphism accessible?

Neumorphism has known accessibility problems. The low contrast between element and background can make interactive elements hard to identify for users with low vision. Always ensure sufficient contrast on text and add other visual cues (borders, labels) to make neumorphic UI accessible.

What background colors work best for neumorphism?

Neumorphism works best with a mid-range, slightly grey background color (not pure white or black). A background around #e0e0e0 for light mode or #2e2e2e for dark mode gives the shadows enough contrast to be visible while maintaining the soft look.

Neumorphism UI Generator

Create soft UI (neumorphic) components with custom shadows and colors — copy CSS instantly

Controls

Background Color

Size: 200px

Border Radius: 50px

Shadow Distance: 20px

Shadow Intensity: 15%

Shadow Blur: 60px

Shape Type

Flat

Pressed

Concave

Convex

Neumorphism

How to Use

Adjust the controls to create your desired neumorphic effect
Choose between flat, pressed, concave, or convex shapes
Preview the effect in real-time
Copy the generated CSS code
Apply the neumorphic class to your HTML element