CSSでのグラデーションの使い方を勉強しながらまとめてます。
実際に使ってみた印象で書いてるので間違いがあるかもしれません。

基本

背景など画像が使える所なら使用可能

*-gradient(color1, color2)
*-gradient([option, ]color1, color2[, colors...])
*-gradient([option, ]color1[ point], color2[ point][, colors...])
*-gradient(color1, [point, ]color2)

グラデーションの種類

色経由点の配置

最初と最後の色にはそれぞれ0％、100％が既定となっているようです。
何も指定しないと均等に配置されます。

色の指定

2色間の中間色の配置

linear-gradient(90deg, red, 15%, blue)

カンマで区切り、中間色の配置を指定。
上記例では、15%の位置に両隣の色の中間色が配置されます。

後述の単色範囲の配置のように位置を２つ指定するとエラーになります。

単色の配置

linear-gradient(90deg, red, blue 15%, green)

区切らずその色に指定。
上記例では、色が混じらない単色部分を15%の位置に配置。

単色範囲の配置

１）linear-gradient(90deg, red, blue 15% 60%, green)
２）linear-gradient(90deg, red 15%, blue, green)

位置を２つ指定。
色が混じらない単色部分を範囲指定できます。
１の例では15%～60%が青の単色となります。

最初と最後の色は既定値があるので、１つ指定するだけで範囲が指定できます。
２の例では、0%～15%が赤の単色となります。

中間色を作らない

linear-gradient(90deg, red 15%, blue 15%, green)
linear-gradient(90deg, red 15%, blue 15% 85%, green 85%)

このように単色の境界を同値にすると中間色が生じない形になります。

線形グラデーション

線形グラデーションは、直線に沿った色の帯の変化を生成します。

直前の画像にあるようなものがこれにあたります。

方向・角度の指定（オプション）

linear-gradient([option, ]color1, color2[, colors...])

線形グラデーションでは、optionに方向・角度を指定できます。
省略すると、上が始点・下が終点（to bottom / 180deg）の既定値が適用されます。

方向

linear-gradient(to bottom right, color1, color2[, colors...])

to [direction]で、top,botto,left,rightを組み合わせた8方向の指定が可能です。
上記例では右下が終点となるグラデーションを生成します。
既定値はto bottom。

角度

linear-gradient(135deg, color1, color2[, colors...])

[0-360]degで、方向よりもより詳細な角度指定ができます。
-[0-360]degのようにマイナス値だと反時計回りの指定に変化。（315deg = -45deg）
上記例は方向の時と同じく右下が終点のグラデーションです。
既定値は180deg。

赤（内）が始点、紫（外）が終点。

.box8{background:linear-gradient(180deg,red15%,orange15%29%,yellow29%43%,green43%57%,blue57%71%,indigo71%85%,purple85%);}

虹色ボックスはこんな感じで書いてます。
ぱっと見分かりにくいですが、315degのボックスだけそれぞれ隙間を2%空けて境界を鈍らせてます。

最後に

グラデーションの積み重ねや、他の種類のグラデーションは未使用なので、使ったら書くかもしれません。

参考サイト

CSS グラデーションの使用 - CSS: カスケーディングスタイルシート | MDN