Neumorphism CSS Generator
Design soft-UI shadows and copy the CSS, with a live preview.
CSS
border-radius: 50px;
background: #e0e0e0;
box-shadow: 20px 20px 60px #bebebe,
-20px -20px 60px #e5e5e5;What is neumorphism?
Neumorphism("soft UI") fakes extruded shapes by pairing a dark shadow on one side with a light shadow on the other, both derived from a single background color — so the element looks pressed into or raised out of the surface. It only reads correctly when the element and its parent share that background, which the preview above does. The CSS is generated live in your browser.
More CSS generators: the glassmorphism generator, the box-shadow generator, and the gradient generator.
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.