影の付け方をCSSで覚える｜box-shadowとdrop-shadowの使い分け、ふんわり影・重ね影のコピペ4種類

カードや画像のうしろに、うっすら付いている影。これがあるだけで、白い背景の上でも「ここがひとかたまり」だと分かり、押せそうな部品は押せそうに見えます。影はCSSの box-shadow と drop-shadow() で付けられます。

使いどころ

白や淡い背景の上で、カードやボタンを背景から少し離して見せたいときに使う。色のある背景や写真の上では影が見えにくいので、枠線や背景色で区切る。

今回は、ふんわり影のカード、マウスを乗せると持ち上がるカード、内側の影でへこんだ入力欄、形に沿って落ちる影の4種類を、コピペ用のコードつきで紹介します。ぼかしと濃さの目安、黒い影がにごる理由、box-shadow と drop-shadow の使い分け、影が消える表示への備えもまとめました。

連載「WEBの技術」の25回目です。
今回は「影」。目立つ表現ではありませんが、サイト全体の印象をいちばん左右する指定のひとつです。

完成見本：CSSだけで付けた4種類

下の4つは、どれも画像を使わず、CSSだけで影を付けています。2のカードは、マウスを乗せたときの動きが分かるように、見本では「持ち上がる→戻る」をくり返しています。

SOFT SHADOW1. ふんわり影のカード白い背景の上で、カードを少しだけ浮かせたいとき

LIFT ON HOVER2. マウスを乗せると持ち上がるカード押せるカード（一覧のリンクなど）

INSET SHADOW3. 内側の影で、へこんだ入力欄お問い合わせフォームなどの入力欄

DROP SHADOW4. 形に沿って落ちる影（ラベル）切り抜いた形・透過画像・アイコンに影を付けたいとき

※ 見本は読み上げソフトでは読まれないようにしています。端末で動きを減らす設定にしている場合は、2の動きが止まります。

コピペ用のコード

CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-sh は、サイトのほかのデザインと名前がぶつからないようにするための目印です。1と2は、文字のクラス（kd-sh-ttl・kd-sh-txt）を1のCSSと共通で使います。

1. ふんわり影のカード

いちばん基本の形です。box-shadow（要素のまわりに影を付ける指定）に、近くの小さな影と、遠くの大きな影の2つをカンマで重ねています。影の色は黒ではなく、文字と同じ紺（#10283A）を薄くしたものです。白い背景になじみ、汚れたような灰色になりません。

HTML

<div class="kd-sh-soft">
  <p class="kd-sh-ttl">秋の撮影プラン</p>
  <p class="kd-sh-txt">10月31日まで受付中です。</p>
</div>

CSS

.kd-sh-soft {
  max-width: 320px;
  padding: 20px 24px;
  border-radius: 16px;
  background: #FFFFFF;
  color: #10283A;
  /* 近くの小さな影＋遠くの大きな影を重ねる */
  box-shadow:
    0 1px 3px rgba(16, 40, 58, .08),
    0 10px 28px rgba(16, 40, 58, .12);
}
.kd-sh-ttl {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
}
.kd-sh-txt {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}
/* 影が消える表示（Windowsのコントラスト テーマなど）では、枠線を出す */
@media (forced-colors: active) {
  .kd-sh-soft {
    border: 1px solid CanvasText;
  }
}

2. マウスを乗せると持ち上がるカード

マウスを乗せたとき（キーボードで選んだときも）に、カードが4pxだけ持ち上がり、影が大きくなる形です。大きな影は ::after（要素の中に、CSSだけで作る見えない箱）に先に付けておき、opacity（透明度）を0から1に変えて出しています。影の指定そのものを動かすより、ブラウザの描き直しが少なく済みます。

HTML

<a class="kd-sh-lift" href="/works/">
  <span class="kd-sh-ttl">制作実績を見る</span>
  <span class="kd-sh-txt">これまでに作ったサイトの一覧です。</span>
</a>

CSS

.kd-sh-lift {
  position: relative;
  display: block;
  max-width: 320px;
  padding: 20px 24px;
  border-radius: 16px;
  background: #FFFFFF;
  color: #10283A;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(16, 40, 58, .10);
  transition: transform .2s ease;
}
/* 持ち上がったときの大きな影は、先に作って隠しておく */
.kd-sh-lift::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 16px 36px rgba(16, 40, 58, .18);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.kd-sh-lift .kd-sh-ttl,
.kd-sh-lift .kd-sh-txt {
  display: block;
}
.kd-sh-lift:hover,
.kd-sh-lift:focus-visible {
  transform: translateY(-4px);
}
.kd-sh-lift:hover::after,
.kd-sh-lift:focus-visible::after {
  opacity: 1;
}
.kd-sh-lift:focus-visible {
  outline: 3px solid #0284C7;
  outline-offset: 3px;
}
/* 動きを減らす設定の人には、持ち上げずに影だけ変える */
@media (prefers-reduced-motion: reduce) {
  .kd-sh-lift,
  .kd-sh-lift::after {
    transition: none;
  }
  .kd-sh-lift:hover,
  .kd-sh-lift:focus-visible {
    transform: none;
  }
}

