カテゴリー
お問い合わせ

【CSS】違いわかる？ text-shadow、box-shadow、drop-shadow の正しい使い分けと実装デモ

HTML/CSS
目次

Webデザインをコーディングする際、要素に「影」をつける機会は非常に多いですよね。 CSSで影をつけるプロパティには、主に text-shadow、box-shadow、そして filter: drop-shadow() の3種類が存在します。

「とりあえず box-shadow を使っておけばいいかな？」と思われがちですが、透過画像（PNGやSVG）や、CSSで作った複雑な図形（吹き出しなど）に影をつける場合、プロパティの選び方を間違えると「不自然な四角い影」になってしまうことがあります。

今回は、これら3つのプロパティの影の付き方の違いと、正しい使い分けについて、デモを交えて分かりやすく解説します！

デモ動作

See the Pen Untitled by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コードの紹介

【HTML】

<div class="l-wrap">
  <h2>影の付け方 比較デモ</h2>

  <div class="p-shadow-demo">
    
    <!-- 1. text-shadow -->
    <div class="p-card">
      <h3 class="p-card__title">1. text-shadow</h3>
      <p class="p-card__desc">テキストそのものに影をつけます。</p>
      <div class="p-demo-box">
        <p class="js-text-shadow">Shadow Text</p>
      </div>
    </div>

    <!-- 2. box-shadow -->
    <div class="p-card">
      <h3 class="p-card__title">2. box-shadow</h3>
      <p class="p-card__desc">要素の「枠（ボックス）」に対して影をつけます。<br>※透過画像でも四角い影になります。</p>
      <div class="p-demo-box">
        <!-- 丸い透過SVG画像の想定 -->
        <svg class="js-box-shadow-img" viewBox="0 0 100 100" width="80" height="80">
          <circle cx="50" cy="50" r="50" fill="#1bb4d4"/>
        </svg>
        <p class="p-demo-label">画像の枠が四角く浮き出る❌</p>
      </div>
    </div>

    <!-- 3. filter: drop-shadow() -->
    <div class="p-card">
      <h3 class="p-card__title">3. filter: drop-shadow()</h3>
      <p class="p-card__desc">不透明な部分の「輪郭」に沿って影をつけます。<br>※透過画像や複雑な形に最適です。</p>
      <div class="p-demo-box">
        <!-- 丸い透過SVG画像の想定 -->
        <svg class="js-drop-shadow-img" viewBox="0 0 100 100" width="80" height="80">
          <circle cx="50" cy="50" r="50" fill="#1bb4d4"/>
        </svg>
        <p class="p-demo-label">画像の形に沿って影がつく！⭕️</p>
      </div>
      
      <!-- おまけ：CSSで作った吹き出しの例 -->
      <div class="p-demo-box">
        <div class="p-balloon js-drop-shadow-balloon">
          吹き出しのツノにも<br>綺麗に影がつきます！
        </div>
      </div>
    </div>

  </div>
</div>

【CSS】

.l-wrap {
  color: #3e3e3e;
  padding: 40px 20px;
  max-width: 900px;
  margin: 0 auto;
}

h2 { 
  text-align: center;
  color: #1bb4d4;
  margin-bottom: 40px;
}

/* レイアウト */
.p-shadow-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.p-card {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #ddd;
}

.p-card__title { 
  font-size: 20px; 
  margin-top: 0; 
  border-bottom: 2px solid #eee; 
  padding-bottom: 8px; 
}

.p-card__desc { 
  font-size: 14px; 
  color: #666; 
  margin-bottom: 20px; 
  line-height: 1.5; 
}

.p-demo-box {
  background: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 16px;
  /* 影を見やすくするための余白 */
}

.p-demo-label { 
  font-size: 13px; 
  margin-top: 12px; 
  font-weight: bold; 
  color: #c72c4c; 
}

/* =========================================
   影の指定
========================================= */

/* 1. text-shadow (X軸 Y軸 ぼかし半径 色) */
.js-text-shadow {
  font-size: 32px;
  font-weight: bold;
  color: #1bb4d4;
  text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3);
}

/* 2. box-shadow (X軸 Y軸 ぼかし半径 広がり半径 色) */
.js-box-shadow-img {
  box-shadow: 4px 4px 10px 4px rgba(0, 0, 0, 0.4);
}

/* 3. filter: drop-shadow (X軸 Y軸 ぼかし半径 色) ※広がり半径は指定不可 */
.js-drop-shadow-img {
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.4));
}

/* おまけ：吹き出し（擬似要素でツノを作成） */
.p-balloon {
  position: relative;
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
}

.p-balloon::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 20px;
  background-color: #ffffff;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

/* 吹き出しの親要素ごとdrop-shadowをかけると、ツノも含めて影がつく！ */
.js-drop-shadow-balloon {
  filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.2));
}

コードの解説・違いまとめ

text-shadow：テキスト専用の影

/* 1. text-shadow (X軸 Y軸 ぼかし半径 色) */
.js-text-shadow {
  text-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3);
}

テキストの文字の形に沿って影をつけるプロパティです。見出しの装飾などで頻繁に使用します。

box-shadow：要素の「四角い枠」に対する影

/* 2. box-shadow (X軸 Y軸 ぼかし半径 広がり半径 色) */
.js-box-shadow-img {
  box-shadow: 4px 4px 10px 4px rgba(0, 0, 0, 0.4);
}

HTMLの要素（ボックスモデル）に対して影をつけます。 注意点として、中身が透過された画像（PNGやSVGなど）であっても、影は要素のバウンディングボックス（四角い枠）に対して付与されてしまいます。 そのため、透過画像の形に沿った影をつけたい場合には不向きです。

filter: drop-shadow()：不透明な部分の「輪郭」に対する影

/* 3. filter: drop-shadow (X軸 Y軸 ぼかし半径 色) ※広がり半径は指定不可 */
.js-drop-shadow-img {
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.4));
}

要素の不透明な部分を認識し、その輪郭に沿って影をつける強力なプロパティです。 デモのように、透過画像の形に沿って影を落としたり、擬似要素（::before, ::after）で作った複雑な図形（吹き出しのツノなど）を含めた全体に影を落としたりする際に大活躍します。

※ box-shadow にある「広がり半径（スプレッド）」や「内側への影（inset）」は指定できないという違いがあります。

まとめ

今回は、CSSで影をつける3つのプロパティの違いについて解説しました。

四角いカードデザインなどの枠線には box-shadow、透過画像やロゴ、吹き出しなどの不規則な形には filter: drop-shadow() といったように、対象物の「形」や「透過状態」に合わせて適切なプロパティを選択することが重要です。

CSSの描画仕様をしっかり理解して、デザイナーさんが意図した通りの美しい影をコーディングで再現していきたいと思います！

Prev
Next

関連記事