使い方
- シャドウパラメータを設定
ツールバーのスライダーでオフセットX/Y、ぼかし（blur）、広がり（spread）を調整します。カラーピッカーで影の色を選べます。
- プレビューを確認
下部のプレビューエリアでシャドウの見た目をリアルタイムに確認できます。inset切り替えや複数シャドウの追加も可能です。
- CSSコードをコピー
「コピー」ボタンで生成されたbox-shadow CSSコードをコピーできます。
CSS box-shadow生成ツール の具体例
基本的なドロップシャドウ
入力
出力
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.3);右下方向にぼかしのあるシンプルなシャドウです。
insetシャドウ
入力
出力
box-shadow: inset 0px 2px 8px 0px rgba(0, 0, 0, 0.25);ボックス内側に影を付けるinsetシャドウです。
特長
- オフセットX/Y、ぼかし、広がりの数値コントロール
- カラーピッカーによるシャドウ色の選択
- inset（内側シャドウ）の切り替え
- 複数シャドウの追加・削除
- リアルタイムプレビュー表示
- CSS box-shadow構文の解析・編集
- 入力データはブラウザ内で処理（サーバー送信なし）
よくある質問
複数のシャドウを設定できますか？
はい。「シャドウ追加」ボタンで複数のシャドウレイヤーを追加でき、カンマ区切りのCSS構文として出力されます。
RGBA以外の色指定はできますか？
ツールバーのカラーピッカーで選択した色にアルファ値を組み合わせてRGBA形式で出力します。
データはサーバーに送信されますか？
いいえ。すべての処理はブラウザ内のJavaScriptで行われます。データが外部に送信されることはありません。