Box Shadow ジェネレーター

このツールとは？

box-shadowは要素の背後（または内側）に影を描画するCSSプロパティです。手書きすると水平オフセット・垂直オフセット・ぼかし半径・広がり半径・色という最大5つの値を順番通りに書く必要があり、さらにinsetというオプションのキーワードもあるため、最初は順序を間違えたり、影が薄すぎたり濃すぎたりしがちです。

このツールならスライダーを動かすだけ——ライブプレビューボックスで影の変化を確認しながら、気に入ったら正確なCSSをコピーするだけです。カラーピッカーと不透明度スライダーを組み合わせることで、適切なrgba()の値が自動生成されます。半透明の影のほうが完全に不透明な影より自然に見えることが多いためです。

なぜこれを使うのか？

• どのコントロールを調整しても即座にプレビューが更新——コードを確定する前に正確な影を確認できます。
• オフセットX/Y、ぼかし、広がり、色、不透明度をすべて一箇所で完全にコントロールできます。
• ワンクリックでinsetを追加し、浮いたドロップシャドウではなく「押し込んだ」凹んだ見た目にできます。
• 選んだ不透明度で色がすでにrgba()に変換された、そのまま貼り付け可能なCSSを出力します。
• すべてブラウザ内で完結——設定した内容はどこにもアップロードされません。
• 無料、登録不要、モバイルでも動作します。

使い方

1. オフセットXとYを設定して影の位置を決めます——正の値は右/下、負の値は左/上に移動します。
2. ぼかし半径を上げると影の端が柔らかくなり、広がり半径を上げると影が要素自体より大きくなります。
3. 色を選び、不透明度を調整します——現実的な影の多くは純粋な黒ではなく、15〜40%程度の不透明度を使います。
4. 影を要素の背後ではなく、ボーダーの内側に表示したい場合は「内側の影 (inset)」にチェックを入れます。
5. 生成されたCSSをコピーして、スタイルシートに貼り付けます。

例

入力

オフセット: 0px、10px · ぼかし: 20px · 広がり: 0px · 色: 黒、不透明度35%

出力

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);

水平方向のオフセットなしで要素の真下に柔らかい影がつく、カードやボタンで最もよく使われる影のスタイルのひとつです。

単一の影 vs 重ねた影

このツールは単一の影レイヤーを生成します。これは実際のユースケースの大部分——ボタン、カード、モーダル、ドロップダウンではほぼ常に1つの影しか使わない——をカバーしています。CSSではカンマ区切りで同じ要素に複数の影を重ねることもでき、より凝った奥行き効果（例えば深く濃い影の上に柔らかく広い影を重ねる）を作れますが、これは手動で追加する応用的な調整です。ここで1つ影を生成し、その行を複製して2つ目の値を調整し、カンマでつなげてください。

よくあるbox-shadowのパターン

• 控えめなカードの浮き上がり：小さいオフセット（0〜4px）、適度なぼかし（8〜16px）、黒10〜20%の不透明度。
• 浮き上がったモーダル/ドロップダウン：大きめのオフセット（4〜10px）とぼかし（20〜30px）、20〜35%の不透明度でより強い浮遊感を演出。
• 押し込まれた/内側のボタン：insetをチェックし、小さめのオフセットと適度なぼかしで、浮き上がりではなくへこみに見えるようにします。
• カラーの光彩：黒の代わりにブランドカラーを選び、不透明度を40〜60%に上げ、広がりを少し増やしてボタン周りに柔らかい光彩効果を出します。
• シャープ/ハードな影：ぼかしと広がりを両方0にすることで、柔らかい影ではなく実線のオフセットシルエットになります。

角丸との組み合わせ

影と角丸は常にセットで使われます——カード、ボタン、モーダルはほぼ必ず両方を組み合わせています。Border Radius ジェネレーターで同じ要素の角を丸め、生成された2つのCSS宣言を一緒に適用してみてください。

→ Border Radius ジェネレーター · 単位変換ツール

よくある質問