box-shadowの基本
box-shadowは、HTML要素に影をつけるCSSプロパティです。囲み枠、ボタン、ポップアップ、入力欄、画像、吹き出しなど、Webデザインの立体感を出すときによく使われます。
box-shadow: offset-x offset-y blur-radius spread-radius color;box-shadowジェネレーター
ボタンや囲み枠に使えるCSSのbox-shadowを、サンプルから選んでそのままコピーできます。
数値を調整して、自分好みの影を作ることもできます。
作成したCSSはブラウザ上でプレビュー・コピーできます。
入力内容がサーバーに送信・保存されることはありません。
サンプル一覧
好きな影を選ぶと、右のライブプレビューとCSSにすぐ反映されます。
シャドウ設定
サンプルを選んだあと、影の位置・ぼかし・色を調整できます。
使う前のチェック
- サンプルを選ぶと現在のレイヤー設定が置き換わります。
- 作成したCSSはサーバーに送信・保存されません。
- 実際のページでは、背景色や要素サイズに合わせて薄めの影から調整するのがおすすめです。
box-shadowとは？
各値の意味
- offset-x：影を横方向に動かします。正の値なら右、負の値なら左です。
- offset-y：影を縦方向に動かします。正の値なら下、負の値なら上です。
- blur-radius：影のぼかし具合です。大きいほど、ふんわりした影になります。
- spread-radius：影の広がり具合です。正の値なら広がり、負の値なら小さくなります。
- color：影の色です。rgba()を使うと透明度も調整できます。
insetとは？
insetは、影を要素の内側につける指定です。入力欄の内側のくぼみや、ボタンが押し込まれたような表現に向いています。
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.18);複数の影を重ねる書き方
複数の影はカンマ区切りで指定します。薄い影と大きめの影を重ねると、より自然で立体感のあるデザインになります。
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.08),
0 8px 24px rgba(0, 0, 0, 0.12);自然な影にするコツ
- 黒をそのまま使うより、rgba()で透明度を低くします。
- 影を濃くしすぎず、blurを少し大きめにするとやわらかく見えます。
- 四角いパーツではoffset-yを少し下にずらすと自然です。
- ボタンでは通常時とホバー時で影を変えると、クリックできる雰囲気が出ます。
よく使うbox-shadowの例
たとえば box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); は、影を横には動かさず、下方向に4pxずらし、12pxぼかして、黒色を12%の透明度で表示しています。box-shadowジェネレーターで近い値から調整すると、書き方も覚えやすくなります。
影を強くしすぎると、古いデザインや重たい印象に見えることがあります。囲み枠やボタンでは、薄めの影から調整するのがおすすめです。
