Neumorphism Generator

Neumorphism Generator is a free, browser-based tool for designing soft UI "neumorphic" CSS components. Pick a base colour, dial in your shadow parameters, select a shape type, and watch the live preview update instantly. When you're happy, copy the .neumorphic CSS rule and paste it into your project.

Neumorphism (a portmanteau of new and skeuomorphism) places elements on a surface using two shadows — one dark, one light — to simulate a soft, embossed appearance as if the element is extruding from the page. It gained popularity around 2020 as a contrast to flat design.

The swatch row below the colour picker shows you the auto-computed dark and light shadow colours. These are derived from your base colour using darkening and lightening algorithms rather than preset values.

• Base Color — the single most important control. In neumorphism, the element background must match the page background. The two shadow colours are automatically derived from this. Medium greys (like #e0e5ec) and soft pastels work best.
• Shadow Distance — how far the shadows are offset from the element. Larger values feel more dramatic; 5–12 px is a realistic range for components.
• Shadow Blur — how soft the shadow edges are. Typically 1.5–2× the distance value for a natural look.
• Shadow Intensity — how dark the dark shadow and how light the light shadow are. High intensity (>25%) looks harsh and unnatural; 10–18% is ideal.
• Border Radius — round corners emphasise the soft material feel. Pill-shaped elements (50 px+) are common in neumorphic buttons.
• Shape Type — Flat is the standard raised look. Pressed inverts the shadows (inset) to appear pushed in — ideal for active states. Concave and Convex add a gradient to suggest curved surfaces.
• Light Source — determines the direction the virtual light comes from, changing which corner holds the dark vs. light shadow.

The effect is produced entirely by box-shadow. Two shadows are cast — one using a darkened variant of the base colour (placed in the direction away from the light source) and one using a lightened variant (placed toward the light source). This mimics how a raised surface would catch and cast light on a flat background.

The dark shadow colour is computed as rgb(r*(1−i), g*(1−i), b*(1−i)) where i is the intensity. The light colour uses rgb(r + (255−r)*2i, …). These are applied as box-shadow: Xpx Ypx Bpx darkColor, −Xpx −Ypx Bpx lightColor.

For Pressed, both shadows use the inset keyword, which renders them inside the element border box rather than outside — making the element appear pushed into the surface instead of raised from it.

For Concave and Convex, a linear-gradient background is added using the same dark/light colours. Concave applies the gradient in the same direction as the dark shadow (light source side gets the lighter colour); Convex reverses it.

The critical accessibility note: neumorphism has poor contrast between element boundaries and background because both use the same colour. Use it only for decorative or non-interactive elements unless you increase intensity significantly.