Neumorphism Generator

Design

Create the popular "neumorphism" (soft UI) effect. Customize the size, radius, distance, and color to generate the perfect design.

Adjust Sliders: Use the sliders to control the element's size, corner radius, and shadow distance.
Pick a Color: Choose a base color for the element. Neumorphism works best with light, low-saturation colors.
Live Preview: See your changes applied to the preview box in real-time.
Copy CSS: Once you are happy with the result, click the "Copy" button to get the CSS code.

Size200px

Radius50px

Distance20px

Color

Inset Shadow

border-radius: 50px;
background: #e0e0e0;
box-shadow: 20px 20px 40px #cccccc,
             -20px -20px 40px #f4f4f4;

Loading Ad...

Related Tools

Explore other tools in the Design category.

Visualize and generate CSS border-radius.

Generate CSS box shadows visually.

Convert between HEX, RGB, and HSL values.

Generate color palettes from a single color.

Generate lighter and darker shades of a color.

Preview CSS animations and get the code to use them.