CSS box-shadow ジェネレーター
横・縦・ぼかし・広がり・色・内側を調整して、box-shadow の CSS を作ります。影は複数重ねられ、プレビューと出力は同じ値から作られます。既存の CSS を貼って編集もできます。
読み込み中…
使い方と仕様
影ごとに、横（x）・縦（y）・ぼかし・広がり・色・不透明度・内側（inset）を指定します。ぼかしは 0 以上で、マイナスは CSS では無効なので入力の段階で止めます。広がりが 0 でも省かず、`0 4px 8px 0 rgba(0, 0, 0, 0.2)` のように4つの長さをそろえて出力します。0 は単位なしの `0`、それ以外は px で、小数は第2位までに丸め、末尾の 0 は付けません。
影は最大20個まで重ねられ、並べ替えもできます。先に書いた影ほど手前に描かれます。出力は影ごとに行を分けたカンマ区切りです。色は rgba() で出すか、不透明度が 1 のときだけ #rrggbb で出すかを選べます。プレビューの背景色・箱の色・角丸は見た目の確認用で、出力には入りません。
「CSSを貼り付けて編集する」は、このツールが出す形と、手で書かれた一般的な形を読み戻します。色は #rgb・#rrggbb・#rrggbbaa・rgb()/rgba()・black/white/transparent、長さは px と単位なしの 0 に対応しています。em や % などの単位、var()、calc()、色の省略（文字色になるため）は読み取れず、理由を表示して止まります。
よくある質問
- 影を重ねると、どちらが上に見えますか？
- リストの先頭（影 1）が最も手前です。上へ・下へのボタンで順番を入れ替えると、出力の並びも同じ順に変わります。
- ぼかしや広がりに負の値を入れられますか？
- ぼかしは 0 以上のみです。広がりは負の値にでき、影を箱より小さくできます。浮き上がりのプリセットは、この負の広がりを使っています。