CSS box-shadow ジェネレーター

CSSの box-shadow プロパティは、画像を使わずに要素の外側や内側へ1つ以上の影を描きます。このジェネレーターは、オフセット・ぼかし・広がり・色・不透明度から値を書き出し、追加したレイヤーが正しいかを検証し、お使いのブラウザでサンプルカードに描画するので、プレビューはCSSの結果とまったく同じです。プリセットには、Tailwind CSSの影の段階、なめらかな5層の影、フォーカスリング、ニューモーフィズムの組を用意しています。

使い方

1. プリセットを選ぶか、「カスタム」のままオフセット・ぼかし・広がり・色・不透明度を設定します。
2. 内側の影にするには「inset」にチェックを入れます。
3. 多重影やリング効果には、追加レイヤーを1行に1つずつ入力します。
4. CSSの1行をコピーし、ページに合わせてプレビューのカードと背景の色を調整します。

計算式

box-shadow: [inset] <x> <y> <blur> <spread> <color> [, さらにレイヤー]

xが正なら影は右へ、yが正なら下へ動きます。ぼかしは縁をやわらげます（負の値は不可）。広がりは、ぼかす前に影を大きく、または小さくします。負の広がりにすると、大きなぼかしが横にはみ出すのを防げます。

計算例

初期値（横0 px、下へ8 px、ぼかし24 px、広がり−4 px、黒の20%）では box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.2); となり、カードの下にやわらかい影ができます。レイヤー 0 0 0 1px red を加えると、大きさを変えずにカードを1 pxのリングで縁取れます。