CSSでグラデーションを扱う事が出来ます。

タイプ

CSSのグラデーションには、基本となる3つの形状（線形・放射状・円錐状）と、それぞれを繰り返す「反復タイプ」を合わせた計6種類があります。

基本系

反復系

反復系は基本形を反復したものになります。

プロパティと関数

これまでに述べたものはCSSの関数として提供されています。

基本的にbackgroundプロパティにこれらの関数を使用します。これらの関数がimageオブジェクトの特殊型を返却する為です。簡単に言うと画像として扱われるという感じです。

以下は線形グラデーションの例になります。

CSS

.gradient-start-end {
  background:linear-gradient(red, blue);
}

結果

最後に

まずは基本となる linear-gradient(線形グラデーション) について説明したいと思います。