linear-gradient は CSS の関数です。linear-gradient関数を使用すると線形グラデーションが実現できます。

概要

要素

グラデーションを指定する要素は大きく以下の通りです。

グラデーションの方向 – side-or-corner
グラデーションを開始する位置 – linear-color-stop
グラデーション中の色(補間色) – color-hint

プロパティ

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

基本

単一色

linear-gradient関数に任意の色を1つ指定します。

CSS

.gradient-simple {
  background:linear-gradient(red);
}

結果

指定した色(今回の例は赤)のみ表示されます。

開始色と終了色

linear-gradient関数に任意の色を2つ指定します。
この場合、グラデーションの開始色、終了色の指定となります。

background:linear-gradient(開始色, 終了色);

上から下へグラデーションされます。
今回の例の場合、上から下にかけて赤から青に変わります。

CSS

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

結果

グラデーションを指定する要素

グラデーションの方向 – side-or-corner

グラデーションの方向を指定することができます。

垂直、水平方向

to という文字に続き、垂直方向について top、bottom が使用できます。
水平方向に left、right が使用できます。

to bottom	上から下へグラデーション。デフォルト。
to top	下から上へグラデーション
to right	左から右へグラデーション
to left	右から左へグラデーション

HTML

<div class="box gradient-bottom"></div>
<br>

<div class="box gradient-top"></div>
<br>

<div class="box gradient-right"></div>
<br>

<div class="box gradient-left"></div>

CSS

.box {
  height: 100px;
  width: 100px;
}

.gradient-bottom {
  background:linear-gradient(to bottom,red, blue); /* 上から下へグラデーション. 指定しない場合 to bottom が使用される */
}

.gradient-top {
  background:linear-gradient(to top,red, blue); /* 下から上へグラデーション */
}

.gradient-right {
  background:linear-gradient(to right,red, blue); /* 左から右へグラデーション */
}

.gradient-left {
  background:linear-gradient(to left,red, blue); /* 右から左へグラデーション */
}

結果

斜め方向

垂直方向と水平方向を同時に指定する事で斜め方向からグラデーションを使用する事が出来ます。

to bottom right	左上から右下へグラデーション
to bottom left	右上から左下へグラデーション
to top right	左下から右上へグラデーション
to top left	右下から左上へグラデーション

HTML

<div class="box gradient-bottom-right"></div>
<br>

<div class="box gradient-bottom-left"></div>
<br>

<div class="box gradient-top-right"></div>
<br>

<div class="box gradient-top-left"></div>

CSS

.box {
  height: 100px;
  width: 100px;
}

.gradient-bottom-right {
  background:linear-gradient(to bottom right,red, blue); /* 左上から右下へグラデーション */
}

.gradient-bottom-left {
  background:linear-gradient(to bottom left,red, blue); /* 右上から左下へグラデーション */
}

.gradient-top-right {
  background:linear-gradient(to top right,red, blue); /* 左下から右上へグラデーション */
}

.gradient-top-left {
  background:linear-gradient(to top left,red, blue); /* 右下から左上へグラデーション */
}

結果

角度 – angle

グラデーションの方向に角度を指定出来ます。degという単位を指定します。
0deg は to top と同じになります。値を増加させると角度も時計回りに増加します。

HTML

<div class="box gradient-45"></div>
<br>

<div class="box gradient-135"></div>
<br>

<div class="box gradient-225"></div>
<br>

<div class="box gradient-315"></div>

CSS

.box {
  height: 100px;
  width: 100px;
}

.gradient-45 {
  background:linear-gradient(45deg,red, blue);
}

.gradient-135 {
  background:linear-gradient(135deg,red, blue);
}

.gradient-225 {
  background:linear-gradient(225deg,red, blue);
}

.gradient-315 {
  background:linear-gradient(315deg,red, blue);
}

結果

以下は、角度と方向の対応になります。

0deg	to top
45deg	to top right
90deg	to right
135deg	to bottom right
180deg	to bottom
225deg	to bottom left
270deg	to left
315deg	to top left

グラデーションを開始する位置 – linear-color-stop

グラデーションが始まる位置を指定出来ます。
色指定の後に % を指定します。

HTML

<div class="box gradient-linear-color-stop-0"></div>
<br>

<div class="box gradient-linear-color-stop-30"></div>
<br>

<div class="box gradient-linear-color-stop-50"></div>
<br>

<div class="box gradient-linear-color-stop-80"></div>
<br>

<div class="box gradient-linear-color-stop-100"></div>

CSS

.box {
  height:150px;
  width: 100%;
}

.gradient-linear-color-stop-0 {
  background:linear-gradient(to right, red 0%, blue);
}

.gradient-linear-color-stop-30 {
  background:linear-gradient(to right, red 30%, blue);
}

