💻 開発者ツール

box-shadowジェネレーター

スライダーでbox-shadowを調整しCSSを出力します。

例（クリックで試す）

使い方

スライダーでオフセット（X/Y）・ぼかし・広がり・色を調整するか、例チップを選びます。プレビューと box-shadow 文字列が同時に更新されます。inset をオンにすると影が要素の内側に落ち、へこんだ見た目になります。

具体例

  • 控えめなカード → box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.15);
  • 強い浮き → box-shadow: 0px 10px 30px -4px rgba(0,0,0,0.25);
  • 内側（inset） → box-shadow: inset 0px 2px 4px 0px rgba(0,0,0,0.20);
  • ブランド色 → box-shadow: 0px 6px 16px 0px rgba(234,99,121,0.35);

よくある質問

入力データはサーバーに送信されますか？
いいえ。処理はすべてブラウザ内で完結し、外部に送信・保存されません。
自然な影にするコツは？
X=0・Yを少しプラス（下に落とす）にし、blurを大きめ・色は黒の低い不透明度（10〜20%）にすると馴染みます。例: box-shadow: 0 4px 12px rgba(0,0,0,0.15)。
insetは何に使いますか？
insetを付けると影が要素の内側に落ち、へこんだ（押し込んだ）見た目になります。入力欄やトグルの凹み表現に使います。例: box-shadow: inset 0 2px 4px rgba(0,0,0,0.2)。
複数の影は重ねられますか？
CSSではカンマ区切りで複数指定できます。本ツールは1つの影を生成するので、出力をコピーしてカンマでつなぎ、近い影と遠い影を重ねると立体感が出ます。