CSSグラデーションまとめ｜基本から応用6パターンを初心者向けに解説

CSSグラデーションを使うと、画像を準備せずにCSSコードだけで色をなめらかに変化させたデザインを作れます。

本記事では、線形・円形・円錐といった基本的なグラデーションのほか、実務で使える応用もサンプルコード付きで紹介します。

最後まで読むと、CSSグラデーションを迷わずに書けるようになるでしょう。

CSSグラデーションとは

CSSグラデーションは、複数の色が滑らかに移り変わる色彩表現です。画像を使わずにCSSでグラデーションを表現することで、表示速度が向上します。

CSSで実装できるグラデーションは以下の3つです。

各グラデーションには繰り返しパターンがあり、組み合わせ次第で表現の幅が広がります。

CSSでグラデーションを実装するには、background-imageプロパティを使用します。背景に関する指定をまとめて記述できるbackgroundプロパティも対応可能です。

単体で指定するならbackground-image、他の背景色などとあわせて指定するならbackgroundを使うと覚えておくとよいでしょう。

CSSグラデーションの書き方

CSSグラデーションの基本の書き方は3つです。

• 線形グラデーション（linear-gradient）
• 円形グラデーション（radial-gradient）
• 円錐グラデーション（conic-gradient）

それぞれ順番に紹介します。

また、ここから先の章で紹介するサンプルCSSは、以下のHTMLを使用しています。

コピー<div class="box"></div>

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

線形グラデーションは、よく使われる基本の形です。

指定した色を直線的に変化させるlinear-gradientを使用し、シンプルに色を2つ並べるだけで、上から下へのグラデーションが作れます。

グラデーションの方向を左から右へと変える、横方向の例を見てみましょう。

コピー.box {
width: 300px;
height: 150px;
background-image: linear-gradient(to right, red, yellow);
/* linear-gradient(開始色, 終了色) */
}

linear-gradient(to right, red, yellow)のように指定すると、右に向かって、赤から黄色へと色が変化します。

方向を指定する場合は、意図通りに表示されない場合もあるため「to」を付けて書くようにしましょう。

方向の指定がない場合は、上から下への色が変化します。

また、角度をdegという単位を使っても方向調整が可能です。0degが「下から上へ」となり、そこから時計回りに角度が増えていきます。

基本的な使い方と角度の考え方を以下の表にまとめました。

角度にマイナスの値を指定すると、反時計回りに角度が計算されます。

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

円形グラデーションは、中心から外側に向かって円状に色が広がるグラデーションです。

radial-gradient関数を使用し、2つ以上の色を指定するだけで、中央からフワッと色が広がるような表現ができます。

以下の例を見てみましょう。

