CSS ボックスシャドウ生成器
CSS box-shadow値をビジュアルで生成。水平/垂直オフセット・ブラー・スプレッド・不透明度・色をスライダーで調整。リアルタイムプレビュー・インセットモード・ワンクリックコピー対応。ブラウザ完結。
使い方
- 水平オフセットと垂直オフセットスライダーでシャドウの位置を調整します。
- ブラー半径を大きくするとシャドウのエッジが柔らかくなり、0にするとシャープなシャドウになります。
- スプレッド半径でシャドウのサイズを拡大・縮小します。
- 不透明度でシャドウの透明度を制御します。
- カラーピッカーまたはhex値を直接入力してシャドウカラーを設定します。
- インセットトグルで外側・内側シャドウモードを切り替えます。
- いずれかのコントロールを調整するとプレビューがリアルタイムで更新されます。
- コピーをクリックして生成された
box-shadowのCSS値をクリップボードにコピーします。
box-shadow 構文リファレンス
/* 基本的な外側シャドウ */
box-shadow: offsetX offsetY blur spread color;
/* インセットシャドウ */
box-shadow: inset offsetX offsetY blur spread color;
/* 複数シャドウ */
box-shadow: shadow1, shadow2, shadow3;よくある使用例
- カード浮き上がり：
box-shadow: 0 4px 16px rgba(0,0,0,0.12)— 浮かんだカード効果 - ハードドロップシャドウ：
box-shadow: 4px 4px 0 rgba(0,0,0,1)— レトロ/ボールドスタイル - フォーカスリング：
box-shadow: 0 0 0 3px rgba(59,130,246,0.5)— アクセシブルなフォーカスインジケーター - インナーシャドウ（入力欄）：
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) - グロー効果：
box-shadow: 0 0 20px rgba(99,102,241,0.6)— ネオン/グローハイライト
関連ツール
- CSS 変数ジェネレーター — シャドウ値をデザイントークンとして保存
- CSS Grid ジェネレーター — グリッドレイアウトをビジュアルで構築
FAQ
CSS box-shadowプロパティとは？
CSSのbox-shadowプロパティは、要素に1つ以上のシャドウ効果を追加します。各シャドウは水平オフセット・垂直オフセット・ブラー半径・スプレッド半径・色で定義されます。insetキーワードを追加すると、シャドウが要素の内側に表示されます。
各スライダーは何を制御しますか？
水平オフセット：負値で左、正値で右。垂直オフセット：負値で上、正値で下。ブラー半径：値が大きいほどシャドウの端がぼけ、0はシャープなエッジ。スプレッド半径：正値でシャドウを拡大、負値で縮小。不透明度：0%で透明、100%で完全不透明。
インセットシャドウとは？
insetキーワードを使うと、シャドウが要素の外側ではなく内側に表示されます。凹んだ・押し込まれたような視覚効果を生み出し、入力フィールドや押下されたボタンによく使われます。
ツールはどのカラーフォーマットを出力しますか？
ツールはrgba()カラー値を出力します。不透明度がカラー関数に直接含まれるため、すべての現代ブラウザで正確にレンダリングされます。
複数のbox-shadowを使えますか？
はい。CSSはカンマで複数のシャドウを区切ることで対応しています：box-shadow: 2px 2px 4px rgba(0,0,0,0.2), -2px -2px 4px rgba(255,255,255,0.8)。このツールで生成した値を手動で組み合わせて多層効果を作れます。
このツールはクライアントサイドで動作しますか？
はい。すべての生成はブラウザ内で行われます。サーバーにデータは送信されません。