Neomorphism Generator
Generate neumorphic CSS box-shadow styles for soft UI designs.
CSS Output
.neomorphic {
background: #e0e5ec;
border-radius: 20px;
box-shadow: 10px 10px 20px #babfc6, -10px -10px 20px #ffffff;
}About Neomorphism Generator
Neomorphism (or neumorphism) is a UI design trend that creates soft, extruded plastic look by using two box shadows — one darker and one lighter than the background color. The result is elements that appear to be slightly raised from or pressed into the surface. This generator produces the exact CSS needed for flat, concave, convex, and pressed (inset) neumorphic styles. Works best with light neutral backgrounds like grays and creams.
Private & free — this tool runs entirely in your browser.
Recommended: Kinsta — Fast managed hosting — up to $500 + 10% recurring.affiliate
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.