CSSボックスシャドウジェネレーター

まず影の値を決め、次に対象の形で確認します

このツールはライブ調整が中心です。コピーされる影の値と、プレビュー用の要素設定を分けて見ると、どの値がCSSに入るのか迷いにくくなります。

1. 影タブでレイヤーを作ります。 水平オフセット、垂直オフセット、ぼかし、拡張、色、透明度、内側の影をレイヤーごとに調整します。
2. 必要なときだけレイヤーを追加します。 複数レイヤーはカンマ区切りの1つの box-shadow 値になります。効果が薄いレイヤーは削除します。
3. プレビュータブで対象の形を合わせます。 四角形、角丸、円形、ボタン、カードを切り替え、実際に使う要素に近い形で見ます。
4. プリセットは出発点として使います。 ソフト、レイヤー、ネオン、内側などのプリセットを選んだあと、最終コードを確認してからコピーします。

オフセットは方向、ぼかしと拡張は影の質感を変えます

box-shadow の値は似た名前でも役割が違います。ぼかしと拡張を同じものとして扱うと、影がにじみすぎたり、逆に硬い線のように見えたりします。

出力コードはCSSのbox-shadow順序に沿っています

出力される値は、必要に応じた inset、水平オフセット、垂直オフセット、ぼかし半径、拡張半径、色で構成されます。複数の影はカンマでつながり、ブラウザは1つの box-shadow 宣言として読みます。

内側の影は、1行のinsetコードとして読むとわかりやすいです

たとえば内側の影をオンにし、水平 12px、垂直 8px、ぼかし 18px、拡張 -2px、色 #336699、透明度 0.35 を入れると下のような値になります。負の拡張で広がりすぎを抑え、inset によってカードの内側へ押し込まれたように見えます。

コピーする前に、実際の背景で見え方を確認します

影はカードを見やすくできますが、強すぎると画面が重く見えます。明るい背景と暗い背景では、同じCSS値でも印象が変わります。

• ぼかしを先に大きくし、透明度は低めにします。 濃く小さい影より、広く薄い影のほうが自然に見えることがよくあります。
• 拡張は小さな幅で調整します。 大きな正の値は枠線のように見え、大きな負の値は影をほとんど隠してしまうことがあります。
• レイヤー数は意図して増やします。 2〜3枚の影は奥行きを作れますが、多すぎるとコードの見通しが悪くなります。
• ダーク画面では影を調整し直します。 明るいカードで自然な黒い影も、暗い背景では汚れのように見えることがあります。

よくある質問