3. 内側の影で、へこんだ入力欄

inset を付けると、影が外側ではなく内側に入ります。上の辺に細い影を入れると、光が上から当たって、入力欄が少しへこんで見えます。影は飾りなので、入力欄の形は枠線（#7B8A97）で見せています。選んだときは、影ではなく、はっきりした青い線で知らせます。

HTML

<label class="kd-sh-label" for="kd-sh-name">お名前</label>
<input class="kd-sh-input" id="kd-sh-name" type="text">

CSS

.kd-sh-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #10283A;
}
.kd-sh-input {
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  padding: 12px 14px;
  border: 1px solid #7B8A97;
  border-radius: 10px;
  background: #F7FAFC;
  color: #10283A;
  font-size: 16px;
  /* 内側の上に、細い影を入れる */
  box-shadow: inset 0 2px 4px rgba(16, 40, 58, .12);
}
.kd-sh-input:focus {
  outline: 3px solid #0284C7;
  outline-offset: 2px;
  background: #FFFFFF;
}

4. 形に沿って落ちる影（ラベル）

右はしを矢羽根の形に切り抜いたラベルです。clip-path（要素を好きな形に切り抜く指定）で切ると、box-shadow の影もいっしょに切られて消えてしまいます。そこで、外側の箱に filter: drop-shadow()（見えている形に沿って影を落とす指定）を付けています。

HTML

<span class="kd-sh-tag">
  <span class="kd-sh-tag-in">NEW</span>
</span>

CSS

.kd-sh-tag {
  display: inline-block;
  /* 中の形に沿って、影を落とす */
  filter: drop-shadow(0 6px 6px rgba(16, 40, 58, .28));
}
.kd-sh-tag-in {
  display: inline-block;
  padding: 10px 34px 10px 20px;
  background: #0369A1;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  /* 右はしを矢羽根の形に切り抜く */
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%);
}

※ コードの上の見本は、比べやすいように動きを止めています。2はマウスを乗せたとき、3は入力欄を選んだときに見た目が変わります。

仕組み：影は「ずれ・ぼかし・広がり・色」の4つで決まる

box-shadow の数字の読み方

box-shadow: 0 10px 28px rgba(16, 40, 58, .12) は、左から「横のずれ」「縦のずれ」「ぼかし」「色」です。横0・縦10pxは、影が真下に10pxずれる、つまり光が真上から当たっている形です。ぼかしの数字が大きいほど、影はふちがやわらかく、広く薄くなります。

ぼかしのあとにもう1つ数字を入れると「広がり」になります。プラスにすると影が要素より大きく、マイナスにすると小さくなります。今回の見本では使っていませんが、影を下だけに出したいときに、マイナスの広がりを使うことがあります。

カンマで重ねると、自然な影になる

MDNでは、box-shadow はカンマで区切って複数の影を並べられ、先に書いた影が上に重なると説明されています。1のカードは「近くの小さくて濃いめの影」と「遠くの大きくて薄い影」を重ねています。実際の物の影も、接している部分は濃く、離れるほどぼんやり広がります。影を1つだけにするより、2つ重ねたほうが、紙が机に置かれているような落ち着いた見え方になります。

inset は内側、drop-shadow は形に沿う

inset を付けると、影は要素の内側に入ります。3の入力欄のように、上の辺に影を入れると、少しへこんだ見え方になります。

box-shadow は、要素の箱の形（角丸なら角丸の形）に影を付けます。一方、filter: drop-shadow() は、見えている形に沿って影を落とします。MDNでは、透明な部分を除いた形に、ずらしてぼかした影を作ると説明されています。透過PNGのイラストや、4のように切り抜いた形に影を付けたいときは、こちらを使います。ただし drop-shadow() には、inset と「広がり」の値は使えません。

切り抜いた要素は、外側の箱に影を付ける

clip-path で切り抜くと、切り抜いた外側は表示されません。要素そのものに付けた影も外側にあるので、いっしょに消えます。4では、切り抜くのは中の span、影を付けるのは外側の span と、役割を分けています。

