#000000
透明度20 %
box-shadowジェネレーター
スライダーを動かして影を調整。複数の影を重ねてリッチなエフェクトをコピーしてすぐ使えます
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.20);使い方
- 各スライダーを動かして影の位置・ぼかし・色を調整しよう
- 「＋ レイヤーを追加」で影を重ねて、リッチなエフェクトを作ろう（最大5層）
- 「📋 CSSをコピー」ボタンでコードをコピーして、自分のスタイルシートに貼り付けよう！
スライダーで調整する vs CSSを手打ちする
box-shadow: 4px 8px 16px rgba(0,0,0,0.2) — この数値を手打ちで調整すると、保存→確認→修正の往復が何十回も発生する。
このジェネレーターならスライダーを動かした瞬間にプレビューが変わるから、「この影だ！」と思った瞬間にCSSをコピーできる。
中高生の制作で影を使う場面
- ポートフォリオのカード — プロジェクト一覧のカードに影をつけると「浮いている」感じが出て、クリックできそうな印象を与える。
- ボタンのホバーエフェクト — ホバー時に影を大きくすると「押せる」フィードバックになる。transition と組み合わせて滑らかに。
- モーダルやドロップダウン — 背景から浮かせることで「前面に出ている」ことを視覚的に伝える。
影のデザインパターン
- Material Design風 — Y方向に大きめのオフセット + 広いぼかし。要素が「浮いている」印象。
- ニューモーフィズム — 明るい影と暗い影を2層重ねる。要素が「押し出されている」立体感。
- inset（内側の影） — 凹んだ印象を作る。入力フォームやプログレスバーに。
よくある質問
- Q. box-shadow と filter: drop-shadow() の違いは？
- box-shadow は要素の「ボックス」に影をつける（四角形）。drop-shadow は要素の「形状」に沿って影をつける。透過PNGやclip-pathで切り抜いた要素にはdrop-shadowが有効。
- Q. 影の色は何色がいい？
- 黒（rgba(0,0,0,0.1〜0.3)）が定番だけど、背景色に合わせた色付き影（例: 青いボタンに青い影）を使うとより自然に見える。