DevToolBox

CSS box-shadow の書き方 - 影のパターン集とドロップシャドウの作り方

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); のような値の意味が分からないまま、なんとなく コピペしていないでしょうか。box-shadowはoffset-x・offset-y・blur-radius・spread-radius・color・insetの6つの値を組み合わせるだけの単純な構文です。この記事では構文の意味、よく使う影のパターン、 複数の影を重ねるテクニック、text-shadow・filter: drop-shadow()との違い、 ブラウザ対応までを実例つきでまとめます。

If you have been copy-pasting box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) without knowing what each number does, this guide breaks down the six-value syntax (offset-x, offset-y, blur-radius, spread-radius, color, and the optional inset keyword), walks through common shadow patterns, explains how to layer multiple shadows, and clarifies how box-shadow differs from text-shadow and filter: drop-shadow().

TL;DR

CSS Generator

offset-x・offset-y・blur・spread・色・insetをスライダーとカラーピッカーで調整し、box-shadowのCSSをリアルタイムプレビューしながら生成。border-radius・gradientも同じ画面で作れます。ブラウザ完結・外部送信なし。

今すぐ試す →

1. box-shadowの構文 / box-shadow syntax

box-shadowは最大6つの値を半角スペース区切りで並べます。insetを除く5つの値のうち、最初の2つは必ずoffset-x・offset-yの順で、blur-radius・spread-radiusは省略可能、 colorは省略するとcurrentColor(そのテキストの文字色)が使われます。

値 / Value意味 / Meaning省略負の値
offset-x水平方向のずれ。正で右、負で左不可可
offset-y垂直方向のずれ。正で下、負で上不可可
blur-radiusぼかしの半径。大きいほど輪郭がぼやける可(既定0)不可
spread-radius影の拡大・縮小。正で影が大きく、負で小さく可(既定0)可
color影の色。省略時はcurrentColor可-
inset付けると外側ではなく内側の影になる可(既定は外側)-
/* 基本形: offset-x offset-y blur-radius spread-radius color */
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.3);

/* blur-radius/spread-radiusは省略可(0扱い) */
box-shadow: 2px 2px black;

/* insetは値の先頭または末尾に置く */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);

The first two length values are always offset-x then offset-y. blur-radius and spread-radius are optional and default to 0. The inset keyword can appear first or last in the value list.

2. よく使う影のパターン集 / Common shadow patterns

ゼロから数値を考えるより、目的別の定番パターンを覚えて微調整する方が早く仕上がります。

カード用のソフトシャドウ(2層重ね)

.card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
              0 8px 24px rgba(0, 0, 0, 0.08);
}

くっきりしたハードシャドウ(ドロップシャドウ風)

.panel {
  /* blurを0にすると輪郭のはっきりした「落ち影」になる */
  box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.85);
}

ホバーで浮き上がるボタン

.btn {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.btn:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

押し込み(inset)ボタン

.btn-pressed {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

フォーカスリング(アクセシビリティ対応)

.input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
}

ニューモーフィズム(凹凸表現)

.neumorphic {
  background: #e0e5ec;
  box-shadow: 8px 8px 16px #b8bcc2, -8px -8px 16px #ffffff;
}

Six drop-in patterns: a two-layer soft card shadow, a hard-edged drop shadow, a hover-elevation button, an inset "pressed" button, an accessible focus ring, and a neumorphic dual-light effect.

3. 複数の影を重ねる / Layering multiple shadows

box-shadowはカンマ区切りで複数指定できます。重なり順は「先に書いた影ほど手前(上)」で、 z-indexのような重なりのルールがそのまま影にも適用されると考えてください。奥行きを出したいときは、 手前に薄く小さい影、奥に濃く大きい影という順で重ねると自然に見えます。

/* 弱い影を近くに、強い影を遠くに重ねると自然な立体感になる */
box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.24),
  0 4px 8px rgba(0, 0, 0, 0.16),
  0 16px 32px rgba(0, 0, 0, 0.08);