数値を変えるとどうなるか

ぼかし（3つ目の数字）

同じカードで、縦のずれ（10px）と濃さはそのままに、ぼかしだけを変えて並べました。

4px：輪郭がくっきり

28px：目安のぼかし

60px：影が広がって薄い

4pxでは、影の輪郭がくっきりして、カードの下に黒い板が敷いてあるように見えます。60pxまで広げると、影がカードからはみ出して薄く広がり、どこまでがカードなのかがぼやけます。KAKERUでは、縦のずれの2〜3倍くらいのぼかしを目安にしています。

濃さ（rgba の最後の数字）

6%：ほぼ見えない

16%：目安の濃さ

40%：重たい影

6%では、白い背景の上ではほとんど見えません。40%では、カードが重たく浮いて見え、並べたときに影ばかりが目に入ります。白い背景の上のカードなら、12〜18%くらいが落ち着きます。

影の色：黒と、文字の色に近い紺

黒35%：灰色ににごる

紺16%：背景になじむ

黒を濃くした影は、白い背景の上で灰色ににごって見えます。文字と同じ紺（#10283A）を薄くした影は、同じくらいの見え方でも、ページの色になじみます。背景に色が付いているページなら、その背景の色を濃くした色で影を作ると、さらに自然です。

box-shadow と drop-shadow

4と同じ形のラベルで、外側の箱に box-shadow を付けた場合（左）と、drop-shadow() を付けた場合（右）です。

box-shadow：四角い影

drop-shadow：形に沿う影

左は、切り抜いた部分のうしろにも四角い影が出ています。右は、矢羽根の切れ込みにも影が沿っています。

変えるところ	小さくすると	大きくすると
縦のずれ（1の 10px）	影がカードのまわりに均等に付き、浮いて見えにくい	カードが高く浮いて見える。大きすぎると影が離れて見える
ぼかし（1の 28px）	輪郭がくっきりして、板のような影になる	影が広く薄くなり、カードの範囲がぼやける
濃さ（1の .12）	白い背景の上で、ほとんど見えない	影ばかりが目立ち、重たく見える
持ち上がる量（2の -4px）	動きに気づきにくい	ぴょんと跳ねて見え、並べると落ち着かない

スマホと、見る人への配慮

影が消える表示がある

Windowsの「コントラストテーマ」のように、ブラウザが決まった色で表示する「強制カラーモード」では、MDNの説明どおり box-shadow は表示されなくなります。影だけでカードの範囲を見せていると、カードの境目が分からなくなります。1のコードでは、@media (forced-colors: active)（強制カラーモードのときだけ使う指定）で枠線を出しています。2のカードに使うときも、同じ4行を足します。

入力欄の形は、影ではなく枠線で見せる

W3Cのアクセシビリティの基準（WCAG 2.2）では、入力欄のように「ここに入力する」と見分けるのに必要な線は、となりの色と3対1以上の明るさの差が目安です。3の入力欄の枠線（#7B8A97）は、白いページに対して約3.5対1、入力欄の中の色に対して約3.4対1です。内側の影はうすい飾りなので、影だけでは入力欄の形を見せていません。選んだときの青い線（#0284C7）は、白に対して約4.1対1です。

キーボードで選んだときも、同じ見え方にする

2のカードは、:hover（マウスを乗せたとき）と :focus-visible（キーボードのTabキーなどで選んだとき）の両方で持ち上がります。さらに、選んだときは青い線も出します。影の変化だけでは、どれを選んでいるかが分かりにくいためです。スマホにはマウスを乗せる操作がないので、持ち上がる動きがなくても、カードであることが分かる見た目にしておきます。

動きを減らす設定と、動かし方

2のコードは、@media (prefers-reduced-motion: reduce)（端末で動きを減らす設定にしている人向けの指定）で、持ち上げる動きを止め、影の変化だけを残しています。

また、web.devのアニメーションの解説では、なめらかに動かすには transform と opacity 以外の、描き直しが起きる指定を動かすのは避けるよう説明されています。box-shadow を直接変えると、変わるたびに影の描き直しが起きます。2では、大きな影を先に ::after に付けておき、opacity だけを変えています。

やりすぎ注意

影は、付けるほど立体的になりますが、カードにもボタンにも見出しにも濃い影を付けると、ページ全体がでこぼこして、どこが大事なのかが分からなくなります。KAKERUでは、1つのサイトで使う影は「ふつう」と「持ち上がったとき」の2段階くらいに決めて、同じ指定をくり返し使っています。

