CSS linear-gradient() 函數

定義和用法

CSS linear-gradient() 函數用于創建作為背景的線性漸變。

要創建線性漸變，必須定義至少兩個色標。色標是您希望在其間實現平滑過渡的顏色。您還可以設置起點和方向（或角度）以及漸變效果。

線性漸變示例：

實例

例子 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, ...);

技術細節

瀏覽器支持

表格中的數字表示首個完全支持該函數的瀏覽器版本。

相關頁面

教程：CSS 漸變

參考：CSS background-image 屬性

參考：CSS conic-gradient() 函數

參考：CSS radial-gradient() 函數

參考：CSS repeating-conic-gradient() 函數

參考：CSS repeating-linear-gradient() 函數

參考：CSS repeating-radial-gradient() 函數