CSS影（ボックスシャドウ）生成
CSSの影やグローを、レイヤーごとの位置、ぼかし、広がり、色、不透明度で調整します。内側の影にも対応し、CSSとTailwindクラスをコピーしたり、PNGを保存したりできます。5つのプリセットから始めて、好みに合わせて調整できます。
プリセット
プリセットを選ぶとすべての設定が一度に反映されます。そこから微調整できます。
レイヤー
プリセットはワンクリックですべての設定を反映し、ランダム生成は同じことを乱数で行います。
CSS
.box {
border-radius: 16px;
box-shadow:
0px 1px 3px 0px rgb(11 11 18 / 0.18),
0px 12px 28px -6px rgb(11 11 18 / 0.14);
}実際のUIの奥行きは影の重ね方で決まります。接する辺には短く濃い影、周囲の持ち上がりには広く淡い影です。大きな影を1つだけ使うと、光ではなく箱の周りのぼやけに見えます。
Tailwindクラス
rounded-[16px] shadow-[0px_1px_3px_0px_rgb(11_11_18_/_0.18),0px_12px_28px_-6px_rgb(11_11_18_/_0.14)]任意値をそのまま使うため、数値はすべて正確です。近い刻み幅に丸められることはありません。
CSS影（ボックスシャドウ）生成はどう動きますか？
`box-shadow`の各レイヤーは、水平・垂直のずれ、ぼかし、広がり、色、不透明度で構成されます。短い接地の影と広い影を組み合わせたり、明るい色でグローを作ったりできます。
広がりはぼかす前に適用します。正の値は影を広げ、負の値は縮めます。CSSの一覧では最初の影が最前面になります。プレビューも同じ順序で描きます。
`inset`は内側の影を作ります。SVGプレビューはフィルターとマスクを使い、内側・外側の影と負の広がりを表現します。PNGも同じプレビューから生成し、内側の影を含めます。
影はレイアウトの場所を取りませんが、コンテナーに切り取られることがあります。多くのレイヤーや大きなぼかしは描画の負荷を増やすため、実際の要素の大きさで確認してください。
影のレイヤー
レイヤー 1 0 1px 3px 0 · #0b0b12 · 18% レイヤー 2 0 12px 28px -6px · #0b0b12 · 14%
生成したCSS
.box {
border-radius: 16px;
box-shadow: 0 1px 3px 0 rgb(11 11 18 / 0.18),
0 12px 28px -6px rgb(11 11 18 / 0.14);
}CSS影（ボックスシャドウ）生成が対応するオプションとエッジケースは？
| パラメータ | 型 | デフォルト | 動作とエッジケース |
|---|---|---|---|
| X / Yのずれ | px | 0 / 1 | 影を水平・垂直方向に移動します。負の値は左や上への移動です。 |
| ぼかし | 半径・px | 3 | 影の縁を柔らかくします。値を大きくするとぼかしの範囲が広がります。 |
| 広がり | px | 0 | ぼかす前に影の形を広げたり縮めたりします。負の値は影を要素の近くに収めます。 |
| 色と不透明度 | アルファ付きrgb | 暗色・18% | 各レイヤーの色と強さを指定します。見え方は背景色にも左右されます。 |
| 内側の影 | inset | 無効 | ボックスの内側に影を描きます。プレビューとPNGにも含まれます。 |
| レイヤー | 1〜5・カンマ区切り | 2 | 最大5つの影を組み合わせます。CSS一覧の最初の影が最前面に描かれます。 |
| border-radius | px | 16 | ボックスの角丸と、影の描画に使う輪郭を調整します。 |
よくある質問
にじみに見えない柔らかな影を作るには？
短く濃い接地の影と、広く柔らかい影の2層から試してください。広い影に負の広がりを設定すると、側面へのにじみを抑えられます。背景と要素の大きさに合わせて調整します。
spreadは具体的に何をする？
`spread`は、ぼかす前に影の形を広げたり縮めたりする値です。正の値で広がり、負の値で縮みます。広い影をボックスの近くに収めたいときに役立ちます。
ボタンにグローを付けるには？
明るい色でずれを小さくし、狭い影と広い影を重ねます。例は`box-shadow: 0 0 8px rgb(255 122 69 / 0.7), 0 0 32px 4px rgb(255 122 69 / 0.35)`です。実際の背景で見え方を確認してください。
box-shadowはレイアウトやパフォーマンスに影響する？
影はレイアウトの寸法を変えませんが、祖先の`overflow`で切り取られることがあります。大きなぼかしや複数のレイヤーは、特に大きい要素やアニメーションで描画の負荷を増やします。
PNGに内側の影も含まれますか？
現在のPNG出力には内側の影も含まれます。プレビューと同じSVGのフィルターとマスクから描画します。必要なレイヤーで`inset`を有効にし、もう一度書き出してください。
カードの影は何層が適切？
接地の影と浮き上がりの影の2層から始めると調整しやすくなります。必要な場合だけ追加してください。レイヤーが多いほどよくなるとは限らず、描画の負荷も増えます。