CSSボックスシャドウジェネレーター
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);Drop Shadow
最終更新: 2026年 · 無料オンラインツール
CSSボックスシャドウジェネレーターとは？
オフセット・ぼかし・広がり・色・内側影（inset）を調整しながらbox-shadowをリアルタイムでプレビューし、完成したCSSコードをコピーできる無料オンライン生成ツール。 テストや開発で必要な値をその場で生成でき、処理はすべてブラウザ内で行われるためデータが外部に送信されず、登録なしで無料で利用できます。
使い方
- 1プリセット選択— プリセットボタンで素早く始めましょう。
- 2スライダー調整— X/Yオフセット、ブラー、スプレッドのスライダーで影を調整してください。
- 3プレビュー確認— 上部のプレビューでリアルタイムに結果を確認してください。
- 4CSSをコピー— コピーボタンでbox-shadow CSSを取得してください。
関連ツール
CSSグラデーションジェネレーターlinear・radial・conicのCSSグラデーションを作成し、カラーストップや角度を調整してCSSコードをコピーできる無料ツール。 テストや開発で必要な値をその場で生成でき、処理はすべてブラウザ内で行われるためデータが外部に送信されず、登録なしで無料で利用できます。 結果はワンクリックでコピーして、すぐに活用できます。
CSSボーダーラディウスジェネレーター8つの角の値をスライダーとハンドルで調整しながらborder-radiusの形をリアルタイムでプレビューし、完成したCSSコードをコピーできる無料オンライン生成ツール。 テストや開発で必要な値をその場で生成でき、処理はすべてブラウザ内で行われるためデータが外部に送信されず、登録なしで無料で利用できます。
CSSフレックスボックスジェネレーターjustify-content・align-items・flex-directionなどのプロパティを調整してFlexboxレイアウトをリアルタイムでプレビューし、CSSコードをコピーできる無料オンラインツール。 テストや開発で必要な値をその場で生成でき、処理はすべてブラウザ内で行われるためデータが外部に送信されず、登録なしで無料で利用できます。
よくある質問
はい、「影を追加」ボタンで複数の影を重ねることができます。
はい、各影のInsetチェックボックスを有効にすると内側の影になります。
Subtle、Medium、Large、Inset、Doubleの5種類のプリセットを提供しています。
はい、色入力欄にrgba(0,0,0,0.15)形式で直接入力できます。
いいえ。すべての計算はブラウザで行われます。