My Tool Studio
CSS

CSS Neumorphism Generator

This neumorphism generator makes soft UI shadows from one background color: pick the color and it works out a lighter and a darker shadow that match it. Choose a flat, concave, convex or pressed shape, the corner the light comes from, and set radius, distance, blur and intensity separately. Seven presets include warm, mint and two dark themes. A contrast check measures how visible the element's edge is against the page and whether your text color passes WCAG AA, since soft UI is low contrast by design. Preview the style as a square, circle, button or card, then copy CSS, Tailwind or SCSS. For example, a raised button and its pressed state can share one background: copy the flat version, then pick Pressed and copy that for :active.

Always freeNo sign upRuns in your browser

Presets

Edge contrast 1.40:1. Below 3:1, so some users may not see the shape. Add a border or icon.

Text contrast 6.09:1. Passes WCAG AA for body text.

.neumorphic {
  border-radius: 24px;
  background: #e4e4e7;
  box-shadow: 12px 12px 24px #c2c2c4, -12px -12px 24px #ffffff;
}

/* Page or parent background */
body {
  background: #e4e4e7;
}

Shape

Size (preview)160px
Radius24px
Distance12px
Blur24px
Intensity15%

How to use

01

Pick the background

Choose a color with the picker, type a hex value such as #e4e4e7 or #ddd, or start from a preset. The element and the page need the same color, so the preview uses it for both.

02

Shape the shadows

Pick Flat, Concave, Convex or Pressed and a Light source corner, then set Radius, Distance, Blur and Intensity. Watch the edge and text contrast notes under the preview.

03

Copy the code

Copy the CSS, Tailwind classes or SCSS variables and apply them to an element on a parent with the same background color. Copy share link saves the settings.

Why CSS Neumorphism Generator

How the light source changes the shadow pair

Both shadows use the same distance and, by default, a blur of twice the distance. Only their direction changes with the light source. With the default distance of 12px, the tool writes these offsets.

The dark color is the background darkened by the Intensity percentage, and the light color is the background brightened by the same amount, capped at pure white. With the Pressed shape, both shadows get the inset keyword and keep the same offsets, so the pressed state lines up with the raised one. Longer distances need a larger radius and more empty space around the element, or the shadows overlap nearby elements or get clipped by a parent with overflow: hidden.

Light sourceDark shadow offsetLight shadow offset
Top left12px 12px-12px -12px
Top right-12px 12px12px -12px
Bottom right-12px -12px12px 12px
Bottom left12px -12px-12px 12px

Common questions

How does the neumorphism effect work in CSS?
It uses two box shadows on an element that has the same color as its background: a darker one on the side away from the light and a lighter one on the side facing it. Together they make the element look pushed out of, or into, the surface.
Why can't I see the neumorphic shadows on a white background?
The light shadow is made by brightening the background color, and white cannot get any brighter, so that shadow disappears. Use an off-white or light gray such as #e4e4e7, where both shadows have room to show.
What is the accessibility problem with neumorphism?
The element's edges are defined only by soft shadows, so its contrast with the page is low. The tool measures the dark shadow against the background and flags anything under 3:1, the WCAG guide for UI shapes. Add a border, clear labels and a visible focus style when it falls short.
How do I make a pressed neumorphism button?
Pick the Pressed shape and the same two shadows are drawn inside the element, so it looks pushed in. Use the flat version for the normal state and the pressed version for :active, and transition box-shadow between them.
What is the difference between concave and convex neumorphism?
Both add a linear-gradient background in two shades of the base color. Convex is lighter on the side facing the light, so the surface bulges out. Concave is darker on that side, so it looks scooped in. The gradient angle follows the light source.
Can I change the light direction of neumorphic shadows?
Yes. Pick Top left, Top right, Bottom right or Bottom left under Light source. The light shadow moves toward that corner and the dark shadow to the opposite side. Keep one light direction across a whole screen so the elements look consistent.
Does this neumorphism CSS generator work with dark backgrounds?
Yes. Pick a dark color or the Dark and Midnight presets, and the tool makes a slightly lighter and a darker shadow from it. On very dark colors raise Intensity, because a percentage change of a small number is small.
Should neumorphic blur always be twice the distance?
It is a good default and the tool keeps blur at twice the distance while you move Distance, until you change Blur yourself. Less blur gives a crisper, more solid look; more blur spreads the shadow and softens the edge.
What border radius suits soft UI elements?
Generous ones. Around 16 to 32px for cards and 50 percent for round buttons fits the soft look. The Circle sample writes border-radius: 50%. Sharp corners make the shadows look like a bevel instead of a smooth shape.

More CSS tools

View all

CSS Clip Path Generator

Visual clip-path editor with SVG import and PNG tracing

CSS

CSS Gradient Generator

Build linear, radial and conic gradients

CSS

CSS Box Shadow Generator

Build layered box shadows with presets

CSS

CSS Border Radius Generator

Round corners, per corner or as blobs

CSS