影は、サイトの中で「光がどこから当たっているか」をそろえるのが大事です。
カードごとに影の向きや濃さがばらばらだと、なんとなく落ち着かないページになります。

AIに頼むなら

影は、Claudeなどの生成AIに頼むとすぐ作ってもらえます。そのときは「どんな背景の上か」「ずれ・ぼかし・濃さ」「影の色」「動かすかどうか」まで、まとめて伝えると手直しが少なく済みます。

白い背景の上に置くカードに、box-shadow でふんわりした影を付けて。
影は2つ重ね（0 1px 3px と 0 10px 28px）、色は #10283A の8%と12%。
マウスを乗せたら4px持ち上げて、:focus-visible でも同じにし、prefers-reduced-motion では動かさないで。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

影の色が黒になっていないか。rgba(0, 0, 0, .3) のような黒い影は、白い背景の上で灰色ににごります。ページの文字や背景に近い色に置きかえます
box-shadow の値を直接動かしていないか。transition: box-shadow で大きな影に変える書き方はよく出てきます。カードが多いページでは、2のように ::after の opacity で切りかえる形に直します
影だけで部品の形を見せていないか。入力欄やボタンの形が影だけで表されていると、影が消える表示では見えなくなります。枠線や、選んだときの線があるかを見ます

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

白い背景に並べるカード。お知らせや制作実績の一覧で、1つ1つをひとかたまりに見せたいときに、1のふんわり影を使います。枠線より軽く、ページが明るく見えます
押せるカードの「押せそう」な合図。一覧のカード全体がリンクになっているときは、2のように、マウスを乗せたときだけ影を大きくします。押せないカードと見分けやすくなります
切り抜いたイラストや、形のあるラベル。透過PNGの商品画像や、4のような形のラベルには、drop-shadow() で形に沿った影を付けます

使わない場面

色のある背景や写真の上。影が見えにくく、付けても違いが出ません。濃くするとにごるので、枠線や背景色の差で区切ります
押せない部品に、押せる部品と同じ影。ただの説明の箱に、ボタンと同じ影を付けると、押せるものと勘違いされます
文字だけの見出しや本文。文字に影を付けると、読みにくくなることが多いです。見出しを目立たせたいときは、大きさや太さ、色で差をつけます

影を足す前に、「これは押せるのか、置いてあるだけなのか」を決めます。
影の強さをその2つで分けておくと、見る人が迷わないページになります。

まとめ

影は box-shadow で付けられる。数字は左から「横のずれ・縦のずれ・ぼかし・（広がり）・色」
カンマで「近くの小さな影」と「遠くの大きな影」を重ねると、自然に見える
影の色は黒ではなく、文字や背景に近い色を薄くして使う
inset で内側の影、drop-shadow() で形に沿った影。切り抜いた要素は外側の箱に影を付ける
動かすときは ::after の opacity で切りかえ、:focus-visible と動きを減らす設定にも対応する
影が消える表示もあるので、部品の形は枠線でも見せる

まずは1の「ふんわり影のカード」のコードをコピーして、自分のサイトのカードに付けてみてください。そのあと 28px と .12 の数字を変えると、影の印象の変わり方がよく分かります。

参考にした資料

いずれも2026年10月26日に確認しました。ブラウザの対応状況は変わることがあります。最新の情報は各ページでご確認ください。

MDN「box-shadow」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/box-shadow
※横・縦のずれ、ぼかし、広がり、色、inset の意味。カンマで区切って複数の影を重ねられ、先に書いた影が上に重なること。角丸に影も沿うこと。Baseline Widely available（2015年7月から主要ブラウザで使える）
MDN「drop-shadow()」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/filter-function/drop-shadow
※見えている形（透明な部分を除いた形）に沿って影を落とすこと。box-shadow は要素の箱全体の形に影を付けること。inset と広がりの値は使えないこと
MDN「clip-path」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path
※要素を決めた形に切り抜き、その外側は表示されないこと
MDN「forced-colors」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/forced-colors
※強制カラーモード（Windowsのコントラストテーマなど）では box-shadow が none になること。代わりに枠線を出す例
MDN「prefers-reduced-motion」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion
※端末で動きを減らす設定にしている人を読み取る指定
web.dev「How to create high-performance CSS animations」（英語）
https://web.dev/articles/animations-guide
※transform と opacity 以外の、レイアウトや描き直しが起きる指定を動かすのは避けること
W3C「Understanding SC 1.4.11 Non-text Contrast」（英語）
https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
※入力欄など、部品を見分けるのに必要な線は、となりの色と3:1以上の明るさの差があること