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

CSSのbox-shadowプロパティのジェネレーターです。
リアルタイムに変化するプレビューを確認しながら、簡単にお好みのbox-shadowを生成できます。

Box Shadowジェネレーターの使い方

構成エリアの各設定を操作すると、出力エリアのプレビューにbox-shadowがリアルタイムに適用されます。

各設定はbox-shadowのプロパティに対応しています。設定値について以下に記載しますが、box-shadowについてより詳しい情報が必要な場合はMDNのドキュメントも参照ください。
box-shadow - CSS: カスケーディングスタイルシート | MDN

構成について

offsetX、offsetY

offsetXとoffsetYは影のオフセットを設定します。

offsetXは水平方向の距離を表します。正の値は右方向、負の値を指定した場合は左方向に影がセットされます。offsetYは垂直方向の距離を表します。正の値は下方向、負の値を指定した場合は上方向に影がセットされます。
2つとも0の場合は、影を適用する要素の後ろにセットされます。

blur

blurは影のぼかしを設定できます。値が大きいほどぼかしが大きくなります。結果的に影の面積が広くなり影の色が薄くなります。

spread

spreadは影の広がりを設定できます。値が大きいほど影が拡張されます。0の場合は要素と同じ大きさとなります。

inset

insetをONにすると影は要素の内側にセットされます。

color

影の色を指定できます。色ボックス部分を選択するとカラーパレットが表示され、色を変更できます。

プレビューカラー

この設定はbox-shadowのCSSに直接影響するものではありませんが、プレビューのボックス色、背景色をそれぞれ変更することができます。