なお本サイトのCSS Generatorのようなビジュアルツールは、1回の操作で1つのbox-shadow文字列しか 生成しません。多層の影が欲しい場合は、層ごとに値を作ってからカンマで手動連結してください。

Comma-separated shadows paint in listed order, with earlier shadows on top. Stack a small sharp shadow close to the element and a larger soft shadow further out for realistic depth. A visual generator typically produces one shadow layer at a time — build each layer separately and join them with commas for a multi-layer effect.

4. text-shadow・filter: drop-shadow() との違い / vs. text-shadow and filter: drop-shadow()

「drop shadow css generator」で検索すると混同されがちなのがfilter: drop-shadow()です。 box-shadowは要素の矩形の箱(border-boxで、border-radiusがあればその丸角に追従)に沿って 描かれますが、透過PNGやSVGのように「四角形ではない実際の見た目」に影を落としたい場合はfilter: drop-shadow()を使います。text-shadowはさらに別物で、文字のグリフそのものの形に 影が沿います。

プロパティ適用対象spread-radiusinset形状追従
box-shadow要素の矩形(border-box)ありありborder-radiusに追従
text-shadow文字のグリフなしなし文字の形そのもの
filter: drop-shadow()要素の実際の描画形状なしなし非矩形の輪郭に追従
/* box-shadow: 透過部分にも四角い影が出る */
.logo-box-shadow {
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
}

/* filter: drop-shadow(): 透過PNG/SVGの絵柄そのものに影が沿う */
.logo-drop-shadow {
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.4));
}

/* text-shadow: 文字の形に影が沿う。spread-radiusとinsetは存在しない */
.heading {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

box-shadow follows the element's rectangular box (and its border-radius). filter: drop-shadow() follows the actual rendered shape, which matters for transparent PNGs and SVG icons. text-shadow follows each glyph's outline. Only box-shadow supports spread-radius and inset.

5. ブラウザ対応 / Browser support

box-shadowは全モダンブラウザで接頭辞なしで使えます(Chrome 10+ / Firefox 4+ / Safari 5.1+ / Edge全バージョン)。inset・複数影・spread-radiusも同時期からサポートされており、 実務で対応を気にする必要はほぼありません。filter: drop-shadow()はやや遅く、 Chrome 53+ / Firefox 35+ / Safari 9.1+ / Edge 79+(Chromium版)からの対応です。

プロパティChromeFirefoxSafariEdge
box-shadow10+4+5.1+全バージョン
filter: drop-shadow()53+35+9.1+79+

6. よくある失敗と対処 / Common mistakes

まとめ / Summary

box-shadowはoffset-x・offset-y・blur-radius・spread-radius・color・insetの6値を組み合わせるだけです。 パターンを丸暗記するより「どの値が何を動かすか」を理解しておくと、どんな影も自分で調整できるように なります。細かい数値の試行錯誤はCSS Generatorに任せて、生成されたCSSをそのままコピーして使うのが 一番の近道です。

CSS box-shadow takes up to six values: offset-x, offset-y, blur-radius, spread-radius, color, and the optional inset keyword. offset-x/offset-y position the shadow, blur-radius softens its edge, and spread-radius grows or shrinks the shadow itself before blurring. Multiple shadows can be layered with commas; earlier shadows paint on top of later ones. Unlike box-shadow, text-shadow has no spread-radius or inset and follows the shape of each glyph, while filter: drop-shadow() follows the actual rendered shape of an element (useful for transparent PNGs and SVGs) and also lacks spread-radius and inset. All of these are supported in every modern browser without vendor prefixes. For quick iteration, generate the shadow visually with the CSS Generator tool and copy the resulting CSS.

CSS Generator

スライダーで影を調整しながらリアルタイムプレビュー。生成されたbox-shadowのCSSはワンクリックでコピーできます。border-radius・gradientも同じツールで作成可能です。

今すぐ試す →

関連ツール / Related tools

関連ガイド / Related guides