CSS box-shadow ジェネレーター

CSS box-shadow ジェネレーターとは？

CSS box-shadow ジェネレーターは、CSS の box-shadow プロパティを視覚的に編集できる無料ツールで、フロントエンド開発者やデザイナー向けです。1 つ以上の影のレイヤーを追加し、各レイヤーの offset-x、offset-y、ぼかし半径、広がり半径、色、inset の有無を、シンプルな数値入力とカラーピッカーで調整できます。市松模様の背景に置かれたプレビューボックスが合成結果をリアルタイムで表示し、各レイヤーをカンマ区切りでまとめた完全な box-shadow 宣言が生成されるのでコピーできます。柔らかい浮き上がり影、くっきりしたニューモーフィズム、グロー効果、Material 風の重ね奥行きなどを、値の順序を覚えなくても作れます。

CSS box-shadow ジェネレーターの使い方

1. 1 つ目のレイヤーの offset-x と offset-y（px）を設定して影を水平・垂直に動かします。マイナス値は左や上に動かします。
2. ぼかし半径（影の柔らかさ）と広がり半径（影が広がる/縮む量）を調整します。
3. スウォッチで色を選ぶか、16 進数値を入力します——#00000040 のような 8 桁 16 進数は影の透明度を設定します。
4. inset チェックボックスをオンにすると、影を要素の外側ではなく内側に描画します。
5. 「レイヤーを追加」をクリックして別の影を上に重ね、値を編集して調整します。各レイヤーはゴミ箱ボタンで削除できます。
6. プレビューの更新を確認し、生成された box-shadow の CSS をスタイルシートにコピーします。

使用例

x 0, y 4, ぼかし 12, 広がり 0, 色 #00000040

box-shadow: 0px 4px 12px 0px #00000040;

レイヤー1: 0 1 2 0 #0000001a · レイヤー2: 0 8 24 -4 #00000026

box-shadow: 0px 1px 2px 0px #0000001a, 0px 8px 24px -4px #00000026;

inset オン, x 0, y 2, ぼかし 6, 広がり 0, 色 #00000059

box-shadow: inset 0px 2px 6px 0px #00000059;

よくある質問

box-shadow の値の順序は？

各レイヤーは offset-x、offset-y、ぼかし半径、広がり半径、色の順に書き、必要に応じて先頭に inset キーワードを付けます。このツールは常に 4 つの長さ（offset-x、offset-y、ぼかし、広がり）を px で出力するため、順序が明確で、後から手で微調整するのも簡単です。

半透明や色付きの影を追加できますか？

はい。色フィールドに任意の CSS カラーを入力します——#00000040 のような完全な 8 桁 16 進数（末尾 2 桁がアルファ）で半透明の影になり、色名や任意の 16 進数も使えます。ピッカーのスウォッチは #rrggbb の単色を扱います。アルファが必要なときはテキストフィールドを編集してください。

複数の影を重ねるには？

影を追加するたびに「レイヤーを追加」をクリックします。生成される CSS は各レイヤーを上から下の順にカンマで区切ります——最初のレイヤーが最後に（最前面に）描画されます。Material 風の重ね奥行きや、外側のグローと内側のハイライトの組み合わせに使えます。

inset チェックボックスは何をしますか？

inset は影を要素の枠の内側に描画し、外側のドロップシャドウではなく押し込まれた/内側に光るような見た目を作ります。レイヤーごとにオンにでき、同じ box-shadow の値の中で inset と外側の影を混在させられます。

データはどこかにアップロードされますか？

いいえ。ジェネレーターはすべて JavaScript でブラウザ内で動作します——色や値がサーバーに送信されることはないため、プライバシーが保たれ、ページの読み込み後はオフラインでも使えます。