box-shadowジェネレーター
box-shadowをスライダーで調整し、プレビューしながらCSSを作ります。複数の影の重ね合わせ・inset・Material風のプリセット、text-shadowにも対応します。
作る影の種類
影のレイヤー（上ほど手前に描かれます）
レイヤーは最大 10 枚まで重ねられます。
プレビュー
影 Shadow
スライダーを動かすと、その場でCSSを作ります。
CSS
補足
- 影は書いた順に手前から描かれます。レイヤー一覧の上にあるものが最も手前です。
-
出力では、省略できる末尾の 0（広がり → ぼかしの順）を書きません。不透明度が 100% の色は HEX、それ以外は
rgba()で書きます。 - text-shadow には「広がり」と「内側（inset）」がありません。切り替えるとこの 2 つは出力に含めません。
- Material Design のプリセットは、MUI の elevation と同じ値です。
- 入力した値は、この端末の外へ出ません。
よくある質問
影を何枚も重ねられますか？
できます。最大10枚まで重ねられ、レイヤーごとにずれ・ぼかし・広がり・色・不透明度・内側（inset）を変えられます。影はレイヤー一覧の上にあるものほど手前に描かれ、出力もその順にカンマで区切ります。
text-shadow（文字の影）も作れますか？
作れます。上の切り替えで text-shadow を選ぶと、プレビューが文字になり、出力のプロパティ名も text-shadow に変わります。text-shadow には「広がり」と「inset」が無いため、この 2 つは出力に含めません。
Material Design の elevation と同じ影にできますか？
できます。プリセットの「Material elevation 1〜24」は MUI の elevation と同じ 3 層の値です。ほかに、ふんわりした影・くっきりした影・内側の影・グロー・ニューモーフィズム・文字の縁取りのプリセットがあります。
出力に 0 が書かれていないのはなぜですか？
省略しても意味が変わらない末尾の 0 を書いていないためです。広がりが 0 なら広がりを、さらにぼかしも 0 ならぼかしも省きます。横と縦のずれは省略できないので、0 でも必ず書きます。