Skip to content
ToolQivo

Neumorphism Generator

Build soft extruded UI with paired light and dark shadows.

Developer Tools Reviews Free · no sign-up

Preview

Soft UI

Quick Tool Overview

The Neumorphism Generator derives both shadow colours from your background rather than using grey, which is what keeps the effect coherent — and it is straightforward about the accessibility problem the style has.

What it does
Builds soft extruded neumorphic CSS
You give it
A background colour, distance, blur and intensity
You get back
Paired shadows, raised or pressed
Best for
Soft-UI buttons, cards and toggle states
Developer Tools Free, unlimited use No sign-up Runs in your browser

About the Neumorphism Generator

Neumorphism makes an element look extruded from its background using two shadows: a dark one where a light source would not reach and a light one where it would. The effect only works if both shadow colours are derived from the background, which the generator does for you.

That derivation is the whole trick. Pick a background colour and the shadows are computed by lightening and darkening it by a set percentage, so they stay in the same family rather than being grey blobs. Switching to inset gives the pressed state, which is what a neumorphic button needs on click. The style has a real accessibility problem — the contrast between element and background is close to zero by design — and the page says so rather than pretending otherwise.

Key features of the Neumorphism Generator

Colours derived, not grey

Both shadows come from lightening and darkening the background, so they stay in its colour family instead of looking dirty.

Raised and pressed

Switching both shadows to inset gives the pressed state a neumorphic button needs on click.

The whole surface previewed

The element and its background are shown together, because the effect only exists in the relationship between them.

Intensity control

How far the shadows are lightened and darkened, which is what separates a subtle surface from a plastic one.

Accessibility stated plainly

The style distinguishes controls only by a soft shadow, which fails contrast requirements. The page says so rather than pretending otherwise.

How to use the Neumorphism Generator

  1. 1

    Pick the background

    Everything else is derived from it, which is what keeps the effect coherent.

  2. 2

    Set the distance and blur

    How far the element appears to stand out from the surface.

  3. 3

    Choose raised or pressed

    Inset shadows give the pressed state a button needs.

  4. 4

    Copy the CSS

    Background and both shadows, with the derived colours in place.

Frequently asked questions

Because the illusion is that the element is the same surface, pushed out or pressed in. Any difference in colour breaks it immediately — which is also why the style cannot be used on a photo or a gradient.

Reviews of the Neumorphism Generator

What people who use the Neumorphism Generator think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the Neumorphism Generator. It takes half a minute and no account.

Write the first review

More developer tools