Neumorphism Generator

Generate soft neumorphic CSS shadows for raised and inset UI controls.

Color

Output

Suggested Tools

Color Picker
Pick a color visually and copy HEX, RGB, or HSL values for CSS and design tools.
HEX ↔ RGB
Convert colors between HEX and RGB for CSS, canvas, and design handoff.
HEX ↔ HSL
Convert colors between HEX and HSL for tweaking lightness and saturation in CSS.

Neumorphism Generator builds paired light/dark box-shadows that create a clay/soft-UI look.

Set the base color and distance, run, and copy the CSS onto buttons or cards.

Please enable JavaScript.