CSS Box-Shadow ジェネレーター

CSS Box-Shadowの基礎と使い方

ドロップシャドウ（影）は、Webデザインにおいて「要素を浮き上がらせて階層を表現する」ための極めて重要なテクニックです。立体的でクリックできそうなボタン、カード型レイアウト、モーダルウィンドウなど、あらゆる場面で活用されます。

プロパティの構成

box-shadow プロパティは、以下の順番で数値を指定します。

box-shadow: [Xオフセット] [Yオフセット] [ぼかし半径(Blur)] [広がり半径(Spread)] [色];

• Xオフセット (Shift Right) : 正の値で右へ、負の値で左へ影が移動します。
• Yオフセット (Shift Down) : 正の値で下へ、負の値で上へ影が移動します。
• ぼかし (Blur) : 値が大きいほど影の境界がぼやけ、柔らかい印象になります（負の値は不可）。
• 広がり (Spread) : 正の値で影全体が拡大し、負の値で縮小します。
• 色 (Color) : RGBやHEXで色を指定します。一般的には黒やグレーに不透明度（Opacity/Alpha）をかけて自然な影を作ります（例: rgba(0,0,0,0.1)）。

デザインを洗練させる「レイヤードシャドウ」

CSSの box-shadow はカンマ(,)で区切ることで複数の影を重ね掛けることができます。

単一の濃い影よりも、「シャープで小さい影」と「広範囲にぼやけた薄い影」を何層も重ねる（Layered Shadows）ことで、Apple製品のような非常に滑らかでリアルな立体感（ニューモーフィズムやモダンUI）を表現できます。