CSSグラデーションとは？初心者でも5分でわかる基本の作り方

CSS グラデーションとは？Web デザインで注目される理由

CSS グラデーションは、2 色以上の色を滑らかに変化させる表現技法です。従来は画像を使って表現していたグラデーションを、CSS のコードだけで実装できるようになりました。

近年の Web デザインでは、グラデーションが非常に多用されています。

Apple や Google、Instagram など、名だたる企業の Web サイトやアプリでもグラデーション表現が採用されているのをご覧になったことがあるでしょう。

カンタンにグラデーションがつくれるツール ▼

CSSグラデーションジェネレーター

最大5色対応！カンタン操作で誰でもCSSグラデーションを作成できます。linear gradient, radial gradient対応。コードをワンクリックでコピー。

画像を使わずに美しい背景が作れる 3 つのメリット

CSS グラデーションを使うことで、以下のようなメリットがあります。

1. ファイルサイズの削減 画像ファイルを使う必要がないため、ページの読み込み速度が向上します。特にモバイル環境では、この差が大きなユーザー体験の違いを生みます。

2. レスポンシブ対応が簡単 CSS で記述されているため、どんな画面サイズでも自動的に伸縮します。画像のように複数サイズを用意する必要がありません。

3. 編集・修正が容易 色や角度を変更したい場合、コードを数文字変えるだけで完了。画像編集ソフトを開く必要がありません。

モダン Web サイトで多用されるグラデーション表現

2026 年現在、グラデーションは以下のような場面で活用されています。

ヒーローセクションの背景
ボタンやカードのアクセント
テキストへの装飾
ローディングアニメーション
グラスモーフィズムデザインの下地

特に「グラスモーフィズム」と呼ばれる半透明のガラスのような質感を表現するデザインでは、グラデーションが不可欠な要素となっています。

CSS グラデーションの 3 つの種類を理解しよう

CSS では、3 種類のグラデーションを表現できます。それぞれ特徴が異なるため、用途に応じて使い分けましょう。

1. linear-gradient（線形グラデーション）

最も基本的で、よく使われるグラデーションです。直線的に色が変化します。

CSS

