Skip to main content
Toollyz

Search tools

Search for a command to run...

Neumorphism Generator

Design soft-UI neumorphic surfaces with the recipe that actually reads as 3D: matched surface + page background, two diagonally-offset shadows (dark + light), tuned distance + blur + intensity. Four variants — flat / convex / concave / pressed. Nine presets including dark mode. Live preview, copy CSS. 100% offline.

What is the Neumorphism Generator?

Neumorphism Generator implements the soft-UI design language that briefly trended in 2020 and is still useful for dashboards, fitness apps and dark-mode interfaces. The core recipe is mathematically simple: one base colour used for both the page background AND the surface, then two box-shadows offset diagonally — a darker drop on one side and a lighter highlight on the opposite — so the surface appears to extrude from (or press into) the page. The intensity slider controls how much darker the shadow and lighter the highlight are vs. the base (10-20% reads as 'real', > 35% breaks the illusion). Four variants: Flat (surface = base colour), Convex (subtle gradient toward lighter top), Concave (gradient toward darker top), and Pressed (both shadows inset). Nine presets cover light/dark base palettes, soft/dramatic depth, and the three special variants. Output is the canonical three-line CSS — `background`, `border-radius`, `box-shadow`.

How to use it

  1. Pick a preset to start (Soft for subtle, Dramatic for bold, Dark mode for navy-on-navy).
  2. Choose a variant — Flat for everyday cards, Convex/Concave for tactile depth, Pressed for active buttons.
  3. Drop the surface colour into the picker — page background MUST match for the effect to read.
  4. Tune Distance (how far shadows offset), Blur (Gaussian softness, typically 2× distance) and Intensity (10-25% is realistic).
  5. Click Copy CSS — paste the three lines into any element.

Benefits

  • Mathematically derived shadow + highlight pair — pick a base colour, get a correct neumorphic look automatically.
  • Four variants: flat, convex (gradient lighter top), concave (gradient darker top), pressed (inset shadows).
  • Nine presets including a Dark mode and Midnight palette — neumorphism reads beautifully on dark surfaces.
  • Auto-tuned defaults: distance = 10 px, blur = 20 px (≈ 2× distance), intensity = 15% — the realistic sweet spot.
  • Live preview includes a square card AND a pill button for shape-comparison.
  • Output is plain `background` + `border-radius` + `box-shadow` — paste straight into any stylesheet.
  • Configuration persists in localStorage.
  • Runs 100% in your browser — no server, no upload.

Frequently asked questions

Why does the effect disappear when I put my element on a different background?

Neumorphism's entire illusion comes from the dark shadow and light highlight being slightly darker/lighter than the page background. If your page is white and the surface is light grey, you lose the highlight side. Always match the surface colour to the page background.

What's the difference between Convex and Concave?

Convex applies a subtle linear gradient that lightens the top corner — the surface looks like it bulges outward. Concave inverts the gradient so the surface looks like it sinks inward. Both look most natural on circular buttons.

When should I use Pressed?

Pressed flips both shadows inset — the surface looks indented. Use it on the active/pressed state of a button for tactile feedback, or for input fields that look 'recessed' into the page.

What's a realistic intensity?

10-20% is realistic — the contrast is subtle but the eye reads it as 3D. Above 30% it starts to look like a heavy drop shadow rather than soft UI. Dark mode tolerates higher intensity (25-30%) because the brain expects more shadow contrast on dark surfaces.

Why does the blur default to 2× distance?

That ratio matches real-world soft shadows — a light source far enough to cast a soft shadow also moves the shadow far from the object. Keep them locked together by dragging the distance slider; tweak the blur slider only when you want a tighter or more diffuse look.

Does neumorphism work in dark mode?

Yes — and arguably better. Dark neumorphism (#1f2937 with 20% intensity, #0f172a with 30%) hides the shadow side completely and uses the highlight to suggest depth. Pick the Dark mode or Midnight preset to see this.

Why are some neumorphic interfaces hard to read?

Accessibility is the well-known weakness — low-contrast tonal differences make text hard to read for users with vision impairments. Use neumorphism for surface decoration, but keep text high-contrast against the base colour.

Can I animate the variant?

Yes — neumorphic surfaces transition between Flat and Pressed beautifully on `:active`. Add a CSS `transition: box-shadow 200ms` and swap the box-shadow between the two states.

Is the output pure CSS?

Yes — three properties, no JS, no SVG, no images. Drop the snippet into any stylesheet or `style=`.

Are my settings saved between visits?

Yes — variant, base colour, distance, blur, intensity and radius all persist in localStorage under `toollyz:neumorphism`.

Is anything uploaded?

No. Preview and CSS generation run entirely in your browser.

Related tools

See all image tools