ドロップシャドウとは | バイブコーダーのための名称辞典

ドロップシャドウとは

box-shadow や text-shadow で要素や文字に影を落とし、浮いて見える立体感を作る CSS の技法。

概要

box-shadow は要素の輪郭に沿って影を落とし、カードやボタンが画面から浮いているような立体感を作ります。 text-shadow は文字に影を付ける専用のプロパティで、見出しを目立たせたり、背景に埋もれないように縁取ったりする用途で使います。影の色・ぼかし幅・広がり方を変えるだけで、控えめな影から強い浮遊感のある影まで幅広く表現できます。

別名

表記ゆれ：ドロップシャドウ、影、box-shadow、text-shadow

日本語では単に「影を付けて」「影をつける」という言い方が最もよく使われます。

AI への伝え方

「カードに影を付けて」「もっと影を強くして」で伝わります。影の強さは 1 段階では伝わりにくいので、「弱め・中くらい・強め」のように段階で伝えるか、他のカードと同じ強さにそろえたいのかを伝えると仕様がぶれません。

似たパーツとの違い

「ニューモーフィズム」は明るい影と暗い影を両側に置いて、背景と同じ色の要素が浮き出たりへこんだりして見えるようにする技法です。ドロップシャドウが単純に片側へ影を落とすだけなのに対し、ニューモーフィズムは背景との一体感を保ったまま立体感を出す点が異なります。

なお box-shadow は要素の四角い枠に沿って影が出るのに対し、filter: drop-shadow() は透過部分を除いた実際の形（画像や文字の輪郭）に沿って影が出る違いがあります。

デモ

弱め

中くらい

強め

text-shadow の例

コード

HTML

<div class="drop-shadow-demo">
  <div class="drop-shadow-demo__row">
    <div class="drop-shadow-demo__card drop-shadow-demo__card--sm">弱め</div>
    <div class="drop-shadow-demo__card drop-shadow-demo__card--md">中くらい</div>
    <div class="drop-shadow-demo__card drop-shadow-demo__card--lg">強め</div>
  </div>
  <p class="drop-shadow-demo__text">text-shadow の例</p>
</div>

CSS

.drop-shadow-demo {
  font-family: sans-serif;
}

.drop-shadow-demo__row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 24px;
}

.drop-shadow-demo__card {
  flex: 1;
  min-width: 100px;
  padding: 20px 12px;
  border-radius: 8px;
  background: #ffffff;
  color: #333333;
  text-align: center;
  font-size: 13px;
}

.drop-shadow-demo__card--sm {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.drop-shadow-demo__card--md {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.drop-shadow-demo__card--lg {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
}

.drop-shadow-demo__text {
  margin: 0;
  font-size: 28px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
  text-align: center;
  padding: 24px;
  border-radius: 8px;
  background: #0017c1;
}