本文へ移動

CSSボックスシャドウ生成

1つの影を設定し、見本を確認してCSSをコピーします。

影を設定

ブラウザー内で処理します。

−200〜200 px。

−200〜200 px。

0〜200 px。負数不可。

−200〜200 px。

不透明な3桁または6桁HEX。

0は透明、1は不透明。

生成した影

影を設定してからCSSを生成してください。

CSSボックスシャドウの作り方

外側または内側の影を1層生成し、確認した値をコピーします。

  1. XとYのずれを入力します。
  2. ぼかしと広がりを設定します。
  3. 色と不透明度を入力します。
  4. 外側または内側を選びます。
  5. 生成して見本を確認し、コピーします。

4つの長さ

XとYは影を移動します。ぼかしは負数不可で、広がりは正なら拡大、負なら縮小します。

外側と内側

insetは箱の内側に描きます。外側の影はレイアウト寸法を変えません。

確定状態

編集やクリアで古い見本とコピー値を無効にします。

対応範囲

  • 影は1層のみ。
  • 複数レイヤー、全体デザイン、アニメーションは非対応。

例

12px 12px 24px 0 rgba(0,0,0,.3).

inset 0 4px 8px -2px rgba(0,0,0,.5).

よくある質問

ぼかしは負数にできますか？

いいえ。CSSでは無効です。

広がりは負数にできますか？

はい。影の形を縮小します。