.box {
  background: linear-gradient(to right, #667eea, #764ba2);
}

上から下、左から右、斜めなど、自由な方向にグラデーションを作成できます。

2. radial-gradient（円形グラデーション）

中心から外側に向かって、円形または楕円形に色が変化します。

CSS

.box {
  background: radial-gradient(circle, #667eea, #764ba2);
}

スポットライトのような効果や、ボタンのホバーエフェクトなどに使われます。

3. conic-gradient（扇形グラデーション）

中心点を軸に、時計回りに色が変化します。円グラフやカラーホイールの表現に適しています。

CSS

.box {
  background: conic-gradient(#667eea, #764ba2, #667eea);
}

この記事では、最も使用頻度の高いlinear-gradientを中心に解説していきます。

【コピペ OK】最もシンプルな linear-gradient の書き方

それでは、実際に linear-gradient を使ってグラデーションを作成してみましょう。

基本構文の解説

linear-gradient の基本構文は以下の通りです。

CSS

background: linear-gradient(方向, 開始色, 終了色);

非常にシンプルですね。3 つの要素を指定するだけで、美しいグラデーションが完成します。

2 色のグラデーションを実装してみよう

まずは最もシンプルな、2 色のグラデーションから始めましょう。

CSS

/* 上から下へのグラデーション */
.gradient-box {
  background: linear-gradient(to bottom, #667eea, #764ba2);
  width: 300px;
  height: 200px;
}

このコードは、青紫（#667eea）から紫（#764ba2）へ、上から下に向かって色が変化するグラデーションです。

CSS

/* 左から右へのグラデーション */
.gradient-box {
  background: linear-gradient(to right, #667eea, #764ba2);
  width: 300px;
  height: 200px;
}

to bottomをto rightに変えるだけで、方向が横向きになります。

色の指定方法（HEX/RGB/色名）

グラデーションの色は、CSS で使える様々な色指定方法が利用できます。

HEX カラーコード（最も一般的）

CSS

background: linear-gradient(to right, #667eea, #764ba2);

RGB/RGBA（透明度を指定したい場合）

CSS

background: linear-gradient(to right, rgb(102, 126, 234), rgb(118, 75, 162));

色名（わかりやすいが選択肢が限定的）

CSS

background: linear-gradient(to right, blue, purple);

おすすめは HEX カラーコードです。デザインツールから取得しやすく、コードも短く書けます。

グラデーションの方向を変える方法

グラデーションの魅力は、自由自在に方向を変えられること。ここでは 2 つの指定方法を紹介します。

角度指定（deg）の使い方

より細かく方向を制御したい場合は、角度（degree）で指定します。

CSS

/* 45度の斜めグラデーション */
.gradient-box {
  background: linear-gradient(45deg, #667eea, #764ba2);
}

角度の基準は以下の通りです。

0deg: 下から上（to top）
90deg: 左から右（to right）
180deg: 上から下（to bottom）
270deg: 右から左（to left）

CSS

/* 様々な角度のグラデーション */
background: linear-gradient(0deg, #667eea, #764ba2); /* 下→上 */
background: linear-gradient(90deg, #667eea, #764ba2); /* 左→右 */
background: linear-gradient(135deg, #667eea, #764ba2); /* 左下→右上 */
background: linear-gradient(180deg, #667eea, #764ba2); /* 上→下 */

キーワード指定（to right / to bottom 等）

直感的でわかりやすいのがキーワード指定です。

CSS

/* 上から下 */
background: linear-gradient(to bottom, #667eea, #764ba2);
 
/* 左から右 */
background: linear-gradient(to right, #667eea, #764ba2);
 
/* 左上から右下 */
background: linear-gradient(to bottom right, #667eea, #764ba2);
 
/* 右上から左下 */
background: linear-gradient(to bottom left, #667eea, #764ba2);

**初心者の方はキーワード指定から始めることをおすすめします。**コードの意味が一目でわかるため、後から見返したときも理解しやすいでしょう。

斜めグラデーションのコツ

斜めのグラデーションを作るときは、以下の 2 つの方法があります。

方法 1: キーワードで斜め方向を指定

CSS

/* 左上から右下 */
background: linear-gradient(to bottom right, #667eea, #764ba2);

方法 2: 角度で細かく調整

CSS

/* 135度（左下から右上） */
background: linear-gradient(135deg, #667eea, #764ba2);

デザインに応じて使い分けましょう。「だいたいこの方向」で良ければキーワード、「正確にこの角度」が必要なら角度指定がおすすめです。

3 色以上のグラデーションを作る

2 色だけでなく、3 色以上を使った複雑なグラデーションも簡単に作れます。

CSS

/* 3色のグラデーション */
.gradient-box {
  background: linear-gradient(to right, #667eea, #764ba2, #f093fb);
}

色を追加するだけで、自動的に均等に配置されます。

カラーストップで色の位置を調整

色の配置位置を細かく制御したい場合は、カラーストップを使います。

CSS

/* 色の位置を%で指定 */
.gradient-box {
  background: linear-gradient(
    to right,
    #667eea 0%,
    /* 開始位置 */ #764ba2 50%,
    /* 中央 */ #f093fb 100% /* 終了位置 */
  );
}

位置を変えることで、グラデーションの雰囲気が大きく変わります。

CSS

/* 左側に青を多く配置 */
.gradient-box {
  background: linear-gradient(
    to right,
    #667eea 0%,
    #764ba2 80%,
    /* 80%の位置まで紫を引っ張る */ #f093fb 100%
  );
}

この技法を使えば、より洗練されたグラデーション表現が可能になります。

よくあるつまずきポイントと解決法

初心者の方が陥りがちな問題と、その解決方法を紹介します。

ベンダープレフィックスは必要？

2026 年現在、ベンダープレフィックスは基本的に不要です。

以前は以下のように書く必要がありました。

CSS

/* 古い書き方（現在は不要） */
background: -webkit-linear-gradient(to right, #667eea, #764ba2);
background: -moz-linear-gradient(to right, #667eea, #764ba2);
background: linear-gradient(to right, #667eea, #764ba2);

現在は最後の 1 行だけで、すべてのモダンブラウザで動作します。

ブラウザ対応状況（2026 年版）

linear-gradient は、以下のブラウザで完全にサポートされています。

Chrome 26 以降
Firefox 16 以降
Safari 6.1 以降
Edge（全バージョン）

つまり、現在使われているほぼすべてのブラウザで問題なく動作します。

Internet Explorer については、IE10 以降で対応していますが、2026 年現在 IE のシェアはほぼゼロなので、考慮する必要はありません。

グラデーションが表示されない時のチェックリスト

もしグラデーションが表示されない場合は、以下をチェックしてください。

1. 構文ミスがないか確認

CSS

/* NG: カンマの位置が間違っている */
background: linear-gradient(to right #667eea, #764ba2);
 
/* OK */
background: linear-gradient(to right, #667eea, #764ba2);

2. 要素に高さが指定されているか

CSS

/* グラデーションを表示する要素に高さが必要 */
.gradient-box {
  background: linear-gradient(to right, #667eea, #764ba2);
  height: 200px; /* これがないと表示されない場合がある */
}

3. 他の background プロパティで上書きされていないか

CSS

/* NG: 後から書いたbackgroundで上書きされてしまう */
.gradient-box {
  background: linear-gradient(to right, #667eea, #764ba2);
  background: #ffffff; /* これで上書きされてしまう */
}

4. 開発者ツールで確認 ブラウザの開発者ツール（F12）を開き、該当要素の background プロパティが正しく適用されているか確認しましょう。

もっと効率的にグラデーションを作るには？

ここまで、CSS グラデーションの基本をお伝えしてきました。構文を理解すれば、誰でもグラデーションを実装できます。

しかし、実際の制作現場では以下のような課題があります。

色の組み合わせに悩む
角度を何度も調整して試行錯誤
コードを書いて、ブラウザで確認、また修正...の繰り返し

この手間を大幅に削減できるのが、グラデーションジェネレーターツールです。

playcraft の CSS グラデーションジェネレーターなら、視覚的に色や角度を調整でき、リアルタイムでプレビューを確認しながら作業できます。完成したらワンクリックで CSS コードをコピーできるため、制作時間を大幅に短縮できます。

CSSグラデーションジェネレーター

最大5色対応！カンタン操作で誰でもCSSグラデーションを作成できます。linear gradient, radial gradient対応。コードをワンクリックでコピー。

次回の記事では、実際にコピペで使えるグラデーションサンプル集を公開予定です。すぐに使えるおしゃれな配色パターンを多数紹介しますので、ぜひご期待ください！

まとめ

この記事では、CSS グラデーションの基本について解説しました。

グラデーションには 3 種類ある（linear/radial/conic）
最も使われるのは linear-gradient
方向指定は「キーワード」と「角度」の 2 通り
3 色以上のグラデーションも簡単に作れる
2026 年現在、ほぼすべてのブラウザで動作する

グラデーションをマスターすれば、Web デザインの表現の幅が大きく広がります。

まずは基本的な 2 色グラデーションから試してみて、徐々に複雑な表現にチャレンジしてみてください。そして、効率を重視する場合は、ぜひ playcraft のグラデーションジェネレーターも活用してみてくださいね。

【2026年版】CSSグラデーションのコピペサンプル12選｜おしゃれな配色パターン集

すぐ使えるCSSグラデーション12パターンを厳選!ビジネス向け・ポップ・モダンなど用途別に紹介。コピペするだけでプロ級デザインが完成します。

CSSグラデーションジェネレーター5選比較｜時短で美しい配色を作る方法

手書きより10倍速い!CSSグラデーションジェネレーターを徹底比較。無料で使える人気ツール5選の特徴と使い方を初心者向けに解説します。

最後まで読んでいただき、ありがとうございました。