このツールについて
自然な影は 1 層で作られていないことがほとんどです。最大 6 層まで重ねられ、各層で水平・垂直オフセット、ぼかし、広がり、色、内側かどうかを個別に設定でき、プレビューは CSS と同じ重ね順で合成します。プリセットには極薄のヘアラインから浮き上がったカードまで用意しているので、近いものから調整を始められます。
CSS / FRONTEND · ブラウザ内で処理
CSS Box Shadow 生成
オフセット・ぼかし・広がり・色を調整し、多重シャドウを作成してコピー。
シャドウは最大 6 層。プレビュー背景はライト・ダーク・透過チェックの 3 種類に切り替えられます。
box-shadow: 0px 12px 32px -8px rgba(16, 24, 40, 0.28);
プリセット
プリセット
シャドウ層
操作手順
- プリセットを選ぶか、1 層から作り始めます。
- スライダーでオフセット・ぼかし・広がりを設定し、影の色と不透明度を選びます。
- 奥行きが必要なら 2 層目を追加し、box-shadow 宣言をコピーします。
プライバシー
計算もプレビューもすべてこのブラウザ内で行われます。入力が送信・保存されることも、URL やログに記録されることもありません。
よくある質問
- ぼかしと広がりの違いは何ですか。
- ぼかしは影の輪郭の柔らかさを決め、値が大きいほど拡散します。広がりは影全体を描画前に拡大・縮小します。一般的なカードの影は、大きめのぼかしと負の広がりを組み合わせ、影が外側にはみ出さず下方向に集まるようにします。
- inset（内側の影）はいつ使いますか。
- 内側の影は要素の内部に描かれ、へこんだ入力欄や押された状態のボタン、くぼんだコンテナの表現に使います。カンマ区切りの同じ box-shadow の中で外側の影と併用できます。