これでもう困らない！ 2026年最新版、CSSグラデーションのあらゆるタイプの実装コードをまとめたチートシート
Post on:2026年7月15日
sponsorsr
CSSでグラデーションを実装するときに実装コードを毎回調べている、そんな人にお勧めのチートシートを紹介します。
CSSで実装できるグラデーション、線形、放射状、円錐状、それぞれの繰り返しバージョンに加え、複数のグラデーションの重ね合わせ、円錐状グラデーションのストップのみを使用した円グラフなどの実装コードをまとめたチートシートです。
CSSグラデーションのチートシートは、こちらから。
各カードには、CSSグラデーションのレンダリング結果とそれを実装するCSSのコードが記載されています。「Copiar」ボタンでCSSがコピーできます。
実際の表示は、下記で確認できます。
See the Pen
CSS グラデーションのチートシート by coliss (@coliss)
on CodePen.
どんなCSSグラデーションがあるか見てみましょう。
まずは「linear-gradient（線形）」
線形グラデーションとは、2つ以上のカラーを使用して直線に沿った連続的な変化から構成されるグラデーションです。
01 / linear-gradient
左上「Left → right」のCSSは、下記の通り。
|
1 2 3 4 |
background: linear-gradient( to right, #667eea, #764ba2 ); |
続いては「radial-gradient（放射状）」
放射状グラデーションとは、2つ以上のカラーを使用して放射状に拡がる連続的な変化から構成されるグラデーションです。
02 / radial-gradient
左上「Circle from center」のCSSは、下記の通り。
|
1 2 3 4 |
background: radial-gradient( circle, #ff9a9e, #fad0c4 ); |
3つめは「conic-gradient（円錐状）」
円錐状グラデーションとは中心点から拡がる放射ではなく、中心点から回転しながらカラーを変化させる扇型の円錐曲線グラデーションです。
03 / conic-gradient
左上「Full color wheel」のCSSは、下記の通り。
|
1 2 3 4 |
background: conic-gradient( red, yellow, green, blue, red ); |
4つめは「repeating-*-gradient（繰り返しバージョン）」
2つ以上のカラーを使用して、任意のルールに基づいてカラーを繰り返してパターンを生成します。
04 / repeating-*-gradient
左上「Diagonal stripes」のCSSは、下記の通り。
|
1 2 3 4 5 6 7 |
background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); |
グラデーションで使用しているカラーは、色の名前とともにHEX値も記載されています。
06 / color palette used
sponsors
