Skip to content
Convertto

Neumorphism CSS Generator — Soft UI Shadows

Generate the paired light and dark shadows that make an element look pressed into or raised from its background.

Neumorphism creates depth with two shadows instead of one: a dark shadow on the side away from the light and a light shadow on the side facing it, both in shades of the background colour. The effect only works when the element and its parent share exactly the same background — that is what makes it look moulded from the surface rather than placed on it.

Runs in your browser
Privacy
Runs entirely in your browser — nothing is uploaded
Cost
Free, unlimited, no sign-up

Frequently asked questions

Why does my neumorphic element look flat?

The parent background is not the same colour as the element. The illusion depends entirely on the surface being continuous — any difference and the eye reads two separate shapes with odd shadows rather than one moulded surface.

Is neumorphism accessible?

Usually not, and it is worth being blunt about it. Borders and states are conveyed purely by soft shadow contrast, which routinely falls below the 3:1 that WCAG requires for interface components, and disappears entirely in high-contrast mode. Use it for decoration, not for the only signal that something is a button or that it is disabled.

What is the difference between pressed and raised?

The `inset` keyword. Raised casts shadows outward onto the surface; pressed casts them inward, as if the element sits in a recess. Swapping between them on active is what makes a neumorphic button feel like it depresses.

How to use the neumorphism generator

  1. 1Pick the background colour.
  2. 2Choose the shape.
  3. 3Set the element size.
  4. 4Set the corner radius.
  5. 5Set the shadow distance.
  6. 6Set the blur.
  7. 7Set the contrast.
  8. 8The result appears immediately — copy or download it.

Embed this tool

Put the working neumorphism generator on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Share this tool

Related tools

CSS Box Shadow GeneratorDesign a CSS box-shadow with live values for offset, blur, spread and colour.Blob Shape GeneratorDesign organic SVG backgrounds: four interpolation styles, gradients, layers and any canvas size.CSS Border Radius GeneratorDrag eight handles to shape every corner: elliptical radii, inverted corners and squircles.CSS Button GeneratorDesign a button and copy the CSS, including the hover, active and focus-visible states.CSS Shape GeneratorGenerate triangles, arrows, stars and other shapes using pure CSS.Glassmorphism CSS GeneratorCreate frosted-glass CSS with backdrop blur, transparency and a subtle border.

Last updated

More css generators