Neumorphism (or soft UI) is a design style that simulates extruded plastic surfaces using light and dark shadows on a monochromatic background. It creates a tactile, raised or indented look without actual images.

Why do I need two shadow colors?

Neumorphism uses two shadows: a lighter shadow on the top-left (simulating a light source from the top-left) and a darker shadow on the bottom-right. This dual-shadow effect creates the illusion of depth and material thickness.

What is the difference between flat, concave, convex, and pressed?

Flat has uniform surface color. Concave uses a gradient that dips inward. Convex uses a gradient that bulges outward. Pressed reverses the shadow directions to simulate a button being pushed in.

Does neumorphism work on any background color?

Neumorphism works best on medium-value colors — not too dark, not too light. Very dark or very light backgrounds reduce the visible shadow contrast. Mid-range grays and muted pastels give the best results.

Design 무료 회원가입 불필요

CSS Neumorphism Generator

Generate CSS neumorphism / soft UI box-shadow styles with live preview.

도구를 불러오는 중…

이 도구에 대해

Design soft, extruded UI elements with the CSS Neumorphism Generator. Adjust background color, shadow distance, blur radius, shadow intensity, and shape style (flat, concave, convex, or pressed). The generator automatically calculates the correct light and dark shadow colors from your base color, producing the signature neumorphic look. Copy the generated CSS box-shadow code straight into your stylesheet.

사용 방법

1 Pick a background color using the color picker.
2 Adjust the shadow distance, blur radius, and intensity sliders.
3 Select a shape style: flat, concave, convex, or pressed.
4 Preview the result on the live shape preview.
5 Click 'Copy CSS' to copy the generated box-shadow code.

이 도구에 대해

사용 방법

자주 묻는 질문