linear、radial、conicなgradient

linear-gradient

直線的なグラデーション装飾が可能

.gradient-linear{

	background:linear-gradient(tomato, skyblue);

}

境界を明確にすることも可能。

.gradient-linear-separate{

	background:linear-gradient(tomato 0% 25%, skyblue 25% 50%, tomato 50% 75%, skyblue 75% 100%);

}

radial-gradient

円の中心点から外周に向けてのグラデーション。キーワードはellipseかcircleのいずれか。linear同様に境界の明確化も可能

.gradient-radial{

	background:radial-gradient(ellipse, tomato 0% 25%, skyblue 25% 50%, tomato 50% 75%, skyblue 75% 100%);

}

conic-gradient

扇型に展開をする。境界の明確化が可能。

.gradient-conic{

	background:conic-gradient(tomato 0% 25%, skyblue 25% 50%, tomato 50% 75%, skyblue 75% 100%);

}

//%だけでなくdegで角度を指定することもできる。

用途によってはなんちゃっての円グラフにも使えるのでは…。

使いどころ

バックグラウンドのみならず、background-clipプロパティを使えば文字をグラデーションにすることができる(正しくいうと文字の形にclipしているだけ)。