Box Shadow Generator

このツールについて

水平 — 正の値で右に、負の値で左に移動。垂直 — 正の値で下に、負の値で上に移動。ぼかし — 大きい値ほど柔らかく拡散したシャドウになります。広がり — 正の値でシャドウが大きくなり、負の値で小さくなります。

insetを有効にすると内側シャドウを作成できます。「+ シャドウを追加」をクリックして複数のシャドウを追加すると、CSS出力にカンマ区切りで前から後ろの順にレイヤーされます。

使い方

1. 水平・垂直スライダーを調整してシャドウのオフセットを設定します。
2. ソフトなシャドウにはぼかしを上げ、シャープなシャドウには0に設定します。
3. 広がりを使ってシャドウのサイズを要素の外に広げたり縮めたりします。
4. 「+ シャドウを追加」をクリックしてシャドウを重ねると、より豊かな効果が生まれます。

活用事例

デザイナーはカードUIコンポーネントに深みと高さを出すためbox-shadowを使います。insetシャドウはボタンに押し込まれた効果を作ります。複数のシャドウを重ねるとアンビエントライトとキーライトで写実的な照明効果を作れます。

よくある質問

• insetオプションとは何ですか？ — insetシャドウは要素の境界の外ではなく内側に表示されます。入力フィールドやボタンに押し込まれた効果を作るのに便利です。
• 複数のシャドウを追加できますか？ — はい。「+ シャドウを追加」をクリックしてシャドウレイヤーを追加できます。すべてのシャドウはカンマ区切りで一つのbox-shadow宣言にまとめられます。
• 負の広がり値はどんな効果がありますか？ — 負の広がりはシャドウを要素より小さく縮めます。オフセットとぼかしと組み合わせると、片側からだけわずかに見える微妙なシャドウを作れます。