グラデーション

線形グラデーション

#linear-g {
background: gray;
background: linear-gradient(
/*方向あるいは角度を指定（省略可）:下から上へ 例:to top right | 45deg　は右上へ 　初期値 to bottom = 180deg */
to top,
/*始点　2つ以上の複数の色値を指定（省略不可）:glay（下）*/
gray 20%,
/*終点　white(上) 60% = 変更色の位置 */
white 60%
);
}

グラデーションが無効になった場合の色を指定しておくことが望ましい

example 1

#ex1 {
background: black;
background: linear-gradient(-135deg, #0ff 33%, #f0f 33%, #f0f 66%, #ff0 66%);
}

円形グラデーション

#radial-g {
background: gray;
background: radial-gradient(
/*形状（楕円または正円）、サイズ(領域に対する円の収めかた)、中心位置(単位またはキーワード)を指定*/
/*形状、サイズ、中心位置は省略可*/
ellipse(楕円),
/*始点（中心）初期位置は領域の中央*/
white,
/*終点*/
gray
);
}

example 2

#ex2 {
background: black;
background: radial-gradient(circle closest-side at 60px 60px, #0ff 33%, #f0f 33%, #f0f 66%, #ff0 66%);
}