Neomorphism Generator

Generate neumorphic CSS box-shadow styles for soft UI designs.

Shape: FLATDistance: 10pxBlur: 20pxIntensity: 0.15CSS Length: 125 chars

Presets & Samples

Background Color

Shadow Distance: 10px

Blur Radius: 20px

Intensity: 0.15

Shape

CSS Output

.neomorphic {
  background: #e0e5ec;
  border-radius: 20px;
  box-shadow: 10px 10px 20px #babfc6, -10px -10px 20px #ffffff;
}

About Neomorphism Generator

Neomorphism (or neumorphism) is a UI design trend that creates soft, extruded plastic look by using two box shadows — one darker and one lighter than the background color. The result is elements that appear to be slightly raised from or pressed into the surface. This generator produces the exact CSS needed for flat, concave, convex, and pressed (inset) neumorphic styles. Works best with light neutral backgrounds like grays and creams.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Generating soft-UI box shadows with a configurable intensity.
Producing a shadow pair that matches a chosen background colour.
Tuning blur and distance for a specific component size.
Producing CSS for a design supplied as a mockup.
Comparing shadow intensities against a live preview.

Frequently Asked Questions

Is neomorphism the same as neumorphism?: Yes — two spellings of the same style, and both are in common use. It is a portmanteau of "new skeuomorphism", so the shorter spelling is arguably the more literal one; neither is more correct, which is why searches for a tutorial turn up both.
What is the CSS behind it?: A pair of box-shadows in opposing directions on an element whose background matches the page — one darker, one lighter, same blur and offset. The `inset` keyword flips it from raised to pressed, which is how the interactive states are built.
How do I pick the two shadow colours?: From the base colour, darkened and lightened by the same amount — typically 10–15% each way. Using arbitrary greys breaks the illusion because the light source stops being consistent, which the eye notices even when it cannot name the problem.
Why does it only work on mid-tone backgrounds?: Because it needs room to go both lighter and darker. On white there is no lighter, and on black no darker, so one of the two shadows disappears and the extrusion collapses into an ordinary drop shadow. A light grey around #e0e0e0 is the classic base for exactly this reason.
Should I use it in production?: Sparingly, and never as the only signal that something is interactive. The style's inherent low contrast is an accessibility problem rather than a taste question, so pair it with a border, a label, or a focus state that meets contrast requirements on its own.

Common errors and gotchas

Producing contrast too low for the control to be perceivable, which is this style's defining flaw.
Using shadow as the only affordance that something is clickable.
Applying it to text rather than to surfaces, which makes the text harder to read.
Assuming it works on white or black, when the effect needs a mid-tone background.
Overlooking focus and disabled states, which the style tends to erase.