Neumorphism Generator

The illusion is that the panel is moulded from the same surface as what's behind it — if the page background is a different colour from the panel's base colour, the shadows read as an obvious drop shadow instead of shaping, and the effect falls apart. Set the page's actual background to the same base colour used here.

It can, though it is most commonly seen in pale, low-saturation tones because that is the range where the two shadow colours read most subtly. Because the shadow colours here are computed in OKLCH rather than naive RGB lightening, a genuinely colourful base still keeps its hue in both shadows rather than drifting toward grey.

The whole effect relies on subtle shadow contrast rather than a clear border or fill colour to show where a button ends and the background begins, which is exactly the kind of low-contrast boundary that's hard to see for low-vision users and fails contrast guidelines for interactive elements. It works best as decoration on a panel, not as the only cue that something is clickable.

Raised sits the panel above a flat background with an outer shadow. Convex and concave add a gradient across the panel's own surface — lighter to darker, or the reverse — to suggest it curves outward or inward like a dome or a dish. Pressed moves the shadow inside the panel entirely, reading as a surface pushed in rather than raised up.