CSS Neumorphism Generator

Neumorphism ("soft UI") makes elements look extruded from, or pressed into, the page by giving them the same color as the background and two shadows: a darker one away from the light and a lighter one toward it. This generator computes both shadow colors from your base color the way neumorphism.io does, writes the flat, concave, convex or pressed variant for any light direction, and warns when the result is too low in contrast to be usable as a control.

How to use this tool

1. Choose the base color — the page behind the element must use it too.
2. Set the size, corner radius, shadow distance, blur and intensity.
3. Pick the shape and the light direction.
4. Copy the CSS; read the edge-contrast warning before using it for buttons or inputs.

Formula

dark = channel × (1 − intensity) · light = min(255, channel × (1 + intensity)) · box-shadow: d d blur dark, −d −d blur light

d is the distance; the signs depend on the light direction. Concave and convex shapes add a gradient from 10% darker to 7% lighter (or the reverse) at 145° for a top-left light, mirrored for the other corners; pressed uses inset shadows.

Example

For #E0E0E0 at 15% intensity, each channel 224 × 0.85 = 190.4 → #BEBEBE and 224 × 1.15 = 257.6 → capped at #FFFFFF, giving box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff. The edge contrast between the surface and its dark shadow is only 1.4:1, far below the 3:1 WCAG asks for interface components.