box-shadowを構成する六つの設定
CSSのbox-shadowは，要素の箱に外側または内側の影を描くプロパティです．このビルダーでは，水平オフセット，垂直オフセット，ぼかし半径，広がり半径，色，不透明度をレイヤーごとに指定し，必要に応じてinsetを付けます．生成順は「inset，X，Y，blur，spread，rgba()」です．
Xは-100〜100pxで，正の値ほど右，負の値ほど左へ影をずらします．Yも-100〜100pxで，正の値は下，負の値は上です．blurは0〜150pxで，0なら輪郭のはっきりした影になり，大きくするほど境界がぼやけます．spreadは-50〜100pxで，正の値は影の基準領域を広げ，負の値は縮めます．
insetをオンにすると，影を要素の内側へ描く構文になります．これは外側の影と見え方が異なるため，同じオフセットやぼかしでも結果をプレビューで確認します．本ツールはブラウザのbox-shadow描画をそのまま利用し，独自の光源計算やガウスぼかし処理を実装しているわけではありません．
例えば初期レイヤーの一つは，box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.10)という形で読めます．最初の0pxがX，10pxがY，25pxがblur，-5pxがspreadで，最後が色と不透明度です．insetをオンにした場合だけ，この数値列の先頭へinsetを加えます．
値の役割をこの順番で確認すると，コピー後に手作業で調整する場合も変更箇所を見分けやすくなります．
複数レイヤーとカンマ区切りの順序
シャドウレイヤー管理では，新しい影の追加，選択，削除，ON/OFFを行えます．新しいレイヤーはX 0px，Y 4px，blur 10px，spread 0px，黒，不透明度15%，外側の影として追加されます．すべてのレイヤーを削除することはできず，最低1件を残します．ただし，残っているレイヤーをすべてOFFにすることは可能で，その場合の出力値はnoneです．
ONになっているレイヤーは，画面の配列順にカンマと改行で連結します．CSSでは複数のbox-shadowをカンマ区切りで指定でき，先に書いた影が後の影より前面に描かれます．本ツールにはドラッグによる並べ替え機能がないため，追加後の順番を自由に入れ替えることはできません．必要ならコピー後に各値の記述順を編集します．
レイヤーごとに異なる方向，ぼかし，広がり，色，insetを組み合わせられますが，Z軸やelevation値から影を自動算出する機能ではありません．レイヤー数を増やせば必ず自然になるわけでもないため，1件ずつON/OFFし，各影が全体へ与える変化を確認すると調整しやすくなります．
6桁HEXと不透明度からrgba()を作る
影色は#000000や#3b82f6のような#RRGGBB形式で入力します．カラーピッカーで選ぶか，文字欄へ6桁HEXを入力できます．短縮形の#RGB，8桁HEX，rgb()，rgba()，hsl()，hsla()の直接入力には対応しません．入力途中などで形式が崩れた場合はエラーを表示し，不正な色を持つレイヤーがある間はCSSのコピーボタンを無効にします．
変換時はHEXの2桁ずつを赤・緑・青に分け，16進数から0〜255の10進数へ変換します．不透明度スライダーは0〜100%で，内部では0〜1の値として保持します．出力するalphaは小数第2位までの文字列です．例えば黒を選んで不透明度25%にするとrgba(0, 0, 0, 0.25)になります．
影色とは別に，プレビューボックスの色も#RRGGBB形式で指定します．こちらが不正な間はボックスを透明として表示し，修正案内を出します．ボックス色は影のCSSへ含まれないため，生成コードはbox-shadowだけです．背景色との合成結果，知覚色差，コントラスト，画像背景上の見え方を数値評価する機能はありません．
四つのプリセットに入っている固定値
「ソフト（定番）」は，X 0px，Y 25px，blur 50px，spread -12px，黒，不透明度25%の外側1レイヤーです．広めのぼかしと負のspreadを組み合わせた開始例で，ボタンを押すと現在のレイヤー一覧をこの1件へ置き換えます．
「ハード（ネオモフィズム風）」という画面上のプリセットは2レイヤーです．1件目はX/Y 6px，blur/spread 0px，#1e293b，不透明度100%，2件目はX/Y 12px，blur/spread 0px，#64748b，不透明度50%です．どちらも輪郭をぼかさない外側の影です．名称は見た目を探るためのラベルで，特定のデザイン方式を自動的に完成させるものではありません．
「インナー（内向き）」は，X/Y 2px，blur 5px，spread 0px，黒，不透明度30%のinset 1レイヤーです．「ネオン発光（Glow）」はオフセット0pxの青い外側2レイヤーで，1件目がblur 15px，spread 5px，#3b82f6，60%，2件目がblur 30px，spread 10px，#60a5fa，30%です．
いずれも固定値を読み込むだけなので，適用後に各スライダーを動かして対象デザインへ合わせます．
プレビューとコピーされる三つの宣言
プレビュー対象の箱は，色，角丸，サイズを変更できます．角丸は0〜100px，縦横同じ大きさの箱は100〜250pxです．背景は市松模様，白，黒の三つから選べるため，明暗の異なる背景で透明な影の見え方を比較できます．市松模様は確認用のCSS背景で，適用先の透明部分を実際に合成するものではありません．
画面の箱には，ONかつ有効な色を持つレイヤーから作ったboxShadowをインラインスタイルとして適用します．実際のWebサイトでは箱の形，周囲の余白，背景，他の要素が異なるため，プレビューだけで最終結果を確定せず，適用先でも確認してください．
コピーされるのは，同じ値を持つbox-shadow，-webkit-box-shadow，-moz-box-shadowの3宣言です．接頭辞付き宣言を含みますが，すべてのブラウザや古い環境での互換性を保証するものではありません．対象環境で標準宣言だけを使う方針なら，コピー後に不要な行を削除できます．
Clipboard APIが成功した場合だけ完了表示を出し，失敗時は表示コードを手動で選ぶよう案内します．
非対応機能と描画負荷の確認
このツールが作るのはbox-shadowです．文字の輪郭へ影を付けるtext-shadow，hoverやactiveごとの状態比較，transition，キーフレームアニメーション，疑似要素を使った代替コードは生成しません．RGBAやHSLA文字列の直接入力，グラデーション色，光源の角度，Z軸，elevationからの自動提案にも対応していません．
ニューモーフィズムやグラスモーフィズムといったデザインを判定・保証する機能もありません．プリセットは調整開始用の固定値であり，対象ページの背景色や境界線，透明度まで一式で作るものではありません．必要なスタイルは出力後にプロジェクト側で追加します．
多数のレイヤーや大きなblur，spreadは，表示する要素数や端末によって描画負荷へ影響する場合があります．本ツールはGPU利用，フレームレート，スクロール時の滑らかさを測定・最適化しません．実際のページ，とくに複数要素へ同じ影を適用する場合は対象端末で確認してください．
影の設定とコード生成はこのコンポーネントのJavaScriptで行いますが，ページの初回読込などサイト利用に伴う通信まで存在しないという意味ではなく，完全オフラインや絶対的な安全性を保証するものでもありません．