CSSシャドウ徹底解説！box-shadowとtext-shadowの使い方とデザイン例

CSSでシャドウ（影）をつけるテクニックは、デザインの印象を大きく左右する重要なポイントです。
文字やボックスに影を加えることで、立体感や視認性が向上し、デザイン全体の質をぐっと引き上げることができます。
本記事では、CSSのbox-shadowとtext-shadowプロパティの基本から、実用的なデザインパターン、よくある注意点まで、初心者の方にもわかりやすく解説します。

CSSでシャドウをつける方法とは？

CSSで影（シャドウ）をつけるには、主に2つのプロパティを使います。

  • box-shadow：ボックス（要素）に影をつける
  • text-shadow：テキスト（文字）に影をつける

どちらも視覚的に魅力的なデザインを実現するために欠かせない機能です。以下でそれぞれ詳しく見ていきましょう。

box-shadowの基本構文と使い方

まずはボックス（要素）に影を加えるbox-shadowから。

box-shadow: 水平距離 垂直距離 ぼかしの半径 広がりの距離 色;

例えば、以下のコードは軽い影をつける例です。

box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.3);
  • 4px 4px：右下にずらした位置
  • 10px：ぼかしの強さ
  • 0px：影の広がり（省略可）
  • rgba(0,0,0,0.3)：黒色で30%の透明度

このように数値の調整で影の印象を自由にカスタマイズできます。

text-shadowの基本構文と使い方

文字に影をつけるにはtext-shadowを使います。

text-shadow: 水平距離 垂直距離 ぼかしの半径 色;

例：

text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  • テキストの右下に、軽くぼやけた黒い影をつける設定です。
  • 特に白文字の上に背景画像を重ねるときなどに有効です。

シャドウを使ったデザイン例

ボタンに立体感を出す

button {
  background-color: #007BFF;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

このように、ボタンにbox-shadowをつけることでクリック感のあるボタンになります。

カードデザインの装飾

.card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0px 4px 12px rgba(0,0,0,0.1);
}

最近のWebデザインで多く使われるカードUIも、シャドウで立体感を演出しています。

タイトル文字に強調シャドウ

h1 {
  font-size: 3rem;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
}

大きめの文字にシャドウを使うと、インパクトのある見出しになります。

シャドウの色と透明度の使い分け

CSSでは、影の色もカスタマイズできます。

  • blackやgrayなどのキーワード
  • rgba(0,0,0,0.5)のような透明度付きの色指定

rgbaやhslaで色の濃さを調整することで、柔らかい影を表現することができます。

insetで内側に影をつける

box-shadowにはinsetを使うことで、影を内側にすることも可能です。

box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3);

これは凹んだような見た目をつくるときに便利で、フォームの入力欄などで使われることが多いです。

複数のシャドウを重ねて表現する

box-shadowやtext-shadowは、カンマ区切りで複数設定できます。

box-shadow: 2px 2px 4px rgba(0,0,0,0.3), -2px -2px 4px rgba(255,255,255,0.5);

このように複数の影を組み合わせることで、より立体的でリッチなデザインを作ることができます。

シャドウを使うときの注意点

パフォーマンスへの影響

box-shadowはGPU描画を必要とするため、多用するとレンダリング負荷がかかることがあります。
特にスマホなどスペックの低い端末では注意しましょう。

シャドウが濃すぎると不自然になる

濃すぎる影は、逆にデザインをチープに見せる原因になります。
rgbaの透明度を調整して、自然な見た目を意識しましょう。

シャドウを活用した実用的なテクニック

フローティング感を演出する

Webサイト全体に軽やかな浮遊感を与えるには、box-shadowの上下方向だけでなく、左右にもわずかなずれを与えると効果的です。

ダークモードとの相性

ダークテーマのときには、白や明るい色のシャドウを使うと文字やボックスが浮かび上がって見えます。

text-shadow: 0px 1px 3px rgba(255,255,255,0.3);

まとめ：CSSシャドウでデザインのクオリティを上げよう

CSSのbox-shadowやtext-shadowは、手軽にビジュアルにアクセントを加えることができる強力なツールです。
ただし使いすぎには注意し、適度に取り入れることで、洗練された印象を与えることができます。

デザインに少し物足りなさを感じたら、シャドウの追加を検討してみてください。きっと見違えるように印象が変わるはずです。

タイトルとURLをコピーしました