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.
使い方
1Pick a background color using the color picker.
2Adjust the shadow distance, blur radius, and intensity sliders.
3Select a shape style: flat, concave, convex, or pressed.
4Preview the result on the live shape preview.
5Click 'Copy CSS' to copy the generated box-shadow code.
よくある質問
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.
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.
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.
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.
{# Alpine.js — self-hosted. (The previous jsdelivr CDN tag had a stale SRI
integrity hash, so the browser refused to run it and window.Alpine was
never defined — silently breaking every FAQ accordion and Alpine tool.) #}