CSSボックスシャドウ（box-shadow）生成ツール
カード影・右下方向・内側の影など、実務でよく使う
box-shadow
をすぐ作れるツールです。定番の実務プリセットに加えて、Apple風・Material風・Neumorphism
などの見本帳プリセットも用意しています。ベースを選んでスライダーで微調整するだけで、そのまま使えるCSSコードが完成します。
📄 CSSコード
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);CSS box-shadow に関するよくある質問
Q. box-shadow の基本的な書き方は？
A.
水平方向・垂直方向・ぼかし・広がり・色の順に指定します。たとえば
box-shadow: 0 4px 10px
rgba(0,0,0,0.1);
のように書きます。広がり（Spread）は省略可能で、省略すると
0 として扱われます。
Q. Blur と Spread の違いは？
A. Blur は影のぼかしの強さ、Spread は影の広がりの大きさを調整する値です。Blur を大きくするとふんわりやわらかい影になり、Spread を大きくすると影の面積そのものが広がります。カードデザインでは Blur を使い、Spread は控えめにするのが定番です。
Q. Inset はどんな時に使いますか？
A. Inset を付けると要素の内側に影が描画されます。押し込まれたボタン、テキスト入力欄のへこみ表現、Neumorphism スタイルの凹パーツなど、「奥に沈んでいる」印象を作りたいときに使います。
Q. 複数の影を重ねることはできますか？
A.
はい。box-shadow
はカンマ区切りで複数指定できます。たとえば
box-shadow: 0 1px 2px rgba(0,0,0,0.04),
0 8px 16px rgba(0,0,0,0.04);
のように書くと、近くの小さな影と遠くの大きな影を重ねて自然な立体感を出せます。このページの
Apple Smooth・Neumorphism
プリセットで実際の仕上がりを確認できます。