- CSS
CSSグラデーションの書き方｜linear-gradientコピペ集と配色一覧
CSSグラデーションとは、background: linear-gradient(to right, #ff0080, #00c8ff); のように、方向と色を並べるだけで色のなめらかな変化を描く機能です。 画像ファイルを用意せずに、背景・文字・枠線・ボタンへ色の移り変わりをつけられます。
この記事では、linear-gradient・radial-gradient・conic-gradient と繰り返し版の構文を整理したうえで、in oklch を付けると中間の色がくすまないことを、スクリーンショットのピクセル色を計測して数値で示します。文字グラデーション・枠線・ストライプ・ボタン・背景アニメのコピペ用コードと配色プリセット12種も、すべて Chromium 141（Playwright 1.56）で描画して色を確認しました。
CSSグラデーションの早見表
| やりたいこと | 書き方 |
|---|---|
| 上から下へ | linear-gradient(#ff0080, #00c8ff) |
| 左から右へ | linear-gradient(to right, #ff0080, #00c8ff)（90deg と同じ） |
| 斜めに | linear-gradient(135deg, #ff0080, #00c8ff) |
| 3色以上 | linear-gradient(to right, #ff0080, #ff8a00, #00c8ff) |
| 色が変わる位置を決める | linear-gradient(to right, #ff0080 20%, #00c8ff 80%) |
| くっきり2色に分ける（ハードストップ） | linear-gradient(to right, #ff0080 50%, #00c8ff 50%) |
| 中間色を鮮やかに保つ | linear-gradient(in oklch to right, #ff0080, #00c8ff) |
| 透明へ消えていく | linear-gradient(to bottom, #000, transparent) |
| 円形に広げる | radial-gradient(circle, #ff0080, #00c8ff) |
| 円グラフ・色相環 | conic-gradient(#ff0080, #00c8ff) |
| ストライプ | repeating-linear-gradient(45deg, #333 0 10px, #fff 10px 20px) |
| 文字をグラデーションにする | background: ...; background-clip: text; color: transparent; |
| 写真の上に重ねて文字を読みやすく | background: linear-gradient(rgb(0 0 0 / 0.6), transparent), url(photo.jpg); |
| 関数 | 形 | 最初の引数 | 対応（Chrome / Firefox / Safari） |
|---|---|---|---|
linear-gradient() |
直線 | 方向（to right、45deg） |
26 / 16 / 7 |
radial-gradient() |
円・楕円 | 形・大きさ・中心（circle at center） |
26 / 16 / 7 |
conic-gradient() |
中心のまわりを回る | 開始角と中心（from 90deg at center） |
69 / 83 / 12.1 |
repeating- つき3種 |
上の3つの繰り返し | 同じ | 元の関数と同じ |
in oklch などの色空間指定 |
どの関数にも付けられる | 先頭に in 色空間 |
111 / 127 / 16.2 |
対応バージョンは MDN の browser-compat-data 8.1.4（2026-10-01 版）で確認しました。現行のブラウザでは -webkit- などの接頭辞なしで書けます。
本記事の内容は、ご自由にお使いください。
ご利用の際は、出典として本ページへのリンクを記載いただけますようお願いします。
（記載例）出典：株式会社RJC「CSSグラデーションの書き方｜linear-gradientコピペ集と配色一覧」
linear-gradientの書き方：方向・色・位置
構文は「方向、色、色、…」です。方向は省略でき、色は2つ以上並べます。
linear-gradient( [in 色空間] [方向], 色 [位置], 色 [位置], ... )
方向 …… to right / to bottom left などのキーワード、または 45deg などの角度
色 …… #ff0080 / rgb() / oklch() / 色の名前 など
位置 …… 20% や 100px。その色がちょうど100%になる地点
グラデーションは色ではなく「画像」の一種なので、background（background-image）に指定します。color や background-color には書けません。
角度と方向キーワード（実測）
200px 四方の箱に red から blue へのグラデーションを描き、上・右・下・左の端の色を調べました。
## 角度（200x200）: 上端中央 / 右端中央 / 下端中央 / 左端中央 の色 (red→blue)
0deg #0200fd #80007f #fd0002 #80007f
90deg #7f0080 #0200fd #7f0080 #fd0002
180deg #fd0002 #7f0080 #0200fd #7f0080
270deg #80007f #fd0002 #80007f #0200fd
to right #7f0080 #0200fd #7f0080 #fd0002
to bottom #fd0002 #7f0080 #0200fd #7f0080
(省略) #fd0002 #7f0080 #0200fd #7f0080
0.25turn #7f0080 #0200fd #7f0080 #fd0002
| 角度 | 進む向き | 同じ意味のキーワード |
|---|---|---|
0deg |
下から上へ | to top |
90deg |
左から右へ | to right |
180deg |
上から下へ（省略時と同じ） | to bottom |
270deg |
右から左へ | to left |
45deg |
左下から右上へ | 正方形のときだけ to top right と同じ |
135deg |
左上から右下へ | 正方形のときだけ to bottom right と同じ |
角度は「0deg が上向き、時計回りに増える」と覚えると迷いません。 省略すると 180deg（上から下）です。単位は deg のほか turn（1回転＝1turn）も使え、0.25turn は 90deg と同じ結果でした。
45degとto top rightは横長の箱で結果が変わる
## 45deg と to top right の違い（400x100）: 左上(2,2) / 右上(397,2) / 左下(2,97) / 右下(397,97)
45deg #cc0033 #0300fd #fd0003 #3300cc
to top right #81007d #0400fb #fb0004 #7d0082
横 400px・縦 100px の箱では、to top right のとき左上と右下がどちらも中間色（紫）になりました。to top right は「角から角へ」進み、中間色の帯がもう一方の対角線に重なるように角度が自動で調整されます。45deg は箱の形に関係なく常に 45 度です。カードのように縦横比が変わる要素で、角から角へきれいに流したいときはキーワードが便利です。
色の位置（カラーストップ）と中間点
色の後ろに位置を書くと、変化が始まる場所と終わる場所を決められます。幅 600px で計測しました。
通常 red, blue → 0:#fe0000 150:#bf0040 300:#7f007f 450:#3f00bf 599:#0100ff
red 100px, blue 500px → 0:#ff0000 99:#ff0000 100:#fe0000 300:#7f007f 500:#0000ff 599:#0000ff
中間点ヒント red, 20%, blue → 0:#fe0001 120:#7f007f 300:#4100bd 599:#0000ff
| 書き方 | 意味 | 計測結果 |
|---|---|---|
red, blue |
0% から 100% へ均等に変化 | 300px 地点がちょうど中間の #7f007f |
red 100px, blue 500px |
100px までは赤一色、500px 以降は青一色 | 0〜99px は #ff0000、500px 以降は #0000ff |
red, 20%, blue |
色の間に位置だけを書くと「中間色になる地点」を移動できる | 中間色 #7f007f が 300px から 120px（20%）へ移動 |
red 0 30%, blue 70% 100% |
位置を2つ書くと「ここからここまでその色」 | 2点指定。Chrome 71、Firefox 64、Safari 12.1 以降 |
位置は % と px を混ぜて書けます。位置を省いた色は、前後の色の間に均等に配置されます。
ハードストップでくっきり塗り分ける
2つの色に同じ位置を指定すると、ぼかしのない境界になります。
## ハードストップ（red 50%, blue 50%）x=298..301
298:#ff0000 299:#ff0000 300:#0000ff 301:#0000ff
2点指定 red 0 50%, blue 50% 100% → 298:#ff0000 299:#ff0000 300:#0000ff 301:#0000ff
299px までが赤、300px からが青で、中間の色は1ピクセルもありません。 この性質を使うと、2色の背景・ストライプ・進捗バー・マーカー風の下線などを画像なしで作れます。
/* 左30%だけ色をつける進捗バー */
.progress { background: linear-gradient(to right, #2563eb 30%, #e5e7eb 30%); height: 8px; }
/* 3色の旗のような塗り分け（2点指定） */
.tricolor { background: linear-gradient(to right, #2563eb 0 33.3%, #fff 33.3% 66.6%, #e11d48 66.6% 100%); }
transparentへ消えるグラデーション
## transparent との補間（白背景, 50%地点）
linear-gradient(to right, red, transparent) #ff8080
linear-gradient(to right, red, rgb(255 0 0 / 0)) #ff8080
linear-gradient(to right, red, rgb(0 0 0 / 0)) #ff8080
白い背景の上で red から transparent へ変化させると、中間は #ff8080（赤が半分透けた色）でした。transparent は「透明な黒」ですが、現行ブラウザでは黒ずまずに、色を保ったまま透明度だけが変わります。 写真の上に重ねる半透明の帯は、次のように書けます。
.hero {
background:
linear-gradient(to top, rgb(0 0 0 / 0.7), transparent 60%),
url("photo.jpg") center / cover;
}
background はカンマ区切りで複数重ねられ、先に書いたものが手前になります。
in oklchで中間色がくすまない（ピクセル色で比較）
グラデーションの途中の色は、2つの色を「どの色空間で混ぜるか」で変わります。関数の先頭に in oklch のように書くと、混ぜ方を選べます。
.srgb { background: linear-gradient(to right, blue, yellow); } /* これまでどおり */
.oklab { background: linear-gradient(in oklab to right, blue, yellow); }
.oklch { background: linear-gradient(in oklch to right, blue, yellow); }
幅 600px の帯を描いてスクリーンショットを撮り、25%・50%・75% 地点のピクセル色を読み取りました。かっこ内は、その色を OKLCH に変換した明るさ（L）と鮮やかさ（C）です。C が 0 に近いほどグレーに近い色です（結果は主な行の抜粋）。
-- blue → yellow
(指定なし) #4040bf (L0.46 C0.193) #7f7f7f (L0.60 C0.000) #bfbf3f (L0.78 C0.146)
in srgb #4040bf (L0.46 C0.193) #7f7f7f (L0.60 C0.000) #bfbf3f (L0.78 C0.146)
in oklab #1d76e7 (L0.58 C0.189) #6cabc7 (L0.71 C0.077) #b5d796 (L0.84 C0.094)
in oklch #008df7 (L0.64 C0.187) #00cfbc (L0.77 C0.136) #1cf168 (L0.84 C0.236)
in oklch longer hue #b700e9 (L0.58 C0.286) #ff3185 (L0.66 C0.241) #ff9800 (L0.77 C0.174)
in hsl #00c0ff (L0.76 C0.153) #00ff7e (L0.87 C0.236) #40ff00 (L0.87 C0.287)
-- red → lime
(指定なし) #bf4000 (L0.55 C0.173) #7f7f00 (L0.58 C0.126) #3fbf00 (L0.71 C0.226)
in oklab #ec7300 (L0.69 C0.177) #d0a800 (L0.75 C0.153) #a0d500 (L0.81 C0.204)
in oklch #ff5500 (L0.68 C0.217) #f89500 (L0.76 C0.170) #c1ce00 (L0.81 C0.183)
-- #ff0080 → #00c8ff
(指定なし) #bf329f (L0.57 C0.209) #7f64bf (L0.57 C0.138) #3f96df (L0.65 C0.137)
in oklab #e4649f (L0.68 C0.170) #c18dbf (L0.71 C0.092) #8facdf (L0.74 C0.081)
in oklch #df53dd (L0.68 C0.232) #ac81ff (L0.70 C0.181) #67a9ff (L0.73 C0.143)
-- white → blue
(指定なし) #bfbfff (L0.83 C0.089) #7f7fff (L0.66 C0.185) #3f3fff (L0.52 C0.271)
in oklab #b7d2ff (L0.86 C0.069) #73a2ff (L0.72 C0.145) #306cff (L0.58 C0.228)
in oklch #a5d8ff (L0.86 C0.076) #4fabff (L0.72 C0.151) #0073ff (L0.59 C0.226)
計測からわかること
| 組み合わせ | 指定なし（sRGB）の中間 | in oklch の中間 |
変化 |
|---|---|---|---|
| blue → yellow | #7f7f7f（C 0.000＝完全なグレー） |
#00cfbc（C 0.136、青緑） |
グレーの帯が消える |
| red → lime | #7f7f00（L 0.58、暗い黄土色） |
#f89500（L 0.76、明るいオレンジ） |
中間が明るく保たれる |
#ff0080 → #00c8ff |
#7f64bf（L 0.57 C 0.138） |
#ac81ff（L 0.70 C 0.181） |
明るさ・鮮やかさとも上がる |
| white → blue | #7f7fff（紫寄り） |
#4fabff（水色寄り） |
途中で紫に寄らない |
- 色空間を指定しないときは
in srgbと同じ結果でした（16進数や色名など、従来の書き方の色どうしの場合）。 - sRGB では、補色に近い2色の中間がグレーになる。 blue と yellow の中間は鮮やかさ 0 の
#7f7f7fでした。RGBの数値を単純に平均するためです。 in oklchは色相（色あい）を回しながら進むので、中間でも鮮やかさが残ります。そのかわり、blue → yellow で緑を通るように、間に別の色あいが現れます。in oklabは別の色あいを足さずに、明るさの落ち込みだけを和らげる。 中間は#6cabc7と控えめで、自然なつながりになります。
どの色空間を選ぶか
| 目的 | 選ぶもの |
|---|---|
| これまでのデザインと同じ見た目を保つ | 指定なし |
| 中間のくすみを消して、鮮やかにつなげたい | in oklch |
| 余計な色あいを足さず、なめらかにしたい | in oklab |
| 虹のように色相を一周させたい | in oklch longer hue |
| 白や黒、グレーを含むグラデーション | in oklab（色相を持たない色との補間が安定する） |
longer hue は色相環の遠回り側を通る指定で、ほかに shorter hue（既定）、increasing hue、decreasing hue があります。blue → yellow に longer hue を付けると、中間が #ff3185（ピンク）になり、紫・ピンク・オレンジを経由しました。
未対応ブラウザへの備え
色空間指定は Chrome 111、Firefox 127、Safari 16.2 以降です。未対応の環境では宣言ごと無視されるため、同じプロパティを2行書いておくと安全です。
.banner {
background: linear-gradient(to right, #00c9ff, #92fe9d); /* すべてのブラウザ向け */
background: linear-gradient(in oklch to right, #00c9ff, #92fe9d); /* 対応ブラウザはこちらで上書き */
}
存在しない色空間名を2行目に書いて確認したところ、計算値は1行目のまま残りました。
無効な2行目は無視され1行目が残る: linear-gradient(to right, rgb(0, 201, 255), rgb(146, 254, 157))
@supports (background: linear-gradient(in oklch, red, blue)) → true
radial-gradientの書き方：円形に広げる
radial-gradient( [形] [大きさ] [at 中心位置], 色 [位置], 色 [位置], ... )
形 …… circle（正円） / ellipse（楕円、既定）
大きさ …… closest-side / farthest-side / closest-corner / farthest-corner（既定） / 50px など
中心 …… at center（既定） / at top left / at 30% 40% など
横 300px・縦 200px の箱で、中心・右端中央・上端中央・右上の角の色を調べました。
radial-gradient(red, blue) #fe0001 #4c00b2 #4e00b2 #0300fc
radial-gradient(circle, red, blue) #fe0001 #2c00d2 #74008c #0300fc
radial-gradient(circle closest-side, red, blue) #fd0002 #0000ff #0400fb #0000ff
radial-gradient(circle at 0 0, red, blue) #7f0080 #2000de #95006b #2c00d3
radial-gradient(ellipse farthest-corner, red, blue) #fe0001 #4c00b2 #4e00b2 #0300fc
radial-gradient(circle 50px at center, red, blue) #fb0003 #0000ff #0000ff #0000ff
↑ 300x200 の箱: 中心(150,100) / 右端中央 / 上端中央 / 右上の角
| 書き方 | 結果 |
|---|---|
| 省略 | ellipse farthest-corner と同じ値。箱の縦横比に合わせた楕円で、右端と上端がほぼ同じ色（#4c00b2 と #4e00b2） |
circle |
正円。近い上端（#74008c）より遠い右端（#2c00d2）のほうが青に近い |
circle closest-side |
いちばん近い辺（上下）でちょうど終わる。上端で青になり、その外側は青一色 |
circle 50px |
半径 50px で終わる小さな円 |
at 0 0 |
中心を左上に移す。箱の中央がちょうど中間色（#7f0080）になった |
どの形でも、右上の角が終点の色（青）になる farthest-corner が既定です。スポットライトのように一部だけ明るくしたいときは、circle 200px at 30% 20% のように大きさと中心を明示します。
/* 左上から光が当たったような背景 */
.spot { background: radial-gradient(circle at 20% 20%, #ffffff, #c7d2fe 40%, #6366f1); }
conic-gradientの書き方：円グラフと色相環
conic-gradient は、中心のまわりを時計回りに色が変わります。
conic-gradient( [from 開始角] [at 中心位置], 色 [角度または%], 色 [角度または%], ... )
200px 四方の箱で、上・右・下・左（それぞれ少し時計回りにずらした点）の色を調べました。
conic-gradient(red, blue) #fd0003 #bd0042 #7e0082 #3e00c1
conic-gradient(from 90deg, red, blue) #3e00c2 #fd0003 #be0042 #7e0082
conic-gradient(red 0 25%, lime 25% 50%, blue 50% 75%, yellow 75%) #ff0000 #00ff00 #0000ff #ffff00
conic-gradient(from 45deg, red 0 25%, lime 25% 50%, blue 50% 75%, yellow 75%) #ffff00 #ff0000 #00ff00 #0000ff
repeating-conic-gradient(#333 0 25%, #fff 25% 50%) #333333 #ffffff #333333 #ffffff
- 始点は真上（12時の方向）で、時計回りに進む。 右（3時）で25%、下（6時）で50%の色になりました。
from 90degで始点を右へ回せる。- ハードストップと組み合わせると円グラフになる。 4色を25%ずつ指定すると、境界のぼけない4つの扇形になりました。
/* 円グラフ（40% / 35% / 25%） */
.pie {
width: 160px; aspect-ratio: 1; border-radius: 50%;
background: conic-gradient(#2563eb 0 40%, #f59e0b 40% 75%, #e5e7eb 75%);
}
/* ドーナツ型の進捗（70%） */
.donut {
width: 120px; aspect-ratio: 1; border-radius: 50%;
background:
radial-gradient(closest-side, #fff 75%, transparent 76%),
conic-gradient(#2563eb 70%, #e5e7eb 0);
}
/* 色相環 */
.wheel { width: 160px; aspect-ratio: 1; border-radius: 50%;
background: conic-gradient(in oklch longer hue, #ff0080, #ff0080); }
/* 市松模様 */
.checker { background: repeating-conic-gradient(#e5e7eb 0 25%, #fff 25% 50%) 0 0 / 24px 24px; }
.donut の #e5e7eb 0 は「前の色の終わりと同じ位置から」という意味の省略形です。この4つと、記事内の進捗バー・写真への重ね・スポットライト・模様の一覧にあるコードは、Chromium 141 で有効な値として受け付けられることを確認しています（個別のピクセル計測は行っていません）。
repeating-linear-gradientでストライプを作る
repeating- を付けると、最後の色の位置までを1単位として繰り返します。
.stripe-v { background: repeating-linear-gradient(90deg, #333 0 10px, #fff 10px 20px); }
.stripe-d { background: repeating-linear-gradient(45deg, #333 0 10px, #fff 10px 20px); }
横方向に色が切り替わる位置を1ピクセルずつ調べました。
90deg: 0:#333333 10:#ffffff 20:#333333 30:#ffffff 40:#333333 50:#ffffff 60:#333333
45deg: 0:#ffffff 7:#333333 21:#ffffff 35:#333333 49:#ffffff
- 90deg では指定どおり 10px ごとに切り替わりました。
- 45deg では横方向に約 14px ごと。 10px は「線に直角な方向の幅」なので、横に測ると 10 × 1.41 で約 14px になります。斜めストライプの太さを決めるときの目安になります。
| 模様 | 書き方 |
|---|---|
| 縦ストライプ | repeating-linear-gradient(90deg, #333 0 10px, #fff 10px 20px) |
| 横ストライプ | repeating-linear-gradient(0deg, #333 0 10px, #fff 10px 20px) |
| 斜めストライプ | repeating-linear-gradient(45deg, #333 0 10px, #fff 10px 20px) |
| 細い罫線（ノート風） | repeating-linear-gradient(#fff 0 27px, #cbd5e1 27px 28px) |
| 方眼紙 | 横線と縦線の2枚を background にカンマ区切りで重ねる |
| 同心円 | repeating-radial-gradient(circle, #333 0 4px, #fff 4px 12px) |
コピペ集：文字・枠線・ボタン・背景アニメ
文字をグラデーションにする
<h2 class="grad-text">グラデ文字</h2>
.grad-text {
background: linear-gradient(90deg, #ff0080, #00c8ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
背景を文字の形で切り抜き、文字色を透明にして背景を見せる方法です。80px の太字で描き、文字の左端・中央・右端のピクセルを調べました。
幅 400 左端付近 3:#fd0281 中央 185:#895dbb 右端付近 394:#03c5fd
左端がピンク、右端が水色で、文字の中に色の変化が入っています。 background-clip: text の接頭辞なしは Chrome 120、Safari 14 からなので、-webkit-background-clip も並べておくと広い範囲で動きます。見出しのように短い文字で使い、選択時や印刷時にも読めるかを確かめておくと安心です。
枠線をグラデーションにする
/* A: border-image（角は四角のまま） */
.border-a {
border: 4px solid;
border-image: linear-gradient(90deg, #ff0080, #00c8ff) 1;
}
/* B: 背景を2枚重ねる（角丸にできる） */
.border-b {
border: 4px solid transparent;
border-radius: 16px;
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(90deg, #ff0080, #00c8ff) border-box;
}
両方に border-radius: 16px を付けて、枠の色と、角のすぐ外側にあたる点の色を調べました。
border-image 左枠 #fe0080 右枠 #01c8ff 内側 #ffffff 角(21,21) #fe0080
2枚重ね（padding-box/border-box） 左枠 #fc0181 右枠 #02c7fe 内側 #ffffff 角(21,21) #ffffff
| 方法 | 角丸 | 中身の背景 |
|---|---|---|
A: border-image |
丸くならない（角の点が枠の色のまま） | 自由 |
| B: 背景の2枚重ね | 丸くなる（角の点が白＝切り取られた） | 1枚目の単色で塗る必要がある |
角丸の枠にしたいなら B を選びます。B は「内側（padding-box）を白で塗り、枠の領域（border-box）にグラデーションを敷く」仕組みです。
グラデーションボタンとホバー
グラデーションどうしを transition で切り替えようとすると、途中の色が出ません。3つの方法を、ホバー前・150ms 後・完了後のピクセル色で比べました。
グラデ同士の transition: 前 #ff0977 150ms #07c0ff 完了後 #07c0ff
background-position の transition: 前 #ff0977 150ms #84a77a 完了後 #07c0ff
::before の opacity の transition: 前 #ff0977 150ms #5089d6 完了後 #07c0ff
グラデーションを直接切り替える方法は、150ms の時点ですでに最終の色で、ぱっと切り替わっています。なめらかに変えるには、次のどちらかを使います。
/* 方法1：横長のグラデーションをずらす */
.btn-slide {
padding: 12px 28px; border: 0; border-radius: 999px; color: #fff; font-weight: 700;
background: linear-gradient(90deg, #ff0080, #ff8a00, #00c8ff, #6a5cff) 0 0 / 300% 100%;
transition: background-position 0.4s;
}
.btn-slide:hover,
.btn-slide:focus-visible { background-position: 100% 0; }
/* 方法2：別のグラデーションを重ねて、透明度を変える */
.btn-fade {
position: relative; isolation: isolate;
padding: 12px 28px; border: 0; border-radius: 999px; color: #fff; font-weight: 700;
background: linear-gradient(90deg, #ff0080, #ff8a00);
}
.btn-fade::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
background: linear-gradient(90deg, #00c8ff, #6a5cff);
opacity: 0; transition: opacity 0.4s;
}
.btn-fade:hover::before,
.btn-fade:focus-visible::before { opacity: 1; }
グラデーションの上に白い文字を置くときは、いちばん明るい部分でも文字が読めるかを確かめます。
背景が流れるアニメ
.flow {
background: linear-gradient(90deg, #ff0080, #ff8a00, #00c8ff, #ff0080) 0 0 / 300% 100%;
animation: flow 6s linear infinite;
}
@keyframes flow {
to { background-position: -300% 0; }
}
@media (prefers-reduced-motion: reduce) {
.flow { animation: none; }
}
最初と最後を同じ色にしておくと、つなぎ目なしでループします。中央のピクセルを約1秒おきに読んだ結果です。
background-position アニメ: 中央ピクセルの推移 #ff374c → #5d7ed0 → #ae9d51 → #ff275b
prefers-reduced-motion: reduce のとき #ff4540 → #ff4540
色が流れていき、「動きを減らす」設定のときは止まったままであることを確認できました。
角度が回るアニメ（@property）
@property --angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.spin {
background: linear-gradient(var(--angle), #ff0080, #00c8ff);
animation: spin 4s linear infinite;
}
@keyframes spin {
to { --angle: 360deg; }
}
@property で「この変数は角度です」と型を登録するのが要点です。登録の有無で --angle の値を比べました。
@property あり: --angle の値（0.5s, 1.5s, 2.5s 付近） 43.4954deg / 133.495deg / 223.486deg
@property なし: --angle の値（0.5s, 1.5s, 2.5s 付近） 0deg / 0deg / 360deg
登録ありでは 43度、133度、223度と連続して変化し、登録なしでは 0deg から 360deg へ途中で一気に切り替わりました。 @property は Chrome 85、Firefox 128、Safari 16.4 以降で使えます。
配色プリセット一覧（12種）
そのまま background に貼れる配色です。幅 600px・高さ 100px で描き、左端・中央・右端付近の色を計測しました。
| 名前 | コード | 左 → 中央 → 右（計測値） |
|---|---|---|
| サンセット | linear-gradient(135deg, #ff7e5f, #feb47b) |
#ff8362 → #fe996d → #feaf78 |
| オーシャン | linear-gradient(135deg, #2193b0, #6dd5ed) |
#2899b5 → #47b4ce → #67cfe8 |
| ミント | linear-gradient(135deg, #00b09b, #96c93d) |
#0cb294 → #4bbc6b → #8ac744 |
| グレープ | linear-gradient(135deg, #667eea, #764ba2) |
#687ae5 → #6e64c6 → #744fa7 |
| ピーチ | linear-gradient(135deg, #ffecd2, #fcb69f) |
#ffe8ce → #fdd1b8 → #fcbaa3 |
| ナイト | linear-gradient(135deg, #0f2027, #203a43, #2c5364) |
#12252c → #203a43 → #2a4f5e |
| オーロラ | linear-gradient(in oklch 135deg, #00c9ff, #92fe9d) |
#00d0fc → #00ebdb → #7dfca7 |
| ローズ | linear-gradient(135deg, #f857a6, #ff5858) |
#f958a0 → #fb577f → #fe585e |
| レモン | linear-gradient(135deg, #f6d365, #fda085) |
#f7cf68 → #f9b975 → #fca482 |
| スカイ | linear-gradient(to bottom, #a1c4fd, #c2e9fb) |
縦方向のため横は同色（中央の高さで #b1d6fc） |
| モノクロ | linear-gradient(135deg, #232526, #414345) |
#262829 → #323435 → #3e4042 |
| レインボー | linear-gradient(in oklch longer hue 90deg, #ff0080, #ff0080) |
#ff0076 → #00b99c → #fc0689 |
| 使いどころ | 向いているプリセット |
|---|---|
| 白い文字を載せるボタンや見出し帯 | グレープ、オーシャン、ローズ、ナイト、モノクロ |
| 黒い文字を載せるカードの背景 | ピーチ、スカイ、レモン |
| ページの背景やヒーロー領域 | ナイト、スカイ、オーロラ |
| 装飾の帯やローディング表示 | レインボー、サンセット |
「オーロラ」と「レインボー」は色空間指定を使っているので、前述の2行書きで未対応ブラウザ向けの指定を添えてください。
つまずきやすい書き方と直し方
実際にブラウザへ渡し、background-image の計算値を調べました。none は「無効として捨てられた」ことを表します。
linear-gradient(right, red, blue) → none
linear-gradient(to right red, blue) → none
linear-gradient(90, red, blue) → none
linear-gradient(0, red, blue) → linear-gradient(0deg, rgb(255, 0, 0), rgb(0, 0, 255))
linear-gradient(red) → linear-gradient(rgb(255, 0, 0))
-webkit-linear-gradient(left, red, blue) → -webkit-linear-gradient(left, rgb(255, 0, 0), rgb(0, 0, 255))
| 書いたもの | 結果 | 直し方 |
|---|---|---|
linear-gradient(right, ...) |
無効 | to right と書く（to が必要） |
linear-gradient(to right red, blue) |
無効 | 方向のあとにカンマを入れる |
linear-gradient(90, ...) |
無効 | 90deg と単位を付ける（0 だけは単位なしで通った） |
background-color: linear-gradient(...) |
無効 | background か background-image に書く |
-webkit-linear-gradient(left, ...) |
Chromium では今も解釈される | 接頭辞つきは left が「左から始まる」の意味で、標準の to right に相当。新しく書くときは標準の書き方だけで足りる |
| 高さのない要素に指定 | 何も見えない | 背景は要素の大きさぶんしか描かれない。min-height などで高さを確保する |
body に指定したら途中で繰り返す |
内容の高さで繰り返される | html { min-height: 100%; } と body { min-height: 100vh; } を指定する |
| 色の境目に縞（バンディング）が見える | 近い色どうしを広い面積で変化させている | 色の差を少し広げる、中間色を1つ足す、in oklab を試す |
色を1つだけ書いた linear-gradient(red) は Chromium 141 では有効でしたが、広いブラウザで使うなら色は2つ以上書くのが確実です。
よくある質問
Q. ベンダープレフィックス（-webkit- や -moz-）は今も必要ですか？
A. linear-gradient と radial-gradient は Chrome 26、Firefox 16、Safari 7 から接頭辞なしで使えます。現行のブラウザ向けなら標準の書き方だけで足ります。接頭辞が要るのは、文字グラデーションの -webkit-background-clip: text を広い範囲で効かせたいときくらいです。
Q. グラデーションの途中がくすんで見えるのはなぜですか？
A. 既定の sRGB では2色のRGB値を平均するので、補色に近い組み合わせでは中間がグレーに寄ります。計測では blue と yellow の中間が #7f7f7f でした。in oklch や in oklab を付けると、中間の鮮やかさや明るさが保たれます。
Q. グラデーションをアニメーションさせるにはどうすればよいですか？
A. グラデーションそのものは transition で補間されません。background-position を動かす、@property で登録した角度の変数を動かす、重ねた疑似要素の opacity を変える、の3つが定番です。いずれも計測で途中の値を通ることを確認しています。
Q. oklch() の色と in oklch は別のものですか？
A. 別のものです。oklch(0.7 0.2 330) は色の書き方、in oklch は色と色の間の混ぜ方の指定です。16進数で書いた色に in oklch を付けても効きますし、oklch() で書いた色を sRGB で混ぜることもできます。
まとめ
- 基本は
linear-gradient(方向, 色, 色)。 角度は 0deg が上向きで時計回り、省略時は上から下 - 色の後ろの位置で変化の範囲を決める。 同じ位置を2色に指定するとハードストップになり、境界は1ピクセルもぼけなかった
in oklchで中間色のくすみが消える。 blue → yellow の中間は sRGB で#7f7f7f、in oklchで#00cfbcradial-gradientは既定が楕円・farthest-corner、conic-gradientは真上から時計回り- ストライプは
repeating-linear-gradient。 斜め 45 度では横方向の幅が約1.41倍になる - グラデーションの切り替えは
background-position・@property・opacityでなめらかにできる - 未対応ブラウザには同じプロパティを2行書くと、無効な行だけが無視される
本記事の内容は、ご自由にお使いください。
ご利用の際は、出典として本ページへのリンクを記載いただけますようお願いします。
（記載例）出典：株式会社RJC「CSSグラデーションの書き方｜linear-gradientコピペ集と配色一覧」
株式会社RJCでは、CSSグラデーションのような表現の技術を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。
株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。
WE ARE HIRING
RJCで一緒に開発しながら、
成長を楽しみませんか？
RJCは、Web・モバイル・AIを活用した開発プロジェクトで、テックリードやPM・PMOも活躍するシステム開発会社です。会社を知る、待遇を確かめる、話を聞いてみる。気になるところ見てみてください！
- 127日年間休日
- 12時間平均残業時間
- 毎日ガチャ遊びココロも大切にする福利厚生。アマギフなどの賞品ラインナップ！
ほかにも、チケットレストラン、書籍読み放題、2年ごとの慰労報奨（休暇 or 金一封）、11期連続の黒字決算。
