今回はテキストや背景、バナー、ボタン等で見かけるグラデーションをCSSで作成する方法を紹介します。

グラデーションのかけ方

backgroundプロパティに対してlinear-gradient(色指定)、またはradial-gradient(色指定)を指定すればグラデーションをかけることができます。

linear-gradient：直線に沿った線形のグラデーション

radial-gradient：円形に広がる放射状のグラデーション

2色以上指定する必要があります。

線形グラデーション

まずは線形グラデーションについて紹介します。

基本的なグラデーション

()の中は、「 , 」半角スペースで区切ります。

上から下にグラデーションがかかります。

div{ background: linear-gradient(#2126ff, #ff07f6); }

方向を変える

方向を変える場合はカラーコードの前に位置を指定します。

下から上へ：to top

div{ background: linear-gradient(to top, #2126ff, #ff07f6); }

左から右へ：to right

div{ background: linear-gradient(to right, #2126ff, #ff07f6); }

右から左へ：to left

div{ background: linear-gradient(to left, #2126ff, #ff07f6); }

対角線に変えることもできます。

左上から右下へ：to bottom right

div{ background: linear-gradient(to bottom right, #2126ff, #ff07f6); }

角度を変えたい場合はdegを指定することで調整することができます。

0degは下から上、90degは左から右、180degは上から下、270degは右から左にかかります。

今回は30degを指定してみました。

div{ background: linear-gradient(30deg, #2126ff, #ff07f6); }

位置を変える

色が変わる位置を変えたい場合は1個目のカラーコードに%を指定します。

20%を指定した場合は、20%まで青色でそれ以降にグラデーションがかかります。

div{ background: linear-gradient(#2126ff 20%, #ff07f6); }

80%を指定した場合は、80%まで青色でそれ以降にグラデーションがかかります。

div{ background: linear-gradient(#2126ff 80%, #ff07f6); }

色を増やす

指定できる色数は2色だけではありません。自由に増やすことができます。それぞれ位置を指定することもできます。

div{ background: linear-gradient(#12b9ff, #2126ff, #ff07f6); }

div{ background: linear-gradient(to right, #ffe6e6, #ff6f6f 30%, #ffc06f 60%, #ffe9cc); }

円形グラデーション

次に円形グラデーションについて紹介します。

基本的なグラデーション

円形の場合、中心→外側の順で色を指定します。

div{ background: radial-gradient(#e4ffc0, #4d7539); }

位置や色数の変え方はlinear-gradientと同じです。

テキストカラーをグラデーションに

テキストカラーをグラデーションにする方法を紹介します。

Omakase

p span{
	background: linear-gradient(#2126ff, #ff07f6); /*背景をグラデーション */
	-webkit-background-clip: text; /*背景の領域をテキストのみに絞る*/
	-webkit-text-fill-color: transparent;/*文字を透過*/
}

background-clipとtext-fill-colorはベンダープレフィックス(-webkit-)を付けないと反映されないので必ず付けましょう。