Neumorphism Generator

Generate soft-ui neumorphism elements with double-shadow offsets, light source angles, and light/dark mode compliance.

Base Color

#e0e0e0

Distance20px

Shadow Blur40px

Border Radius30px

Shadow Intensity15%

Shape Style

Light Source

border-radius: 30px;
background: #e0e0e0;
box-shadow: 20px 20px 40px rgb(190, 190, 190), -20px -20px 40px rgb(255, 255, 255);

What is a Neumorphism in CSS?

Neumorphism (soft UI) is a design style that uses highlights and shadows to make elements look like they are extruded from or sunken into the background.

Why Use a CSS Neumorphism?

It gives interfaces a tactile, physical feel. Best suited for single-page applications, dashboards, or control panels with a clean, minimal, minimalist aesthetics.

CSS Syntax & Controls

It syncs the background color with the element color, then applies two opposite shadows: a dark shadow on the bottom-right and a light highlight on the top-left.

background: #e0e0e0; box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;

Best Practices

Use soft pastel colors or light greys. Extreme colors (pure white or pitch black) do not blend neumorphic highlights well.
Keep shadows soft: set the blur radius to double the shadow distance.

Common Mistakes

Using neumorphism on pages with high information density, as it consumes too much whitespace.
Neglecting contrast accessibility: buttons can be hard to identify for visually impaired users.

Step-by-Step Guide: How to Use this Generator

Pick a base color (light grey or soft slate work best).
Adjust the distance and blur sliders to set the extrusion depth.
Toggle between flat, concave, convex, or pressed styles.
Select the light source direction to sync highlights.

Browser Compatibility

Chrome	Safari	Firefox	Edge
Yes (Full)	Yes (Full)	Yes (Full)	Yes (Full)

Frequently Asked Questions (FAQ)

Is neumorphism accessible?

By itself, it can have low contrast. It is best to combine neumorphism with clear text labels, icons, or primary accent states for high accessibility.