【CSS】filter: drop-shadow()で透過画像に影をつける方法｜box-shadowとの違い・実務パターン集

filter: drop-shadow(offset-x offset-y blur-radius color);

注意：box-shadow にある spread-radius（広がり）や inset（内側の影）は、drop-shadow() では使用できません。

/* 右下に軽い影 */
.logo {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}

/* 下方向にふわっとした影 */
.icon {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}

/* ぼかしなしのくっきりした影 */
.sharp {
  filter: drop-shadow(3px 3px 0 #333);
}

<img src="logo.png" class="shadow-box">
<img src="logo.png" class="shadow-drop">

/* box-shadow：画像の「矩形」に影がつく */
.shadow-box {
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}

/* drop-shadow：画像の「形状」に影がつく */
.shadow-drop {
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.3));
}

結果の違い

• box-shadow は透過部分に関係なく、画像要素の四角い枠に沿って影がつく
• drop-shadow() は透過部分を無視し、実際に色がついている部分の輪郭に沿って影がつく
• 透過PNG・SVGでは drop-shadow() のほうが圧倒的に自然な見た目になる

/* 白いロゴを背景から浮かせる */
.logo-white {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* 暗い背景上のロゴに光彩を入れる */
.logo-glow {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
}

/* カラーロゴの立体感を出す */
.logo-3d {
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.25));
}

/* SVGアイコンに軽い影 */
.icon-svg {
  width: 48px;
  height: 48px;
  filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.2));
}

/* インラインSVGにも適用可能 */
svg.icon {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* currentColorを使うSVGに色付き影 */
.icon-colored {
  color: #2563eb;
  filter: drop-shadow(0 2px 4px rgba(37, 99, 235, 0.3));
}

.hero {
  position: relative;
  background: url('hero-bg.jpg') center / cover;
}

.hero .logo {
  /* 明るい背景でも暗い背景でも視認性を確保 */
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5))
         drop-shadow(0 0 20px rgba(0, 0, 0, 0.3));
}

ポイント：背景画像が差し替わる可能性がある場合、drop-shadow() を使っておくと、明暗どちらの背景でもロゴの視認性を確保できます。画像自体を編集する必要がないため、素早く対応できます。

/* 真下に影（もっとも自然な見た目） */
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));

/* 右下に影（古典的なドロップシャドウ） */
filter: drop-shadow(4px 4px 6px rgba(0,0,0,0.2));

/* 全方向に均一な影（光彩効果） */
filter: drop-shadow(0 0 8px rgba(0,0,0,0.3));

/* 左上に影（光源が右下にある表現） */
filter: drop-shadow(-3px -3px 6px rgba(0,0,0,0.2));

/* 標準的な黒い影（汎用） */
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));

/* ブランドカラーの影（統一感） */
filter: drop-shadow(0 4px 8px rgba(37, 99, 235, 0.4));

/* 白い影（ダークモード用） */
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));

/* カラフルなネオン影 */
filter: drop-shadow(0 0 15px #ff006e);

ポイント：影の色にブランドカラーを使うと、デザインの統一感が高まります。rgba() で透明度を調整し、強すぎない自然な影にするのがコツです。

/* リアルな立体感（近い影 + 遠い影） */
.logo-realistic {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3))
         drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

/* ネオングロー効果 */
.logo-neon {
  filter: drop-shadow(0 0 5px #00ffff)
         drop-shadow(0 0 15px #00ffff)
         drop-shadow(0 0 30px #00ffff);
}

/* マテリアルデザイン風の影 */
.logo-material {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.12))
         drop-shadow(0 1px 2px rgba(0,0,0,0.24));
}

注意：複数の drop-shadow() を重ねると、後のフィルターが前のフィルターの結果（影を含む）に対して適用されるため、影が二重三重に重なり、意図より濃くなることがあります。影の色の透明度を低めに設定するのがポイントです。

/* box-shadow：カンマで区切る（影同士は独立） */
box-shadow:
  0 1px 2px rgba(0,0,0,0.3),
  0 4px 8px rgba(0,0,0,0.15);

/* drop-shadow：スペースで区切る（前の影の結果に適用される） */
filter:
  drop-shadow(0 1px 2px rgba(0,0,0,0.3))
  drop-shadow(0 4px 8px rgba(0,0,0,0.15));

.logo-hover {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
  transition: filter 0.3s ease;
}

.logo-hover:hover {
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.35));
}

.card-lift {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
  transition: filter 0.3s ease, transform 0.3s ease;
}

.card-lift:hover {
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.25));
  transform: translateY(-4px);
}

.icon-neon {
  filter: drop-shadow(0 0 2px #3b82f6);
  transition: filter 0.4s ease;
}

.icon-neon:hover {
  filter: drop-shadow(0 0 8px #3b82f6)
         drop-shadow(0 0 20px #3b82f6);
}

@keyframes pulse-glow {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(59,130,246,0.5));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(59,130,246,0.8))
           drop-shadow(0 0 40px rgba(59,130,246,0.4));
  }
}

