Handitab

Neumorphism Generator

Generate CSS for a neumorphism (soft UI) effect from a base color, shadow distance, blur, and radius, with a live preview of the shape.

About Neumorphism Generator

Neumorphism, or soft UI, is a style where elements appear pressed out of the background using two shadows: a dark one on the lower right and a light one on the upper left. This generator derives both shadow colors from your base color by lowering HSL lightness by 15 points and raising it by 12, then outputs background, border-radius, and box-shadow. The element and its parent must share the same background color.

How to use Neumorphism Generator

  1. Fill in "Base color", "Distance", "Blur" and "Radius".
  2. The result appears below and updates as you type.
  3. Copy the result with the copy button, or download it as a file where that is offered.

Questions about Neumorphism Generator

Is neumorphism accessible?

It needs care. Edges are defined only by subtle shadows, so buttons and inputs can be hard to see for people with low vision. Add clear text contrast, visible focus styles, and borders or icons for important controls.

Runs in your browser. Page last updated .

More css and color tools

All 39 css and color tools
Percent to PXConvert a percentage font size to pixels using the base font size (16px by default), so 150 percent becomes 24px, with rem and em.PT to PXConvert points to CSS pixels at the standard ratio of 96 pixels to 72 points, so 12pt equals 16px, with rem and em values included.PX to REMConvert pixels to rem units by dividing by the root font size (16px by default), with em, pt, percent, and vw shown alongside.Random Color GeneratorGenerate 1 to 12 random colors with their HEX, RGB, and HSL codes and a preview swatch for each, and reroll until a set suits you.React Native Shadow GeneratorGenerate React Native shadow styles for iOS (shadowColor, shadowOffset, shadowOpacity, shadowRadius) and the Android elevation value.REM to PXConvert rem units to pixels by multiplying by the root font size (16px by default), with em, pt, percent, and vw results as well.