コピー.box {
width: 300px;
height: 150px;
background-image: radial-gradient(#a1c4fd, #c2e9fb);
}

radial-gradient()のカッコの中は、中心から外側へ向かう色の変化を指定します。

例では、中心の色が #a1c4fd で、そこから外側に向かって #c2e9fbに変化しているのがわかります。

色の配分を細かく調整する場合は、グラデーションの中心位置やサイズ、形状を指定してください。

基本的な書き方は以下の通りです。

指定できる要素を以下にまとめました。

円錐グラデーション（conic-gradient）

円錐グラデーションは、中心から放射状に色が変化するグラデーションです。

円の中心を軸に時計回りに色が変化するため、円グラフや装飾背景のデザインに適しています。

円錐グラデーションのconic-gradient関数を使用した円グラフを見てみましょう。

コピー.box {
width: 300px;
height: 300px;
border-radius: 50%;
background: conic-gradient(
#e1f6fd 0deg 120deg,
#e0fee0 120deg 240deg,
#e8ffd1 240deg 360deg
);
}

上記のコードでは0deg〜120degに水色（#e1f6fd）、120deg〜240deg に緑（#e0fee0）、240deg〜360deg に黄緑（#e8ffd1）が円の上から時計回りで配置されます。

色の変化が始まる位置を「from」を使って変えることも可能です。

たとえば、右から始めたい場合は conic-gradient(from 90deg, 色1, 色2) のように角度を指定します。

主な指定要素を以下の表にまとめました。

繰り返しグラデーションの書き方

繰り返しグラデーションは、一つの色の組み合わせを何度も反復させて模様を作ります。

ストライプ、同心円、扇形など、さまざまなパターンの表現が手軽にできます。

使い方は、通常のグラデーション記述の前に「repeating」という言葉を追加するだけです。

下の表では、繰り返しグラデーションの種類と特徴をまとめました。

種類	模様	特徴	ポイント
repeating-linear-gradient（線形）		縦や横方向のストライプ模様が作れる	角度を指定
repeating-radial-gradient（円形）		波紋や的のような同心円模様が作れる	形をcircleに指定
repeating-conic-gradient（円錐）		扇形が交互に繰り返され、円グラフのような模様が作れる	色の範囲を角度で指定

繰り返しグラデーションを使用するときのポイントは、以下の3つです。

• どこまでが1つのパターンかをpxや%で明確に決める
• 前の色の終わり位置と次の色の始まり位置を同じにすると、境界がはっきり出る
• linear → ストライプ、radial → 同心円、conic → 扇形模様と覚える

縦方向のストライプ模様の例を見てみましょう。

コピー.box {
width: 300px;
height: 150px;
border: solid 1px #66b2ff;
background-image: repeating-linear-gradient(
90deg,
#66b2ff 0,
#66b2ff 20px,
#ffffff 20px,
#ffffff 40px
);
}

このコードは、0px〜40pxまでを1つのパターンとして繰り返しています。

90degは、グラデーションの角度を90度、つまり横方向に指定しています。

#66b2ff 0, #66b2ff 20pxという記述は0pxから20pxまでを青色に、#ffffff 20px, #ffffff 40pxは、20pxから40pxまでを白色にするという意味です。

色の境界をくっきりさせたい場合は、前の色の終了位置と次の色の開始位置を同じ値にします。今回の例では、20pxを青の終わりと白の始まりに設定しています。

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

ここでは、実務で使えるCSSグラデーションのデザイン例を紹介します。

• テキスト（文字）をグラデーションにする
• 画像にグラデーションをかける
• 枠線をグラデーションにする
• 背景全体にグラデーションを敷く
• グラデーションをアニメーションにする
• 透過グラデーションを作る

興味があるものからチェックしてみてください。

テキスト（文字）をグラデーションにする

テキストをグラデーションにするには、背景に設定したグラデーションを文字の形で切り抜くと実装できます。

テキストグラデーションは、見出しやキャッチコピーに使用すると、デザインのアクセントになります。

以下の例を見てみましょう。

コピー<h2 class="gradient-text">テキストグラデーション</h2>

コピー.gradient-text {
display: inline-block;
font-size: 28px;
font-weight: bold;
background-image: linear-gradient(90deg, #82f369 0%, #91cfff 40%, #ffaacc 100%);
background-clip: text;
-webkit-background-clip: text; /* Safariなど一部ブラウザ対応 */
color: transparent;
}

例では、background-imageで「緑→水色→ピンク」へと変化する3色のグラデーションを作りました。「色名〇%」という形で、色の変化がどの位置で起こるかを細かく制御しています。

background-clip: text;では背景を文字の形で切り抜き、color: transparent;で文字の色を透明にしてグラデーションが見えるようにするのがポイントです。

また、font-weight: bold;で文字を太くすると、グラデーションの色の移り変わりがよりはっきりと見えるようになります。

画像にグラデーションをかける

画像の上にグラデーションを重ねる方法は、backgroundプロパティにグラデーションと画像をカンマで区切って両方指定することで実装可能です。

画像の雰囲気をシックにしたり、画像の上のテキストを読みやすくしたりする効果があります。

以下の例を見てみましょう。

コピー<div class="hero-image">
<div class="hero-text">
<h2>グラデーションあり</h2>
</div>
</div>

コピー.hero-image {
width: 500px;
height: 320px;
border-radius: 12px;
background: linear-gradient(to top, rgba(60, 45, 40, 0.8), rgba(60, 45, 40, 0)), url('/img/donut.jpg') no-repeat center / cover;

/* テキストの調整 */
display: flex;
justify-content: center;
align-items: flex-end;
padding: 24px;
}

.hero-text {
color: #fff;
text-align: center;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}

backgroundプロパティ内で、グラデーションと画像をカンマで区切り、2つを重ねて表示しています。CSSでは先に指定したスタイルが前面に表示されるため、半透明のlinear-gradientが、あとから指定した画像の上に配置されます。

ポイントは、グラデーションの色にrgba()を使うことです。rgba(60, 45, 40, 0.8)のように透明度である最後の数値を調整することで、下のドーナツの画像を自然に透かしつつ、上に乗せた白い文字をくっきりと表示できます。

枠線をグラデーションにする

枠線をグラデーションにすると、要素をさりげなく引き立て、デザインにモダンな印象を与えられます。

以下の例を見てみましょう。

コピー<div class="gradient-border-box">枠線</div>

コピー.gradient-border-box {
width: 280px;
text-align: center;
padding: 24px;
font-size: 20px;
font-weight: bold;
border: 4px solid transparent;
border-image-source: linear-gradient(to right, #82f369, #91cfff);
border-image-slice: 1;
}

上記の枠線グラデーションのポイントは以下の3つです。

• borderで枠線の領域を作る
• border-image-sourceでグラデーションを指定する
• border-image-sliceでグラデーションを枠線全体に適用する

borderで線のサイズや種類を設定し、色はtransparentで透明にしておきます。あとから指定するborder-image-sourceのグラデーションが正しく表示されるよう準備します。

次に、border-image-sourceでグラデーションを設定し、border-image-slice: 1;と書くことで、指定したグラデーションが枠線全体に美しく適用されます。

背景全体にグラデーションを敷く

bodyタグにbackground-imageでグラデーションを指定すると、Webページ全体の背景にグラデーションが適用されます。

画面の高さに合わせてグラデーションが広がるように、いくつか追加でプロパティを指定するのがポイントです。

以下の例を見てみましょう。

コピーbody {
min-height: 100vh;
background-image: linear-gradient(135deg, #5fc3e4, #e55d87);
background-attachment: fixed;
background-repeat: no-repeat;
}

上記のコードは、min-height: 100vh;でページのコンテンツが少なくても、背景が画面の高さ全体に広がるように指定しています。

また、スクロールしても背景が動かないようにbackground-attachment: fixed;で固定し、背景が繰り返されてデザインが崩れないようにbackground-repeat: no-repeat;を記述しましょう。

グラデーションをアニメーションにする

グラデーションのアニメーションは@keyframesを使うと、グラデーションの表示位置を動かすことで実装できます。

例を見てみましょう。

コピー<div class="box"></div>

コピー.box {
width: 300px;
height: 150px;
background-image: linear-gradient(
90deg,
#ff7e5f, /* オレンジ */
#feb47b, /* 明るいオレンジ */
#86a8e7, /* 青 */
#91eae4 /* 明るい青 */
);

background-size: 400% auto;
animation: gradient-animation 10s infinite linear;
}

@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

グラデーションをアニメーションにするポイントは、以下の4つです。

• background-imageでグラデーションを指定する
• background-sizeでグラデーションを巨大化させる
• @keyframesで背景を動かすアニメーションを定義する
• animationで要素にアニメーションを適用する

まず、background-imageで通常通りグラデーションを作ります。

次に色が動いているように見せるために、background-sizeを400%のように要素より大きく引き伸ばします。

アニメーションは、@keyframesで背景の位置 (background-position) を動かすように指定しましょう。

最後に、animationでそのアニメーションを要素に適用し、秒数や繰り返しなどを設定すれば、グラデーションが滑らかに動くようになります。

透過グラデーションを作る

透過グラデーションは、色指定にrgba()という書き方を使うと実装できます。

背景画像の上に重ねて文字の可読性を上げたり、デザインに奥行き感を出したりするときに便利です。

では実際に、背景画像に下から上に向かって白く透明になるグラデーションをかけてみましょう。

コピー<div class="transparent-gradient-box">
<p>透過グラデーション</p>
</div>

コピー.transparent-gradient-box {
width: 400px;
height: 250px;

/* テキストを読みやすくする */
display: flex;
align-items: flex-end;
justify-content: center;
padding: 20px;
color: #3A4B3A;
font-size: 24px;
font-weight: bold;

/* 背景画像の上に、白の半透明グラデーションを重ねる */
background: linear-gradient(to top, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 50%), url('/img/forest.jpg') center / cover no-repeat;
}

透過グラデーションのポイントは、linear-gradientの中でrgba()の透明度に差をつけることです。

今回の例では、to topでグラデーションの方向を「下から上へ」と指定しています。

開始色（下側）には、rgba(255, 255, 255, 0.8)で白を80%不透明にし、終了色（上側）にはrgba(255, 255, 255, 0)を指定することで、完全な透明にしています。

この透明度の差によって、要素の下側には白いベールがかかり、上に配置した濃い色の文字が、はっきりと読めるようになります。

CSSグラデーションジェネレーターおすすめ3選

グラデーションの書き方を解説してきましたが、CSSグラデーションジェネレーターを使用すると、グラデーションのコードを自動で生成してくれます。

ここでは、おすすめを3つ紹介します。

これらのツールを使うと、作業効率がアップします。ぜひブックマークして、Web制作に役立ててください。

まとめ

CSSグラデーションを使えば、コードだけでカラフルでおしゃれなデザインを実装できます。

線形・円形・円錐グラデーションに加え、繰り返し模様や透過、アニメーションといった応用まで身につけると、コーディングの幅が一気に広がります。まずは気に入ったサンプルを試してみてください。

もっとコーディングスキルを磨きたい方は、デイトラWeb制作コースがおすすめです。デイトラは未経験から実務で通用するスキルを身につけられ、プロとして活躍する卒業生を多数輩出しています。

Web制作を仕事にするならデイトラWeb制作コースがおすすめ！

東京フリーランスは、1日1題のステップでWebスキルを身につけられる”デイトラ”を運営しています。

デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。

HTML/CSSやjavaScriptを始めとした言語の基本からデザインカンプをもとにしたコーディング、WordPressのオリジナルテーマ作成まで、学習カリキュラムはなんと100日分！Web制作を網羅的に学べます。

また、中級・上級の最終課題はメンターによる課題レビューつき！品質を現場目線でチェックしてもらえるため、「自分は今どのくらいのスキルがあるのか」が客観的にわかります。
Discordによる公式サポートの質問部屋も用意。実務を経験しているメンター陣があなたの疑問に回答してくれます。

3/24　#デイトラ　#Web制作コース　備忘録

⌛️学習時間：4H
✅中級編 Day13-1まで

「余裕ある人向け課題」でつまずいたのでメンターさんに質問させていただいた。分からないところをまずは自分で考えるけど、聞ける人がいる環境に感謝🙏明日もがんばろー🙌

— Gillian | Web制作してます (@Gillian6to2) March 24, 2025

<ひがちゃんエンジニア100日計画＞
（89日目）#デイトラ #Web制作

WPテーマの初期設定＋テンプレートファイル作成

6h

今日は、メンターに初めて質問できた。時間かかったし、緊張したけど、つまずきがすく解決した！質問できるようになったのは、非常にデカい！活かしていきたい🐫

— ひがちゃん＠Webコーダー (@hjga_webconsul) April 7, 2025

Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！