.icon-pulse {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* テキストだけに影をつけるなら text-shadow */
.heading {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* テキスト＋装飾ごと影をつけるなら drop-shadow */
.badge {
  background: #3b82f6;
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  filter: drop-shadow(0 2px 4px rgba(59,130,246,0.4));
}

/* ホバーで明るくしながら影を強調 */
.icon-bright {
  filter: brightness(1) drop-shadow(0 2px 4px rgba(0,0,0,0.2));
  transition: filter 0.3s ease;
}

.icon-bright:hover {
  filter: brightness(1.2) drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

/* 非活性状態：グレー＋影なし */
.partner-logo {
  filter: grayscale(1) opacity(0.6);
  transition: filter 0.4s ease;
}

/* ホバーで色付き + 影 */
.partner-logo:hover {
  filter: grayscale(0) opacity(1) drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

/* ホバーで色を変えながら影もつける */
.icon-hue {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
  transition: filter 0.5s ease;
}

.icon-hue:hover {
  filter: hue-rotate(90deg)
         drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

<!-- 親要素にfilterを適用 -->
<div class="shape-wrapper">
  <div class="triangle"></div>
</div>

/* 親要素に影をつける */
.shape-wrapper {
  filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3));
}

/* 子要素をclip-pathで切り抜く */
.triangle {
  width: 200px;
  height: 200px;
  background: #3b82f6;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

なぜ親要素に filter を適用するのか

• clip-path は要素を切り抜くため、切り抜かれた外側にある box-shadow は表示されない
• filter: drop-shadow() を同じ要素に指定しても、切り抜き後の描画結果に適用されるが、一部ブラウザで不安定
• 親要素（wrapper）に filter をかけると、子要素の描画結果（=切り抜き後の形）に対して確実に影がつく

.site-logo img {
  max-height: 50px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
  transition: filter 0.3s;
}

.site-logo img:hover {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}

.sns-icon {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
  transition: filter 0.3s, transform 0.3s;
}

/* ブランドカラーの影で発光 */
.sns-icon.twitter:hover {
  filter: drop-shadow(0 0 8px rgba(29,161,242,0.6));
  transform: scale(1.1);
}

.sns-icon.github:hover {
  filter: drop-shadow(0 0 8px rgba(36,41,46,0.5));
  transform: scale(1.1);
}

.partner-logos {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
}

.partner-logos img {
  max-height: 40px;
  filter: grayscale(1) opacity(0.5);
  transition: filter 0.4s ease;
}

.partner-logos img:hover {
  filter: grayscale(0) opacity(1)
         drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.icon-btn img {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
  transition: filter 0.2s;
}

.icon-btn:hover img {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

.icon-btn:active img {
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.2));
}

/* 親要素にfilterを指定 */
.tooltip-wrapper {
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

/* ツールチップ本体 */
.tooltip {
  background: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  position: relative;
}

/* 三角形の矢印 */
.tooltip::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #fff;
  border-bottom: none;
}

ポイント：ツールチップの本体と矢印（三角形）を含む親要素に drop-shadow() をかけることで、矢印部分にも自然な影がつき、一体感のあるデザインになります。box-shadow では矢印部分に影がつかないため、この手法が唯一の解決策です。

/* 1. will-change でGPUレイヤーを事前確保 */
.optimized-shadow {
  will-change: filter;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* 2. アニメーション時のみ will-change を有効化 */
.shadow-on-hover {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
  transition: filter 0.3s;
}

.shadow-on-hover:hover {
  will-change: filter;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3));
}

/* 3. 大量の要素には box-shadow を検討 */
/* 100個以上のリスト項目 → box-shadow が軽い */
.list-item {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

注意：will-change は常に指定するのではなく、アニメーションする要素にのみ使用してください。多用するとメモリ消費が増加します。また will-change: filter は要素のスタッキングコンテキストを生成するため、z-index の挙動が変わる場合があります。

互換性に関する補足

• 2026年現在、IE11 のサポート終了により、ベンダープレフィックス（-webkit-filter）は基本的に不要です
• サポート率は Can I Use によると全世界で 97% 以上
• IE11 対応が必要な場合は、box-shadow をフォールバックとして併記してください

.logo-shadow {
  /* IE11 用フォールバック */
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);

  /* モダンブラウザ用 */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* @supports で切り分ける場合 */
.logo-shadow-v2 {
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

@supports (filter: drop-shadow(0 0 0 black)) {
  .logo-shadow-v2 {
    box-shadow: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  }
}

/* NG：親と子の両方に filter を指定 → 影が二重になる */
.wrapper {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.wrapper img {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* OK：どちらか一方にだけ適用する */
.wrapper img {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* 背景色があると要素全体が「不透明」と判定される */
.has-bg {
  background: #fff;
  padding: 20px;
  /* → box-shadow と同じ矩形の影になる */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* 対策：背景色のない要素に適用する */
.no-bg img {
  /* img 自体に背景がなければ、画像の形に影がつく */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* NG：filter 全体を transition すると他のフィルターも含まれて重い */
.slow {
  filter: brightness(1) contrast(1) drop-shadow(0 2px 4px rgba(0,0,0,0.2));
  transition: all 0.3s; /* 重い！ */
}

/* OK：filter だけを transition 対象にする */
.fast {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
  transition: filter 0.3s ease;
  will-change: filter;
}

/* NG：親に filter があると子の fixed が壊れる */
.parent {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.parent .modal {
  position: fixed; /* → absolute として振る舞う！ */
}

/* 対策：filter を子要素に直接適用する */
.parent img {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* 標準ディスプレイ用 */
.logo {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}

/* 高解像度ディスプレイでは影を少し控えめに */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  .logo {
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
  }
}