Box Shadow Generator
CSS box-shadow をビジュアルエディタで設計します。リアルタイムプレビュー付きで複数レイヤーを追加し、オフセット、ぼかし、スプレッドを調整した後、コードをコピーできます。すべてブラウザで処理されます。
動作方法: シャドウレイヤーを追加し、オフセット、ぼかし、スプレッド、色を調整して、CSS をコピーします。プレビューはリアルタイムで更新されます。複数のシャドウを積層して複雑な効果を作成できます。データはサーバーに送信されません。
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10);CSS box-shadow とは
CSS の box-shadow プロパティは、要素の枠に 1 つ以上のシャドウ効果を追加します。シャドウはボックスの外側（デフォルト）または内側（inset）に配置できます。奥行き感の表現、カードを背景から浮き上がらせる、ホバー時にインタラクティブ要素を強調する、リアルな階層化インターフェースの構築に使用されます。画像と異なり、box-shadow はブラウザによって任意の解像度で描画され、追加のリクエストは発生しません。
Box Shadow 構文の説明
box-shadow の短縮形は、offset-x、offset-y、blur-radius、spread-radius、color、そしてオプションの inset キーワードの順序で値を受け取ります。offset-x は水平方向にシャドウを移動させ（正の値 = 右）、offset-y は垂直方向に移動させます（正の値 = 下）。blur-radius はエッジをソフトにします。値が大きいほどシャドウがより拡散します。spread-radius はぼかし前にシャドウサイズを拡大または縮小します。color は rgba() を含む任意の CSS カラーが指定できます。透明度設定も可能です。inset キーワードを追加するとシャドウが要素の内側に描画されます。
複数のシャドウ
CSS ではカンマ区切りのシャドウ宣言を単一プロパティに記述でき、複雑な階層化効果を実現できます。デザイナーはシャドウを積層させて現実的な照明をシミュレートします。接触の奥行きを表現する小さく暗いシャドウと、環境光を表現する大きく柔らかいシャドウを組み合わせます。2 ～ 3 つのシャドウを重ねることで、自然で洗練された結果が得られます。パフォーマンスを念頭に置いてください。各シャドウは追加の描画をトリガーするため、頻繁にアニメーションする要素に 4 ～ 5 個以上のシャドウを積層することは避けてください。
Box Shadow のコツ
- rgba() または hsla() カラーを使用して、シャドウが任意の背景と自然にブレンドするようにします
- モバイルではぼかし値を 40px 以上にしない。大きなシャドウはスクロールパフォーマンスに悪影響を与えます
- 小さく密度の高いシャドウと大きく柔らかいシャドウを組み合わせて現実的な浮き上がり効果を表現します
- inset シャドウを使用してボタン押下効果と内側の光の効果を実現します
- 自然に見えるドロップシャドウの場合、spread を 0 に保ちます
- 明るい背景と暗い背景の両方でシャドウをテストして、コントラストを確保します