{ freetool24 }
Developer Tools

CSSグラデーションとボックスシャドウ：完全ビジュアルガイド

CSSのリニアグラデーション、ラジアルグラデーション、コニックグラデーション、多層ボックスシャドウをマスターしよう — 実践的なパターンと、プロダクション対応のコードを生成するツールも紹介します。

7分で読めます

ノートパソコン画面に映るカラフルなグラデーション背景

CSSのグラデーションとボックスシャドウは、Webデベロッパーのツールキットの中でも特に強力でありながら、十分に活用されていないビジュアル表現の手法です。うまく使えば、インターフェースに奥行き・階層感・洗練さを加えられます。一方で使い方を誤ると、2009年代のWebサイトのような仕上がりになってしまいます。このガイドでは、技術的な仕組みとセンスの両方を解説します。

CSSグラデーション

リニアグラデーション

最も一般的なグラデーションの種類で、ある色から別の色へ直線的に変化します。

/* 基本的な左から右 */
background: linear-gradient(to right, #3b82f6, #8b5cf6);

/* 斜め */
background: linear-gradient(135deg, #667eea, #764ba2);

/* 複数のカラーストップ */
background: linear-gradient(to right, #f093fb, #f5576c, #4facfe);

/* 透明度付き */
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8));

/* ハードストップ（ブレンドなし） */
background: linear-gradient(to right, #3b82f6 50%, #8b5cf6 50%);

角度は度数（0deg = 下から上、90deg = 左から右）またはキーワード（to top、to right、to bottom-right）で指定できます。

ラジアルグラデーション

中心点から外側に向かって広がるグラデーションです。

/* 円形グラデーション */
background: radial-gradient(circle, #667eea, #764ba2);

/* 楕円形（デフォルト） */
background: radial-gradient(ellipse, #f093fb, #f5576c);

/* 中心位置を指定 */
background: radial-gradient(circle at 30% 40%, #3b82f6, transparent);

/* スポットライト効果 */
background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);

ラジアルグラデーションは、スポットライト効果・グロー・ビネットに最適です。

コニックグラデーション

カラーホイールや円グラフのように、中心点を軸に色が回転しながら広がるグラデーションです。

/* カラーホイール */
background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);

/* 円グラフのセグメント */
background: conic-gradient(
  #3b82f6 0% 35%,
  #8b5cf6 35% 60%,
  #10b981 60% 80%,
  #f59e0b 80% 100%
);

/* チェッカーボードパターン */
background: conic-gradient(#eee 90deg, white 90deg 180deg, #eee 180deg 270deg, white 270deg);
background-size: 40px 40px;

グラデーションテキスト

現代のUIで特に人気の高いエフェクトのひとつです：

.gradient-text {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

画像へのグラデーションオーバーレイ

写真の上にテキストを読みやすく表示するために欠かせないテクニックです：

.hero {
  background-image:
    linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.85) 100%),
    url('hero.jpg');
  background-size: cover;
}

CSS Gradient Generatorを使えば、グラデーションをビジュアルで作成し、ライブプレビューを確認しながらワンクリックでCSSをコピーできます。

ボックスシャドウ

box-shadowの構文

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;
  • offset-x / offset-y — 影の位置（正の値 = 右/下方向）
  • blur-radius — 0 = くっきりした輪郭、数値が大きいほど柔らかくなる
  • spread-radius — 正の値で影を広げ、負の値で縮小する
  • inset — 要素の外側ではなく内側に影を描画する

基本的な影

/* 控えめな浮き上がり感 */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

/* カードの影 */
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);

/* 大きなモーダルの影 */
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);

/* ハードなドロップシャドウ（ぼかしなし） */
box-shadow: 4px 4px 0px #1e293b;

多層シャドウ

複数の影をカンマで重ねることができます。これがリアルな影を実現する鍵です：

/* Material Designの浮き上がり */
box-shadow:
  0 2px 1px -1px rgba(0,0,0,0.2),
  0 1px 1px 0 rgba(0,0,0,0.14),
  0 1px 3px 0 rgba(0,0,0,0.12);

/* 奥行きのある重ね合わせ */
box-shadow:
  0 1px 2px rgba(0,0,0,0.07),
  0 2px 4px rgba(0,0,0,0.07),
  0 4px 8px rgba(0,0,0,0.07),
  0 8px 16px rgba(0,0,0,0.07),
  0 16px 32px rgba(0,0,0,0.07);

後者のアプローチは影のエネルギーを複数のレイヤーに分散させることで、より自然な奥行きの減衰を生み出します。

インセットシャドウ

要素の内側に影を描画します。押し込まれた状態の表現や入力フィールドに最適です：

/* ボタンの押下状態 */
button:active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* 奥行きのある入力フィールド */
input {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}

/* フロストガラスの内側グロー */
.glass {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 4px 20px rgba(0,0,0,0.2);
}

カラードシャドウ

影は必ずしも黒である必要はありません。色付きの影で鮮やかさを加えましょう：

/* 色付きの浮き上がり */
.btn-primary {
  background: #3b82f6;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

/* ダークモードのグロー */
.card {
  background: #1e293b;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 8px 32px rgba(0,0,0,0.4);
}

なめらかな影のトランジション

ホバー時に影をアニメーションさせて、心地よいインタラクションを実現しましょう：

.card {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

グラデーションとシャドウの組み合わせ

洗練されたUIでは、グラデーションとシャドウを組み合わせて使います：

.premium-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 4px 6px -1px rgba(0,0,0,0.2),
    0 20px 40px -5px rgba(0,0,0,0.4);
}

.gradient-button {
  background: linear-gradient(135deg, #667eea, #764ba2);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transition: all 0.2s;
}

.gradient-button:hover {
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
  transform: translateY(-1px);
}

作業を効率化するツール

  • CSS Gradient Generator — 複数のカラーストップ・角度・タイプを指定してグラデーションをビジュアルで作成。ライブプレビューとワンクリックコピーに対応。
  • CSS Box Shadow Generator — 複数の影を重ねてblur・spread・colorを調整し、すぐに使えるCSSを即座に取得。
  • Color Format Converter — HEX、RGB、HSL、RGBAを相互変換 — 影の不透明度を設定する際に欠かせないツールです。
  • Color Palette Generator — 補色・類似色・モノクロマティックなパレットを生成して、グラデーションに最適な色の組み合わせを見つけましょう。

グラデーションとシャドウには、良いデザイン全般に共通するルールが当てはまります：それは「抑制」です。丁寧に作られたシャドウやグラデーションが一つあるだけで、コンポーネントは格段に引き立ちます。しかし多数の要素が競い合えば、ノイズが生まれるだけです。技術をマスターしたうえで、意図を持って使いましょう。

すべての記事に戻るツールを閲覧