ボックス シャドウは、照明と標高をシミュレートすることで UI 要素に奥行きを与えます。適切にデザインされた影は視覚的な階層を作成し、インターフェイスをより触感的に感じさせます。
水平オフセット、垂直オフセット、ぼかし、広がり、色、不透明度を調整します。キャンバスのプレビューはリアルタイムで更新されます。問題がなければ CSS コードをコピーします。
Frequently Asked Questions
Q: ブラーとスプレッドの違いは何ですか？
ブラーとスプレッドの違いは何ですか？ブラーはシャドウエッジの柔らかさを制御します。スプレッドは、影がどの程度広がるかを制御します。
Q: シャドウレイヤーは何枚使用すればよいですか?
シャドウレイヤーは何枚使用すればよいですか?通常は 1 ～ 2 層で十分です。内側の奥行きを表現するには、差し込みシャドウを使用します。
Q: ボックスシャドウレイヤーは何枚使用すればよいですか?
ボックスシャドウレイヤーは何枚使用すればよいですか?プロのデザインでは、深さのために 2 ～ 4 つのレイヤーを使用することがよくあります。小さなタイト シャドウから始めて、中程度のスプレッド シャドウを追加し、必要に応じて大きなアンビエント シャドウを追加します。このツールは無制限のレイヤーをサポートします。
Q: box-shadow のパフォーマンスへの影響は何ですか?
box-shadow のパフォーマンスへの影響は何ですか?いくつかのボックス シャドウの影響は無視できます。ぼかしの多いシャドウが多すぎると、ローエンド デバイスのスクロール パフォーマンスに影響を与える可能性があります。このツールはリアルタイムのプレビューを表示するので、コピーする前に判断できます。
Q: インナーシャドウ（インセット）を作成できますか?
インナーシャドウ（インセット）を作成できますか?現在のバージョンは外側の影に焦点を当てています。内側のシャドウの場合は、生成された CSS box-shadow 値の先頭に「inset」キーワードを手動で追加します。