初心者必見！webで使えるグラデーションの基本と応用テクニック

2025 12/01

2025/12/01

はじめに

調査の目的

この資料は「web グラデーション」について分かりやすくまとめた入門から実践までのガイドです。CSSでの基本的な書き方から、応用的な使い方、実務で即使えるサンプルまでを一冊で扱います。デザインの幅を広げたい方に向けて作成しました。

本資料で学べること

線状（linear）グラデーションの書き方と色指定のコツ
繰り返しパターンや角度の指定方法
テキストや画像、枠線への適用法
背景全体や小さなUIパーツでの活用例
アニメーションや透過を使った表現のポイント

対象読者

初心者から中級者のフロントエンド開発者、デザイナー、コーダーを想定しています。HTMLとCSSの基本が分かれば読み進められます。

読み方のヒント

各章は理論と実例をセットで示します。コードはそのまま試せる形で載せますので、ブラウザでコピー＆ペーストして挙動を確認してください。色の調整や角度の変化で表現が大きく変わるため、少しずつ数値を変えて試すことをおすすめします。

次章では、CSSグラデーションの基本から6つの応用パターンまで、具体的なコード例を交えて解説します。

CSSグラデーションの基本から応用6パターンまで

はじめに

CSSでは背景にグラデーションを設定する際、background-image: linear-gradient(…) を使います。角度や色の指定を工夫するだけで、ボタンやカード、背景の雰囲気を一気に変えられます。

基本構文（簡単な例）

background-image: linear-gradient(90deg, #ff7a18, #af002d);

上の例は左から右へ色が変わる2色のグラデーションです。角度はdegか to right のようなキーワードで指定できます。

応用パターン6つ

1) シンプル2色

background-image: linear-gradient(to right, #00c6ff, #0072ff);

ボタンやヘッダーに使いやすいシンプルな横グラデーションです。

2) 斜めのグラデーション

background-image: linear-gradient(135deg, #f6d365, #fda085);

カードやカード境界のアクセントに合います。

3) 色の切り替え（色停止）

background-image: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 50%, #fad0c4 100%);

中央で色がはっきり切り替わるデザインにします。

4) 繰り返しストライプ

background-image: repeating-linear-gradient(45deg, #eee 0 10px, #ccc 10px 20px);

ナビやボーダーにストライプを作るとき便利です。

5) 放射状（radial）

background-image: radial-gradient(circle at center, #fff9c4, #ffd54f);

丸い光のようなハイライトを作れます。アイコン背景に合います。

6) 円錐（conic）

background-image: conic-gradient(#ff6b6b 0 25%, #ffd93d 25% 50%, #6bffb3 50% 100%);

プログレスや分割されたビジュアルに使えます。

実用のコツ

透明度（rgbaや透過）を使うと画像と重ねやすくなります。
古いブラウザを想定する場合は単色のbackgroundを最初に指定してください。
背景画像と重ねるときは background-image: linear-gradient(…), url(…); の順で記述します。

以上が基本と6つの応用例です。実際に試して、色や角度を微調整すると効果が分かりやすくなります。

実務で使えるCSSグラデーションサンプル

テキストにグラデーションを乗せる

テキストにグラデーションを適用するには、背景にグラデーションを置き、文字色を透明にします。重要なのは背景を文字に切り抜くbackground-clipです。

.gradient-text{
  background: linear-gradient(90deg,#ff7a18,#af002d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

画像に半透明グラデーションを重ねる

画像の上にグラデーションを重ねると視認性が上がります。疑似要素を使い、rgba()で透明度を調整します。

.card{position:relative}
.card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.6));
  pointer-events:none;
}

複数背景の重なり順

複数背景は後に書いたものが前面に来ます。上から重ねたい順に右から左へ記述します。

.box{background: url(img.jpg), linear-gradient(#fff,#eee);}

枠線や背景全体に使う

枠線はborder-imageで、背景全体は背景にグラデを設定します。

.btn{border:4px solid transparent;border-image:linear-gradient(45deg,#f06,#4a90e2) 1}

アニメーションで動かす

背景を大きくして背景位置を動かすと流れる効果が作れます。

.shine{background:linear-gradient(90deg,#ff0,#f06,#ff0);background-size:200% 100%;animation:move 6s linear infinite}
@keyframes move{from{background-position:0 0}to{background-position:-100% 0}}