コンテンツへスキップ

box-shadow ジェネレーター

2 つのレイヤーから始まります。レイヤーごとにオフセット・ぼかし・広がり・色・不透明度・内側の影を調整し、最大 4 つまで重ねて 1 つの box-shadow 宣言をコピーできます。

ブラウザ内でローカルに実行
· box-shadow · rgba() · inset
コントロールラック
ライブステージ
VoriTools
CSS を書き出し

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. 「アクティブレイヤー」で編集するレイヤーを選ぶか、「レイヤーを追加」で 3 つ目・4 つ目を足します。一覧は レイヤー1〜レイヤー4 で、4 つ目が上限、最後の 1 つは削除できません。
  2. 水平・垂直オフセットを入力します。どちらも -100〜100px、ぼかしは 0〜200px、広がりは -100〜100px です。小数は 1 桁まで残り、範囲外の値はフォーカスが外れた時点で上限・下限に書き戻されます。
  3. カラーピッカーで色を選び、不透明度を 0〜1 で設定します。不透明度は 2 桁まで保持され rgba() の中に出力され、HEX 色は 0〜255 のチャンネルに入力したアルファ値とともに変換されます。
  4. 「内側の影」をオンにすると、そのレイヤーだけがカードの内側に移ります。設定はアクティブなレイヤーのもので、追加したレイヤーは常にオフから始まります。
  5. 「CSS をコピー」で宣言全体を、「リセット」で 2 つの初期レイヤーに戻せます。固定の .shadowed-element セレクターを含め、出力パネルが 1 文字も違わずクリップボードに入ります。

初期値、4 レイヤーの上限、確定時に書き戻される値

4 つのレイヤー、1 つの宣言

レイヤーは一覧の順に 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 件も発生せず、オフラインでも動作します。

最近使ったツール: