グラデーションとは
読み：ぐらでーしょん英語：Gradient
更新日：2026年10月31日
ひとことで
グラデーションとは、ある色から別の色へ、色や明るさが少しずつ、なめらかに移り変わっていく表現のことです。
ひとに説明するなら
「グラデーションは、色の移り変わり。夕焼けの空みたいに、ひとつの色が少しずつ別の色に変わっていく。デジタルでは、2つの色の間の色を計算で埋めてつくるから、その計算のしかたで、途中の色の美しさが変わる」
自然の中のグラデーション
夕焼けの空、海の浅瀬から沖への色の変化、紅葉していく山の斜面。自然の中には、色が少しずつ移り変わる風景がたくさんあります。グラデーションは、その移り変わりを表す表現です。
デザインでは、背景に奥行きを出したり、ボタンに立体感を出したり、写真の上に文字を乗せるための影をつくったりするのに使われます。
途中の色は、計算で決まる
デジタルのグラデーションは、始まりの色と終わりの色を決め、その間の色を計算で埋めてつくります。この「どう計算するか」によって、途中の色がまったく違ってきます。
いつもの RGB（sRGB）のまま計算すると、たとえば青とオレンジのような離れた色どうしでは、真ん中あたりが灰色っぽくくすみがちです。人の見え方に近い OKLCH で計算すると、途中の色も鮮やかさを保ちやすくなります。
CSS でのグラデーション
CSS では、まっすぐ移り変わる linear-gradient、中心から広がる radial-gradient、中心のまわりを回る conic-gradient でグラデーションをつくれます。対応しているブラウザでは、「in oklch」と書き足すと、OKLCH で計算したグラデーションになります。
途中に色を足すと、移り変わり方を細かく調整できます。
.sky {
/* いつもの計算（sRGB） */
background: linear-gradient(to right, #1F6FEB, #F5A623);
}
.sky-oklch {
/* OKLCH で計算（対応ブラウザ） */
background: linear-gradient(in oklch to right, #1F6FEB, #F5A623);
}
縞が出てしまうとき
ごくゆるやかなグラデーションでは、色の段差が縞のように見えることがあります。これをバンディングといいます。色を表す段階の数が足りないときに起きやすい現象です。
ごく細かいノイズ（粒）を重ねると、段差が目立ちにくくなります。映像では、記録のビット数が多い設定で撮ることも対策になります。
よくある勘違い
勘違い2色を決めれば、グラデーションの見え方は同じ
ほんとうは間の色をどう計算するかで、途中の色が大きく変わります。
勘違いグラデーションの途中が濁るのは、色の選び方が悪いから
ほんとうは計算のしかたが原因のことも多くあります。OKLCH で計算すると、濁りにくくなります。
COLOR JOURNEY で使うには
COLOR JOURNEY の各パレットのページにある「グラデーション」で、6色・3色・1色から選び、向きを決めるだけでグラデーションをつくれます。CSS のコピーと、PNG 画像（1920×1080、1080×1350）の保存ができます。
色と色のあいだは OKLab という方法でつないでいるので、途中が濁りにくく、なめらかに移り変わります。画像はお使いのブラウザの中でつくられ、どこにも送られません。
参考になるパレット
クイズ
青とオレンジを sRGB でつないだグラデーションで起きやすいことは？
真ん中がくすむ
正解です。答えは「真ん中がくすむ」。sRGB のまま計算すると、離れた色どうしの間は灰色っぽくなりがちです。
真ん中が光る
ちがいます。答えは「真ん中がくすむ」。sRGB のまま計算すると、離れた色どうしの間は灰色っぽくなりがちです。
色が反転する
ちがいます。答えは「真ん中がくすむ」。sRGB のまま計算すると、離れた色どうしの間は灰色っぽくなりがちです。
ゆるやかなグラデーションに縞が見える現象を何という？
バンディング
正解です。答えは「バンディング」。色の段階が足りないときに起きる、バンディングです。
ハレーション
ちがいます。答えは「バンディング」。色の段階が足りないときに起きる、バンディングです。
キャリブレーション
ちがいます。答えは「バンディング」。色の段階が足りないときに起きる、バンディングです。
よくある質問
グラデーションとは何ですか？
ある色から別の色へ、色や明るさが少しずつなめらかに移り変わっていく表現です。
グラデーションの途中がくすむのはなぜですか？
sRGB のまま間の色を計算すると、離れた色どうしの間が灰色っぽくなりやすいためです。OKLCH で計算すると、くすみにくくなります。
CSS でグラデーションをつくるには？
linear-gradient、radial-gradient、conic-gradient を使います。対応ブラウザでは「in oklch」で計算方法を指定できます。
グラデーションの縞を消すには？
ごく細かいノイズを重ねると、段差が目立ちにくくなります。