CSS linear-gradient() 関数

定義と使用法

CSS linear-gradient() バックグラウンドとしての線形グラデーションを作成するための関数です。

線形グラデーションを作成するには、少なくとも2つの色標を定義する必要があります。色標は、その間で滑らかな移行を実現したい颜色です。また、起点と方向（または角度）およびグラデーション効果を設定することもできます。

線形グラデーション例：

例

例 1

この線形グラデーションは上部から始まる。赤色から黄色、そして青色への移行：

#grad {
  background-image: linear-gradient(red, yellow, blue);
}

実際に試してみる

例 2

左から始まる線形グラデーション。赤色から青色への移行：

#grad {
  background-image: linear-gradient(to right, red , blue);
}

実際に試してみる

例 3

左上から始まる（そして右下に延伸する）線形グラデーション：

#grad {
  background-image: linear-gradient(to bottom right, red , blue);
}

実際に試してみる

例 4

角度を指定した線形グラデーション：

#grad {
  background-image: linear-gradient(180deg, red, blue);
}

実際に試してみる

例 5

複数の色標を含む線形グラデーション：

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

実際に試してみる

例 6

二つの位置の色標を持つ線形減色：

#grad {
  background: linear-gradient(
    to right,
    red 17%,
    orange 17% 34%,
    yellow 34% 51%,
    green 51% 68%,
    blue 68% 84%,
    indigo 84%
  );
}

実際に試してみる

例 7

透明度を持つ線形減色：

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

実際に試してみる

CSS 言語法

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);
値 説明
side-or-corner

オプション。渐変の起点。キーワード「to」で始まり、最長二つの他のキーワードが続きます：

  • left または right
  • top または bottom

デフォルト値は to bottom（底部に）です。
angle

オプション。渐変線の方向角度：

  • 0deg は：to top（顶部に）に等しい
  • 180deg は：to bottom（底部に）に等しい
  • 270deg は：to left（左側に）に等しい
  • 90deg は：to right（右側に）に等しい
color-stop1, color-stop2,...

必須。色標は、その間に滑らかな移行を実現したい色です。

この値は、色値で構成され、後続する一つまたは二つの位置の色標（0%から100%の間のパーセンテージまたは変化線の長さ）がオプションで含まれます。

技術的詳細

バージョン： CSS3

ブラウザのサポート

テーブルの数字は、その関数を完全にサポートする最初のブラウザのバージョンを示しています。

クローム エッジ ファイアフォックス サファリ オペラ
linear-gradient()
26 10 16 6.1 12.1
二つの位置の色標
71 79 64 12.1 58

関連ページ

チュートリアル：CSS 減色

参考：CSS background-image 属性

参考：CSS conic-gradient() 関数

参考：CSS radial-gradient() 関数

参考：CSS repeating-conic-gradient() 関数

参考：CSS repeating-linear-gradient() 関数

参考：CSS repeating-radial-gradient() 函数