box-shadow ジェネレーター
2 つのレイヤーから始まります。レイヤーごとにオフセット・ぼかし・広がり・色・不透明度・内側の影を調整し、最大 4 つまで重ねて 1 つの box-shadow 宣言をコピーできます。
ブラウザ内でローカルに実行2 つのレイヤーから始まります。レイヤーごとにオフセット・ぼかし・広がり・色・不透明度・内側の影を調整し、最大 4 つまで重ねて 1 つの box-shadow 宣言をコピーできます。
ブラウザ内でローカルに実行白いプレビューカードに 2 つの影、0px 18px 42px -14px rgba(31, 71, 53, 0.28) と 0px 4px 10px 0px rgba(31, 71, 53, 0.12) から始まります。プレビューと出力パネルは同じ文字列なので、見えている内容がそのまま「CSS をコピー」でクリップボードに入ります。
レイヤーごとにオフセット・ぼかし・広がり・色・不透明度・内側の影を保持します。新規レイヤーは空ではなく選択中のレイヤーから作られ、「レイヤーを追加」は Y に 4px、ぼかしに 10px(上限 200)を加え、不透明度を 0.06 下げ(下限 0.05)、広がりと色を引き継ぎ、内側の影はオフのままです。
レイヤーは一覧の順に 1 行ずつ、1 つの box-shadow 値として出力されます。最初の行が最前面に描かれる影です。レイヤー1 を赤・広がり 24px、レイヤー2 を青・広がり 12px にしたピクセル検証では、重なる 0〜12px の帯が赤のままだったため、後ろのレイヤーは前のレイヤーより小さいか透明な部分にだけ現れます。
「レイヤーを追加」は選択中のレイヤーから新しい値を作ります(Y + 4px、ぼかし + 10px・上限 200、不透明度 - 0.06・下限 0.05、広がりと色は同じ、内側の影はオフ)。「レイヤーを削除」はアクティブな行を消し、最低 1 つを残します。カウンターは 1 レイヤー〜4 レイヤーと表示されます。
水平・垂直オフセットは -100〜100、ぼかしは 0〜200、広がりは -100〜100、不透明度は 0〜1 です。入力中もプレビューはこの範囲内に収まり、フォーカスが外れると四捨五入した値がフィールドに書き戻されるので、フィールド・プレビュー・コードが常に一致します。
フィールドを空にすると 0 にはならず、直前に保存されていた値に戻ります。px の小数は 1 桁まで(12.5px はそのまま 12.5px)、不透明度は 2 桁まで保持され、x = 999 は 100px、ぼかし = -10 は 0px として保存されます。
1 レイヤーにつき HEX 色 1 つで、アルファは不透明度フィールドから来ます。hsl()、名前付き色、グラデーション、2 つ目の色の入力はありません。出力セレクターは固定で、結果は 1 つの box-shadow 宣言のみ、CSS 変数やブレークポイント別の出力もありません。
drop-shadow / text-shadow モード、画像や SVG への書き出し、リセット以外の履歴はありません。処理はすべてページ内で完結します。検証では、すべてのコントロールの操作、レイヤーの追加と削除、コピー、リセットでネットワークリクエストは 1 件も発生せず、オフラインでも動作します。