.gradient-linear-color-stop-50 {
  background:linear-gradient(to right, red 50%, blue);
}

.gradient-linear-color-stop-80 {
  background:linear-gradient(to right, red 80%, blue);
}

.gradient-linear-color-stop-100 {
  background:linear-gradient(to right, red 100%, blue);
}

結果

グラデーション中の色(補間色) – color-hint

グラデーションは開始色から終了色へと色が変わりますが、色の変わり方を指定する事が出来ます。この色の変わり方(補間色)の指定を変えるだけでグラデーションの見た目が大きく変わります。

補間について

まず、押さえておきたいのが、補間の方法は大きく2つあることです。
これらの詳しい説明は長くなるので省略させて頂きます。
見かけたら調べるようにして下さい。

直交色空間
円筒色空間

補間色の指定

グラデーションされる間の色(補間色)をどのようにするかを指定出来ます。
in の後に補間する方法を指定します。

直交色空間系の補間色の指定

srgb、srgb-linear、oklab などがあります。デフォルトは oklab です。

HTML

<div class="box-01 gradient-srgb"></div>
<br>

<div class="box-01 gradient-srgb-linear"></div>
<br>

<div class="box-01 gradient-oklab"></div>

CSS

.box {
  height:150px;
  width: 100%;
}

.gradient-srgb {
  background:linear-gradient(to right in srgb, red, blue);
}

.gradient-srgb-linear {
  background:linear-gradient(to right in srgb-linear, red, blue);
}

.gradient-oklab {
  background:linear-gradient(to right in oklab, red, blue);
}

結果

円筒色空間系の補間色の指定

hsl、hwb、lch、oklch などがあります。

HTML

<div class="box gradient-hsl"></div>
<br>

<div class="box gradient-lch"></div>
<br>

<div class="box gradient-oklch"></div>

CSS

.box {
  height:150px;
  width: 100%;
}

.gradient-hsl {
  background:linear-gradient(to right in hsl, red, blue);
}

.gradient-lch {
  background:linear-gradient(to right in lch, red, blue);
}

.gradient-oklch {
  background:linear-gradient(to right in oklch, red, blue);
}

結果

複数色の指定

これまでは開始色、終了色の2色を指定していましたが、複数色を指定する事が出来ます。開始色、終了色の間に経由色として指定出来ます。

background:linear-gradient(開始色, 経由色1, 経由色2, .. 経由色N, 終了色);

以下は3色を指定した例になります。

HTML

<div class="box gradient-3-colors"></div>
<br>

<div class="box gradient-3-colors-p"></div>

CSS

.box {
  height:150px;
  width: 100%;
}

.gradient-3-colors {
  background:linear-gradient(to right in oklab, red, blue, green);
}

.gradient-3-colors-p {
  background:linear-gradient(to right in oklab, red 20%, blue 60%, green);
}

結果

その他

background-image

今まではbackgroundプロパティにlinear-gradient関数を使用していましたが、background-imageプロパティにも指定出来ます。これはlinear-gradient関数がimageオブジェクトの特殊型を返却する為です。

CSS

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

結果

transparentの応用

基本

色の指定にtransparentを使用出来ます。

CSS

.gradient-image-start-transparent {
  background:linear-gradient(transparent, blue);
}

.gradient-image-end-transparent {
  background:linear-gradient(red, transparent);
}

結果

開始色のtransparent指定

開始色にtransparentを指定し開始位置、終了位置をそれぞれ指定してみます。透明(transparent)の範囲が終了色の割合と同じか多い場合、グラデーションが行われず、突然終了色が始まるように見受けられます。

CSS

.gradient-image-start-transparent-pos-30 {
  background:linear-gradient(transparent 30%, blue 70%);
}

.gradient-image-start-transparent-pos-49 {
  background:linear-gradient(transparent 49%, blue 51%);
}

.gradient-image-start-transparent-pos-50 {
  background:linear-gradient(transparent 50%, blue 50%);
}

.gradient-image-start-transparent-pos-70 {
  background:linear-gradient(transparent 70%, blue 30%);
}

結果

終了色のtransparent指定

終了色にtransparentを指定し開始位置、終了位置をそれぞれ指定してみます。透明(transparent)の範囲が開始色の割合と同じか少ない場合、グラデーションが行われず、突然開始色が消えるように見受けられます。

CSS

.gradient-image-end-transparent-pos-30 {
  background:linear-gradient(red 30%, transparent 70%);
}

.gradient-image-end-transparent-pos-49 {
  background:linear-gradient(red 49%, transparent 51%);
}

.gradient-image-end-transparent-pos-50 {
  background:linear-gradient(red 50%, transparent 50%);
}

.gradient-image-end-transparent-pos-70 {
  background:linear-gradient(red 70%, transparent 30%);
}

結果

最後に

グラデーションは色科学です。