Box Shadow Generator

使い方

1. オフセット X / オフセット Y のスライダーを動かして、影をボックスからずらします。
2. ぼかしで柔らかさを、広がりでぼかす前の影の拡大縮小を調整します。
3. 色を選びます。ピッカーはアルファ対応なので、半透明の影もすぐ作れます。
4. inset をオンにすると、影がボックスの内側に反転します。
5. CSS パネルから box-shadow: の行をコピーし、スタイルシートに貼り付けます。

よくある用途

• カードの立体感 —— 重く見えない、柔らかく広い影を探す。
• フォーカスリングや押下状態 —— 広がりを詰めて inset に切り替え、押し込まれた感じを作る。
• デザイン トークン —— 正確な値を --shadow-sm 型の変数として記録する。
• CSS の学習 —— スライダーを 1 つずつ動かし、どのパラメータが何を変えるかを見る。

よくある質問

Q: 自分のサイトでは見え方が違うのはなぜ？ A: プレビューはこのページの背景色を使っています。実際の要素の背景が違えば、コントラストによって影の見え方は変わります。実際のレイアウトに貼って判断してください。

Q: 影を 2 層に重ねられますか？ A: このツールの出力は 1 層で、大半の用途を満たします。重ねる場合はここで各層を生成し、CSS でカンマ区切りにします。リストの先頭の影が一番上に描画されます。

Q: inset でもぼかしと広がりは効きますか？ A: はい。inset キーワードが宣言の先頭に来るだけで、オフセット・ぼかし・広がり・色の挙動は同じです。ボックスの内側の縁から測定が変わるだけです。