Box Shadowジェネレーターとは？

複数の影を重ねて、カードやボタン、モーダルなどのbox-shadowを作るツールです。レイヤーごとに位置、ぼかし、広がり、色、不透明度、内側の影を設定し、プレビューで見た目を確認しながらCSSとTailwindクラスをコピーできます。

近景と遠景の影を重ねると、単一の影では出しにくい自然な浮き上がりを作れます。

使い方

1. プリセットを選ぶか、「レイヤーを追加」で影を増やします。
2. レイヤーを選び、位置やぼかし、色、不透明度を調整します。
3. プレビューの形や背景を変えて、用途に近い見え方を確認します。
4. 出力形式を選び、CSSまたはTailwindクラスをコピーします。

主な設定項目

シャドウレイヤー

影は複数のレイヤーの重なりでできています。レイヤーごとに表示と非表示を切り替えられ、複製して一部の値だけ変えると、近い影を重ねた表現を作れます。

位置とぼかし

水平方向と垂直方向で影の位置を決めます。正の値と負の値で影の出る方向が変わります。ぼかしは影の輪郭の柔らかさ、広がりは影の大きさを調整します。広がりはマイナスにもでき、影を締めたいときに使います。

色と不透明度

影の色と不透明度は別々に調整できます。色を変えずに濃さだけ下げられるため、影の強さを細かく詰められます。色付きの影にすると、背景になじむアクセント表現になります。

内側の影

「内側の影」をオンにすると、要素の外側ではなく内側に影が描画されます。入力欄やくぼんだパネルの表現に向いています。レイヤーごとに切り替えられるため、外側の影と内側の影を同じ要素に重ねることもできます。

プリセット

カード、ポップオーバー、モーダル、ナチュラル、インセット、アクセントの6種類から選べます。プリセットを適用するとレイヤーが置き換わるため、そこから値を調整して仕上げます。

プレビュー

カード、ワイド、ボタン、円形から形を選べます。背景はライトとダークを切り替えられ、ボックスの色も変更できます。

活用シーン

• カードやパネルに、背景から自然に浮き上がる影を付けたいとき
• モーダルやポップオーバーに、近景と遠景の影を重ねたいとき
• ボタンや入力欄に、押し込んだ・くぼんだ表現を作りたいとき
• 色付きの影で、ブランドカラーに合わせたアクセントを付けたいとき
• ライトテーマとダークテーマの両方で影の見え方を確認したいとき

使うときの注意点

• プレビューの背景色とボックスの色は、生成されるCSSには含まれません