~/css/neumorphism-generator
Neumorphism Generator
Create the soft, extruded look of neumorphism from one base colour. Set the size, corner radius, shadow distance, blur and intensity, then choose flat, concave, convex or pressed. The generator works out the light and dark shadow colours for you.
Using the Neumorphism Generator
How neumorphism works
Neumorphism places an element on a background of the same colour and lifts it with two shadows: a light one towards the top left, as if lit from there, and a dark one towards the bottom right. The element looks pushed out of the surface. Pressed flips both shadows to the inside.
Concave and convex
Flat keeps the face a solid colour. Convex adds a subtle gradient from light to dark so the face bulges; concave reverses it so the face dips. Small changes in the gradient go a long way, so start with a low intensity.
The contrast problem
Soft UI relies on very low contrast, which can make buttons hard to see and fail accessibility guidelines. Use it for decorative surfaces and large cards, and give interactive controls a clear icon, a label and a visible focus ring.
Picking a base colour
Mid-light greys and pastels work best because both a lighter and a darker shadow are visible on them. Pure white leaves no room for the light shadow, and very dark colours hide the dark one.
Frequently asked questions
Does neumorphism work in dark mode?
Yes, with a dark base such as #2B2F36. The generator calculates both shadow colours from whatever base you pick.
Why does the element need the same colour as the page?
The effect depends on the element seeming to be made of the background. Use the same base colour for the parent.
Is the CSS heavy?
No. It is a single box-shadow with two layers and, for concave or convex, one gradient.