← カテゴリ一覧に戻る

影（box-shadow, text-shadow）

box-shadowtext-shadowdrop-shadow()

CSSで影を追加する方法は複数あります。box-shadowはボックス全体に影を追加し、text-shadowはテキストに影を追加します。filter: drop-shadow()はSVGやPNGの形状に沿った影を作ります。

デモ：box-shadow のバリエーション

基本の影
2px 2px 4px
大きなぼかし
0 8px 24px
スプレッド
spread: 3px
inset 影
inset
多層シャドウ
3重の影
ニューモーフ
neumorphism

デモ：カラーシャドウとグロー効果

青のグロー
紫のグロー
緑のグロー
アニメーション

デモ：text-shadow のバリエーション

基本の文字影
ネオングロー効果
3Dエフェクト
アウトライン風

コード例

/* box-shadow: x y blur spread color */
.card       { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); }
.card-hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); }

/* inset（内側の影）*/
.inset      { box-shadow: inset 2px 2px 6px rgba(0,0,0,0.15); }

/* 複数の影（カンマ区切り）*/
.layered {
  box-shadow:
    0 2px 4px rgba(0,0,0,0.1),
    0 8px 16px rgba(0,0,0,0.08),
    0 16px 32px rgba(0,0,0,0.05);
}

/* ニューモーフィズム */
.neumorphic {
  background: #e0e5ec;
  box-shadow:
    6px 6px 12px rgba(163,177,198,0.7),
    -6px -6px 12px rgba(255,255,255,0.9);
}

/* グロー効果（カラーシャドウ） */
.glow {
  box-shadow:
    0 0 10px rgba(99,102,241,0.5),
    0 0 30px rgba(99,102,241,0.3);
}

/* text-shadow: x y blur color */
.text-shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.text-glow   { text-shadow: 0 0 10px #3b82f6, 0 0 20px #3b82f6; }

/* filter: drop-shadow() — PNG/SVGの形状に追従 */
.png-icon {
  filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.4));
}

比較：box-shadow vs filter: drop-shadow()

観点box-shadowfilter: drop-shadow()
影の形状要素のボックス（矩形）に沿うPNG/SVGの実際の形状（透過部分除く）に沿う
inset対応✅ 内側の影が可能❌ 内側の影は不可
複数の影✅ カンマ区切りで複数指定可filterを複数重ねることで可能
spreadパラメータ✅ あり（影を広げる・縮める）❌ なし
推奨用途カード、ボタン、UI要素全般アイコン画像、SVG、透過PNG

Tips多層シャドウで自然な立体感を演出

現実の影は単純な1層ではありません。近い層は濃く小さく、遠い層は薄く大きい多層シャドウを使うと、より自然でリッチな立体感を表現できます。

1層（平坦）
3層（自然）
4層（浮遊）
/* 多層シャドウで自然な立体感 */
.card-elevated {
  box-shadow:
    0 1px 3px rgba(0,0,0,0.12),    /* 近距離・濃い */
    0 6px 12px rgba(0,0,0,0.10),   /* 中距離 */
    0 16px 32px rgba(0,0,0,0.08),  /* 遠距離 */
    0 32px 64px rgba(0,0,0,0.05);  /* 最遠・薄い */
}

🤖 AIプロンプトテンプレート

CSSのbox-shadow・text-shadowを使った影エフェクトの実装例をReact + Tailwind CSSで作成してください。

要件:
- box-shadowの各パラメータ（x / y / blur / spread / color）を変更できるインタラクティブビルダー
- 基本の影・大きなぼかし・スプレッド・inset影・多層シャドウ・ニューモーフィズムの比較デモ
- カラーシャドウ・グロー効果（暗い背景上でのネオン表現）のデモ
- text-shadowのバリエーション（基本・ネオングロー・3Dエフェクト）の表示
- filter: drop-shadow() とbox-shadowの違いを比較するデモ（透過PNGを想定）
- ホバー時にシャドウが変化するカードのインタラクションデモ

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo