CSSボックスシャドウ作成
影を重ねて見た目を確かめ、box-shadowのCSSをコピー
色・デザイン無料・登録不要端末の中で処理PR・このページには広告が含まれます
プレビュー
背景の色
カードの色
影を複数重ねると、先に書いた影（影1）がいちばん上に表示されます。小さく濃い影と大きく薄い影を重ねると、自然な立体感になります。
CSSボックスシャドウ作成の使い方
- 見本から近いものを選ぶか、「横のずれ（X）」「縦のずれ（Y）」「ぼかし」「広がり」を動かします。
- 「影の色」と「不透明度」を決めます。内側に付けたいときは「内側の影（inset）」に印を付けます。
- 「影を重ねる（最大5つ）」で影を足し、プレビューで見た目を確かめます。
- 「CSSをコピー」でコードをコピーします。
よくある質問
Q. 「ぼかし」と「広がり」の違いは？
A. ぼかしは影の輪郭をぼかす量、広がりは影そのものを大きく（マイナスなら小さく）する量です。
Q. 影を重ねるとどちらが上になりますか？
A. 先に書いた影（影1）がいちばん上に表示されます。
Q. 自然な影にするコツは？
A. 小さく濃い影と、大きく薄い影を重ねると自然な立体感になります。見本の「浮き上がり」がその例です。
このツールについて
CSSボックスシャドウ作成の無料ツール。影を重ねて見た目を確かめ、box-shadowのCSSをコピー。登録不要で、入力した内容はブラウザの中だけで処理します。
最終更新：2026/10/19