Neumorphism CSS Generator

Design beautiful soft UI elements with real-time preview, multiple shapes, and instant CSS output

👁 Live Preview

Button

/* Adjust controls */

⚙️ Controls

Background Color

Element Size 200px

Border Radius 24px

Shadow Distance 8px

Shadow Intensity 0.35

Shadow Blur 16px

Shape Type

Light Direction

Element Type

What is Neumorphism?

Neumorphism (also called Soft UI) is a design trend that combines flat design with skeuomorphism. It creates soft, extruded shapes that appear to push out from the background using carefully crafted box-shadows - one light shadow and one dark shadow on opposite sides.

The technique relies on matching the element background to the page background, then applying two box-shadows: a lighter one (simulating light reflection) and a darker one (simulating the cast shadow). This creates the illusion of a 3D surface embedded in the background.

Flat vs Pressed

Flat elements appear to rise from the surface using outer shadows. Pressed elements use inset shadows to create a sunken effect, perfect for active states and inputs.

Concave & Convex

Concave shapes use a gradient that darkens toward the light source, creating a bowl-like indentation. Convex shapes lighten toward the source, appearing rounded outward.

Color Choice Matters

Neumorphism works best with muted, desaturated colors. Highly saturated or very dark backgrounds make the shadow effect hard to perceive. Mid-tone backgrounds yield the best results.

Accessibility Considerations

Neumorphic UIs can have low contrast between interactive and non-interactive elements. Always ensure adequate contrast ratios and consider adding subtle borders for clarity.