Neumorphism CSS Generator with Live Preview
Soft-UI neumorphism from two box-shadows of your base color mixed toward white and black — choose flat, concave, convex or pressed.
Neumorphism CSS generator
How far the two shadows move away from the base colour: 0 is flat, 1 is the darkest shade and the brightest highlight.
Preview
.neumorphic {
width: 200px;
height: 200px;
border-radius: 50px;
background: rgb(224, 224, 224);
box-shadow: 20px 20px 60px rgb(190, 190, 190), -20px -20px 60px rgb(229, 229, 229);
}Result: 7 lines, 191 charactersWhat this neumorphism generator does
Neumorphism, or soft UI, is a style where a control looks like it is extruded from or pressed into the surface behind it, using two shadows of the same background color: a slightly lighter one and a slightly darker one. This tool lets you pick the base color and adjust the element size, corner radius, shadow distance, blur and intensity, then choose a flat, concave, convex or pressed shape. A live preview sits on a matching background so the soft-shadow effect reads correctly, and one click copies the full CSS rule ready to paste into your stylesheet. Everything updates instantly as you drag the sliders.
How the light and dark shadows are computed
The effect depends on two box-shadow values built from your base color. The tool reads the base color's red, green and blue channels, then mixes them toward white to make the highlight and toward black to make the shade, with the intensity slider controlling how far apart the two colors sit. The light shadow is offset to the top-left and the dark shadow to the bottom-right, so the element appears to rise from the surface; the pressed shape simply insets both shadows so it looks sunken instead. Concave and convex shapes add a subtle diagonal gradient background, while flat and pressed keep a solid fill. The output is deterministic, so the same settings always produce the same CSS.
Frequently asked questions
Why does the preview background match the element color?
Neumorphism only works when the element and its container share the same background color, because the effect is created purely by a lighter and a darker shadow of that one color. The preview deliberately uses your base color as its backdrop so you see the true soft-UI look before copying the code.
What is the difference between flat, concave, convex and pressed?
Flat keeps the surface solid and raised. Concave and convex add a subtle diagonal gradient so the top curves inward or bulges outward. Pressed insets both shadows so the element looks pushed into the surface instead of standing out from it.