CSSシャドウジェネレーター:ボックスシャドウとテキストシャドウを簡単に

2026年3月31日 · 12分で読めます

CSSシャドウを理解する

一部のWeb要素が画面から「飛び出して」見える一方で、他の要素は平坦で生気がないように感じることに気づいたことはありますか?その視覚的な魔法は、多くの場合、CSSの強力な機能であるシャドウに起因しています。シャドウは、ボタン、カード、見出しなどの要素に奥行きを与え、二次元のインターフェースを触れることができるようなインタラクティブなものに変えます。

CSSシャドウは単なる装飾的な装飾ではありません。モダンなWebデザインにおいて重要な機能的目的を果たします。シャドウは視覚的な階層を作り、ユーザーの注意を導き、インタラクティブ性を示し、要素間の空間的関係を確立します。ボタンに微妙なシャドウがある場合、ユーザーは本能的にそれがクリック可能であることを理解します。ホバー時にそのシャドウが変化すると、要素がインタラクティブであることが確認されます。

シャドウの背後にある心理学は、私たちが物理的な世界をどのように認識するかに根ざしています。現実の世界では、物体は表面からの距離と光源に基づいて影を落とします。Webデザインでこれらの自然現象を模倣することで、馴染みがあり直感的に感じられるインターフェースを作成します。柔らかいシャドウを持つカードはページの上に浮いているように見え、インセットシャドウを持つ押されたボタンは表面に凹んでいるように見えます。

CSSは2つの主要なシャドウプロパティを提供します:要素コンテナ用のbox-shadowとタイポグラフィ用のtext-shadowです。これらは似た構文パターンを共有していますが、それぞれが異なる目的を果たし、独自のクリエイティブな可能性を提供します。両方を理解することで、デザインシステム全体を向上させる洗練された視覚効果を作成できます。

ボックスシャドウ:基礎と構文

ボックスシャドウはCSS奥行き効果の主力です。要素のボックスモデル全体に適用され、ボタン、カード、画像、コンテナ、そして事実上すべてのHTML要素の周りにシャドウを作成します。box-shadowプロパティは非常に柔軟で、微妙な高さのヒントから劇的な照明効果まで、あらゆるものをサポートします。

ボックスシャドウの完全な構文は次のとおりです:

element {
  box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;
}

各コンポーネントを詳しく見ていきましょう:

微妙な高さのシャドウを持つモダンなボタンの実用的な例を次に示します:

.button-primary {
  background: #6366f1;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.button-primary:hover {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

これにより、ページからわずかに浮き上がって見えるボタンが作成されます。ホバー時には、シャドウが大きく柔らかくなり、ボタンがユーザーに近づいているような錯覚を作り出します。この微妙なインタラクションは、要素がインタラクティブであることを即座に視覚的にフィードバックします。

オフセット値を理解する

オフセット値(offset-xとoffset-y)は、要素に対してシャドウがどこに表示されるかを決定します。これらの値は光源の位置をシミュレートします:

• 正のoffset-x:シャドウは右側に表示(光源は左から)
• 負のoffset-x:シャドウは左側に表示(光源は右から)
• 正のoffset-y:シャドウは下に表示(光源は上から)
• 負のoffset-y:シャドウは上に表示(光源は下から)
• 両方ゼロ:シャドウは要素の周りに均等に表示(中央の光源)

最も自然に見えるシャドウは、正のoffset-y値を使用します。これは、物理的な世界では光が上から来ることに慣れているためです。一般的なパターンは、微妙な高さには0 2px、より顕著な奥行きには0 8pxです。

ブラー半径とスプレッド半径

ブラー半径はシャドウの柔らかさを制御します。0の値はハードエッジのシャドウを作成し、大きい値はますます柔らかく拡散したシャドウを作成します。ほとんどのUI要素では、4pxから20pxの間のブラー値がうまく機能します。

スプレッド半径はしばしば誤解されています。ブラーが適用される前にシャドウを拡大または縮小します。正のスプレッドはシャドウを要素よりも大きくし、負のスプレッドは小さくします。これは、要素自体ほど広がらないシャドウを作成するのに便利です。

高度なボックスシャドウテクニック

基本的なボックスシャドウをマスターしたら、洗練された視覚効果を作成する高度なテクニックを探求できます。これらの方法は、洗練されたプロフェッショナルなインターフェースを実現するために、主要なデザインシステムやモダンなWebアプリケーションで使用されています。

リアルな奥行きのためのレイヤードシャドウ

現実世界のシャドウは均一ではありません。シャープなコンポーネントとソフトなコンポーネントの両方があります。カンマで区切ることで、単一の要素に複数のシャドウを重ねることができます:

.card-elevated {
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

.card-floating {
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.15),
    0 3px 6px rgba(0, 0, 0, 0.10);
}

マテリアルデザインによって普及したこのテクニックは、より大きく柔らかいシャドウと小さくシャープなシャドウを組み合わせることで、よりリアルなシャドウを作成します。その結果、物理的な世界で光がどのように振る舞うかを模倣し、シャドウには本影(暗いコア)と半影(柔らかいエッジ)の両方があります。

奥行きとテクスチャのためのインセットシャドウ

insetキーワードは、シャドウを外側ではなく要素の内側に表示するように反転させます。これにより、奥行き、凹み、またはテクスチャの外観が作成されます:

.input-field {
  background: white;
  border: 1px solid #e5e7eb;
  padding: 10px 15px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

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

インセットシャドウはフォーム入力に最適で、ページに「彫り込まれている」ことを示唆する微妙な凹んだ外観を与えます。また、アクティブ/押されたボタンの状態にも優れており、触覚的なフィードバックを作成します。

ブランドアイデンティティのためのカラードシャドウ

シャドウは黒または灰色でなければならないと誰が言いましたか?カラードシャドウは、ブランドアイデンティティを強化し、独特の視覚スタイルを作成できます:

.brand-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(99, 102, 241, 0.2);
}

.success-button {
  background: #10b981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

低い不透明度でブランドカラーをシャドウに使用すると、まとまりのある記憶に残るデザインが作成されます。このテクニックは、コールトゥアクションボタンや注目コンテンツカードに特に効果的です。

ニューモーフィズムとソフトUI

ニューモーフィズムは、背景から押し出されたり、背景にくぼんだりするように見えるインターフェースを作成します。これには、明るいシャドウと暗いシャドウを組み合わせる必要があります:

.neumorphic-card {
  background: #e0e5ec;
  border-radius: 20px;
  box-shadow:
    9px 9px 16px rgba(163, 177, 198, 0.6),
    -9px -9px 16px rgba(255, 255, 255, 0.5);
}

ニューモーフィズムは人気の瞬間がありましたが、控えめに使用してください。コントラストが低いためアクセシビリティの問題を引き起こす可能性があり、重要なUIコンポーネントではなく装飾的な要素に最適です。

テキストシャドウの解説

テキストシャドウは、テキストコンテンツに特に適用され、タイポグラフィに奥行き、強調、または装飾効果を作成します。text-shadowプロパティは、ボックスシャドウよりも単純な構文を使用しますが、同様に強力なクリエイティブな可能性を提供します。

基本的な構文は次のとおりです:

element {
  text-shadow: offset-x offset-y blur-radius color;
}

テキストシャドウには、スプレッド半径やinsetキーワードが含まれていないことに注意してください。このプロパティは、3つの主要な値に焦点を当てています:

ヒーロー見出しの実用的な例を次に示します:

h1.hero-title {
  font-size: 48px;
  font-weigh