CSS Box-Shadow Generator

CSS box-shadow とは？

CSS プロパティ box-shadow は、要素に 1 つ以上のシャドウを追加します。シャドウは深度を生み出し、カード、ボタン、ダイアログなどの要素を背景から目立たせます。

box-shadow の構文

構文は: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;。Offset-X と Offset-Y で影の位置を決めます。ブラー半径でボケ具合、スプレッド半径で影の大きさを制御します。

優れたシャドウのコツ

• 異なるブラー値の複数のシャドウを使うと、よりリアルな結果になります。
• シャドウの色は控えめに — 強い色より透明な黒を使いましょう。
• Inset シャドウは押されたボタンや入力フィールドに最適です。
• ライトモードとダークモードの両方でシャドウをテストしましょう。