# 値を推測せずにCSSシャドウを視覚的にデザイン
box-shadowを手動で調整するのは面倒です。このビジュアルジェネレーターを使えば、複数の影を重ねてライブで確認し、本番対応のCSSをコピーできます。 5 要素あたりの影レイヤー
ライブ 変更ごとにプレビュー更新
5 クイックプリセット
# 複数の影を重ねてリアルな奥行きを
実際の影は均一なぼかしではありません。要素の近くにタイトな影を、より柔らかく広い影と重ねることで自然な奥行きが生まれます。+でレイヤーを追加できます。# 各コントロールを理解する
| コントロール | CSS値 | 効果 |
|---|---|---|
| オフセットX | 1番目の長さ | 水平方向の変位。 |
| オフセットY | 2番目の長さ | 垂直方向の変位。 |
| ぼかし | 3番目の長さ | ぼかしの半径。 |
| スプレッド | 4番目の長さ | 影を拡大または縮小。 |
| 色と不透明度 | rgba() | 独立した不透明度の影の色。 |
| 内側 | inset | 要素の境界内に影を描画。 |
控えめな背景グリッドを使う
プレビューにはドットグリッドが表示され、影の広がりを確認できます。負のスプレッドを使うと影を要素の近くに保てます。推奨ワークフロー
プリセットから始める。
レイヤーを追加してリアルな奥行きを。
浮遊カード効果には負のスプレッドを使用。
生成されたCSSをコピーして貼り付け。