CSSシャドウジェネレーター

リファレンス

CSS box-shadowとは？

CSS box-shadowプロパティは、要素のフレームの周りに1つ以上のシャドウ効果を追加します。要素に対する相対的なオフセット、ぼかしと拡散の半径、色、およびオプションのinsetキーワードで定義されます。複数のシャドウはカンマで区切り、前面から背面に向かってレンダリングされます。

box-shadowの構文

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;
offset-x：水平方向の距離。正 = 右、負 = 左。
offset-y：垂直方向の距離。正 = 下、負 = 上。
blur-radius（オプション、デフォルト0）：大きい値はより柔らかく拡散したシャドウを生成。
spread-radius（オプション、デフォルト0）：正の値はシャドウを拡大、負の値は縮小。
inset（オプション）：シャドウを要素の内側に移動。

複数のシャドウレイヤーの使用

複数のシャドウを組み合わせることで、リアルな奥行き効果を作成できます。一般的なテクニックは、要素の近くに密で暗いシャドウ（定義用）と、遠くに大きくて淡いシャドウ（奥行き用）を組み合わせることです。Material Designや最新のデザインシステムは、レイヤードシャドウを使ってエレベーションを表現します。

シャドウのデザインヒント

rgba()やhsla()の色を使用 — 半透明のシャドウは不透明なものよりも自然に見えます。
光源を一貫させる — UI全体でオフセット方向を統一しましょう。
純黒を避ける — ブランドカラーの暗いトーンを使用すると、より柔らかくまとまりのあるシャドウになります。
パフォーマンス — box-shadowはペイント処理を発生させます。アニメーションする要素にはfilter: drop-shadow()を推奨。

プライバシー

すべてのシャドウ生成はブラウザで100%実行されます。データはサーバーに送信されません。