使用 CSS 漸變

CSS 漸變由 <gradient> 資料型別表示，它是一種特殊的 <image>，由兩種或多種顏色之間的漸進過渡組成。你可以選擇三種類型的漸變：線性（使用 linear-gradient() 函式建立）、徑向（使用 radial-gradient() 函式建立）和圓錐（使用 conic-gradient() 函式建立）。你還可以使用 repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient() 函式建立重複漸變。

漸變可以用於任何使用 <image> 的地方，例如背景。由於漸變是動態生成的，它們可以消除傳統上用於實現類似效果的柵格影像檔案的需求。此外，由於漸變是由瀏覽器生成的，因此在放大時它們看起來比柵格影像更好，並且可以即時調整大小。

我們將首先介紹線性漸變，然後以線性漸變為例介紹所有漸變型別都支援的功能，然後轉向徑向、圓錐和重複漸變。

使用線性漸變

線性漸變會建立一條顏色帶，顏色沿直線漸變。

基本線性漸變

要建立最基本的漸變型別，你只需要指定兩種顏色。這些被稱為顏色停止點。你必須至少有兩個，但你可以根據需要設定任意多個。

<div class="simple-linear"></div>

div {
  width: 120px;
  height: 120px;
}

css

.simple-linear {
  background: linear-gradient(blue, pink);
}

改變方向

預設情況下，線性漸變從上到下執行。你可以透過指定方向來改變它們的旋轉。

<div class="horizontal-gradient"></div>

div {
  width: 120px;
  height: 120px;
}

css

.horizontal-gradient {
  background: linear-gradient(to right, blue, pink);
}

對角漸變

你甚至可以使漸變對角線執行，從一個角落到另一個角落。

<div class="diagonal-gradient"></div>

div {
  width: 200px;
  height: 100px;
}

css

.diagonal-gradient {
  background: linear-gradient(to bottom right, blue, pink);
}

使用角度

如果你想更好地控制其方向，可以為漸變指定一個特定的角度。

<div class="angled-gradient"></div>

div {
  width: 120px;
  height: 120px;
}

css

.angled-gradient {
  background: linear-gradient(70deg, blue, pink);
}

使用角度時，0deg 建立一個從下到上垂直執行的漸變，90deg 建立一個從左到右水平執行的漸變，依此類推，順時針方向。負角度則逆時針執行。

Four boxes listing angle and showing associated gradient from red to white. 0deg starts at the bottom and goes up. 90deg starts at left and goes right. 180deg starts at the top and goes down. -90deg starts at right and goes left.

宣告顏色並建立效果

所有 CSS 漸變型別都是一系列與位置相關的顏色。CSS 漸變產生的顏色可以隨位置連續變化，從而產生平滑的顏色過渡。也可以建立純色帶和兩種顏色之間的硬過渡。以下對所有漸變函式均有效

使用兩種以上顏色

你不必侷限於兩種顏色——你可以使用任意多種顏色！預設情況下，顏色沿漸變均勻分佈。

<div class="auto-spaced-linear-gradient"></div>

div {
  width: 120px;
  height: 120px;
}

css

.auto-spaced-linear-gradient {
  background: linear-gradient(red, yellow, blue, orange);
}

定位顏色停止點

你不必將顏色停止點保留在其預設位置。要微調它們的位置，你可以為每個顏色停止點提供零個、一個或兩個百分比值，或者對於徑向和線性漸變，提供絕對長度值。如果你將位置指定為百分比，0% 表示起始點，而 100% 表示結束點；但是，如果需要獲得所需效果，你可以使用超出該範圍的值。如果你未指定位置，則將為你自動計算該特定顏色停止點的位置，其中第一個顏色停止點位於 0%，最後一個顏色停止點位於 100%，而任何其他顏色停止點則位於其相鄰顏色停止點之間的中間位置。

<div class="multicolor-linear"></div>

div {
  width: 120px;
  height: 120px;
}

css

.multicolor-linear {
  background: linear-gradient(to left, lime 28px, red 77%, cyan);
}

建立硬線

要在兩種顏色之間建立硬線，而不是逐漸過渡，而是建立條紋，可以將相鄰的顏色停止點設定為相同的位置。在此示例中，顏色在漸變的中間，即 50% 標記處共享一個顏色停止點。

<div class="striped"></div>

div {
  width: 120px;
  height: 120px;
}

css

.striped {
  background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
}

漸變提示

預設情況下，漸變在一種顏色和下一種顏色之間均勻過渡。你可以包含一個顏色提示，將過渡值的中點移動到漸變沿線的特定點。在此示例中，我們已將過渡的中點從 50% 標記移至 10% 標記。

<div class="color-hint"></div>
<div class="simple-linear"></div>

div {
  width: 120px;
  height: 120px;
  float: left;
  margin-right: 10px;
}

css

.color-hint {
  background: linear-gradient(blue, 10%, pink);
}
.simple-linear {
  background: linear-gradient(blue, pink);
}

建立色帶和條紋

要在漸變中包含實心、不過渡的顏色區域，請為顏色停止點包含兩個位置。顏色停止點可以有兩個位置，這等效於兩個連續的顏色停止點，在不同位置具有相同的顏色。顏色將在第一個顏色停止點達到完全飽和，透過第二個顏色停止點保持該飽和度，並過渡到相鄰顏色停止點的顏色，透過相鄰顏色停止點的第一個位置。

<div class="multiposition-stops"></div>
<div class="multiposition-stop2"></div>

div {
  width: 120px;
  height: 120px;
  float: left;
  margin-right: 10px;
  box-sizing: border-box;
}

css

.multiposition-stops {
  background: linear-gradient(
    to left,
    lime 20%,
    red 30%,
    red 45%,
    cyan 55%,
    cyan 70%,
    yellow 80%
  );
  background: linear-gradient(
    to left,
    lime 20%,
    red 30% 45%,
    cyan 55% 70%,
    yellow 80%
  );
}
.multiposition-stop2 {
  background: linear-gradient(
    to left,
    lime 25%,
    red 25%,
    red 50%,
    cyan 50%,
    cyan 75%,
    yellow 75%
  );
  background: linear-gradient(
    to left,
    lime 25%,
    red 25% 50%,
    cyan 50% 75%,
    yellow 75%
  );
}

在上面的第一個例子中，石灰色從隱含的 0% 標記到 20% 標記，在漸變寬度的接下來的 10% 中從石灰色過渡到紅色，在 30% 標記處達到純紅色，並保持純紅色直到漸變透過 45% 處，在那裡它淡出為青色，在漸變中保持 15% 的純青色，依此類推。

在第二個示例中，每種顏色的第二個顏色停止點與相鄰顏色的第一個顏色停止點位於相同位置，從而建立條紋效果。

在兩個示例中，漸變都寫了兩次：第一個是 CSS Images Level 3 中為每個停止點重複顏色的方法，第二個示例是 CSS Images Level 4 中線上性顏色停止宣告中包含兩個顏色停止長度的多顏色停止方法。

控制漸變的程序

預設情況下，漸變在兩個相鄰的顏色停止點之間均勻進行，這兩個顏色停止點之間的中點是中點顏色值。你可以透過包含顏色提示位置來控制兩個顏色停止點之間的插值或程序。在此示例中，顏色在漸變進行到 20% 時達到石灰色和青色之間的中點，而不是進行到 50% 時。第二個示例不包含提示，以突出顯示顏色提示可以產生的差異。

<div class="color-hint-gradient"></div>
<div class="regular-progression"></div>

div {
  width: 120px;
  height: 120px;
  float: left;
  margin-right: 10px;
  box-sizing: border-box;
}

css

.color-hint-gradient {
  background: linear-gradient(to top, lime, 20%, cyan);
}
.regular-progression {
  background: linear-gradient(to top, lime, cyan);
}

疊加漸變

漸變支援透明度，因此你可以堆疊多個背景以實現一些非常華麗的效果。背景從上到下堆疊，第一個指定的在頂部。

<div class="layered-image"></div>

div {
  width: 300px;
  height: 150px;
}

css

.layered-image {
  background:
    linear-gradient(to right, transparent, mistyrose), url("critters.png");
}

堆疊漸變

你甚至可以將漸變與其他漸變堆疊。只要頂部漸變不是完全不透明的，下面的漸變仍然可見。

<div class="stacked-linear"></div>

div {
  width: 200px;
  height: 200px;
}

css

.stacked-linear {
  background:
    linear-gradient(217deg, rgb(255 0 0 / 80%), transparent 70.71%),
    linear-gradient(127deg, rgb(0 255 0 / 80%), transparent 70.71%),
    linear-gradient(336deg, rgb(0 0 255 / 80%), transparent 70.71%);
}

混合漸變

除了透明度、堆疊多個半透明漸變以及在柵格背景影像上堆疊漸變之外，漸變還可以與其他 CSS 效果一起使用。在此示例中，四個 <div> 元素具有相同的兩個完全不透明的漸變作為背景影像。我們對最後三個應用了不同的 background-blend-mode CSS 屬性值，這些值混合了兩個背景影像，從而建立了不同的效果。

<div class="original"></div>
<div class="screen"></div>
<div class="overlay"></div>
<div class="difference"></div>

div {
  width: 120px;
  height: 120px;
  float: left;
  margin-right: 10px;
  box-sizing: border-box;
}

css

div {
  background:
    linear-gradient(to top, red, blue),
    linear-gradient(to right, #5500ff, #00ff55);
}

.screen {
  background-blend-mode: screen;
}

.overlay {
  background-blend-mode: overlay;
}

.difference {
  background-blend-mode: difference;
}

使用徑向漸變

徑向漸變與線性漸變相似，不同之處在於它們從中心點向外輻射。你可以指定該中心點的位置。你還可以使它們呈圓形或橢圓形。

基本徑向漸變

與線性漸變一樣，建立徑向漸變所需的只是兩種顏色。預設情況下，漸變中心位於 50% 50% 標記處，漸變為橢圓形，匹配其框的縱橫比。

<div class="simple-radial"></div>

div {
  width: 240px;
  height: 120px;
}

css

.simple-radial {
  background: radial-gradient(red, blue);
}

定位徑向顏色停止點

同樣像線性漸變一樣，你可以使用百分比或絕對長度來定位每個徑向顏色停止點。

<div class="radial-gradient"></div>

div {
  width: 120px;
  height: 120px;
}

css

.radial-gradient {
  background: radial-gradient(red 10px, yellow 30%, dodgerblue 50%);
}

定位漸變中心

你可以使用關鍵詞、百分比或絕對長度來定位漸變中心，如果只存在一個值，則長度和百分比值會重複，否則按從左到右和從上到下的順序排列。

<div class="radial-gradient"></div>

div {
  width: 120px;
  height: 240px;
}

css

.radial-gradient {
  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, dodgerblue 50%);
}

調整徑向漸變的大小

與線性漸變不同，你可以指定徑向漸變的大小。可能的值包括 closest-corner、closest-side、farthest-corner 和 farthest-side，其中 farthest-corner 是預設值。圓形也可以用長度調整大小，橢圓形可以用長度或百分比調整大小。

示例：橢圓的 `closest-side`

此示例使用 closest-side 大小值，這意味著大小由從起始點（中心）到包含框最近側的距離設定。

<div class="radial-ellipse-side"></div>

div {
  width: 240px;
  height: 100px;
}

css

.radial-ellipse-side {
  background: radial-gradient(
    ellipse closest-side,
    red,
    yellow 10%,
    dodgerblue 50%,
    beige
  );
}

示例：橢圓的 `farthest-corner`

此示例與上一個示例類似，不同之處在於其大小指定為 farthest-corner，它透過從起始點到包含框中離起始點最遠的角的距離來設定漸變的大小。

<div class="radial-ellipse-far"></div>

div {
  width: 240px;
  height: 100px;
}

css

.radial-ellipse-far {
  background: radial-gradient(
    ellipse farthest-corner at 90% 90%,
    red,
    yellow 10%,
    dodgerblue 50%,
    beige
  );
}

示例：圓的 `closest-side`

此示例使用 closest-side，這使得圓的半徑是漸變中心與最近側之間的距離。在這種情況下，半徑是中心與底部邊緣之間的距離，因為漸變位於左側 25% 和底部 25% 處，並且 div 元素的高度小於寬度。

<div class="radial-circle-close"></div>

div {
  width: 240px;
  height: 120px;
}

css

.radial-circle-close {
  background: radial-gradient(
    circle closest-side at 25% 75%,
    red,
    yellow 10%,
    dodgerblue 50%,
    beige
  );
}

示例：橢圓的長度或百分比

僅對於橢圓，你可以使用長度或百分比來調整橢圓的大小。第一個值表示水平半徑，第二個值表示垂直半徑，如果你使用百分比，則這對應於該維度中框的大小。在下面的示例中，我使用了水平半徑的百分比。

<div class="radial-ellipse-size"></div>

div {
  width: 240px;
  height: 120px;
}

css

.radial-ellipse-size {
  background: radial-gradient(
    ellipse 50% 50px,
    red,
    yellow 10%,
    dodgerblue 50%,
    beige
  );
}

示例：圓的長度

對於圓形，大小可以指定為 <length>，即圓形的大小。

<div class="radial-circle-size"></div>

div {
  width: 240px;
  height: 120px;
}

css

.radial-circle-size {
  background: radial-gradient(
    circle 50px,
    red,
    yellow 10%,
    dodgerblue 50%,
    beige
  );
}

堆疊徑向漸變

就像線性漸變一樣，你也可以堆疊徑向漸變。第一個指定的在頂部，最後一個在底部。

<div class="stacked-radial"></div>

div {
  width: 200px;
  height: 200px;
}

css

.stacked-radial {
  background:
    radial-gradient(circle at 50% 0, rgb(255 0 0 / 50%), transparent 70.71%),
    radial-gradient(circle at 6.7% 75%, rgb(0 0 255 / 50%), transparent 70.71%),
    radial-gradient(circle at 93.3% 75%, rgb(0 255 0 / 50%), transparent 70.71%)
      beige;
  border-radius: 50%;
}

使用圓錐漸變

conic-gradient() CSS 函式建立一個影像，該影像由顏色圍繞中心點旋轉（而不是從中心輻射）的漸變組成。圓錐漸變示例包括餅圖和色輪，但它們也可用於建立棋盤和其他有趣的效果。

圓錐漸變語法類似於徑向漸變語法，但顏色停止點放置在漸變弧（圓的周長）周圍，而不是從漸變中心發出的漸變線上，並且顏色停止點是百分比或度數：絕對長度無效。

在徑向漸變中，顏色從橢圓中心向外，向所有方向過渡。對於圓錐漸變，顏色像繞圓心旋轉一樣過渡，從頂部開始並順時針旋轉。類似於徑向漸變，你可以定位漸變的中心。類似於線性漸變，你可以改變漸變角度。

一個基本的圓錐漸變

與線性漸變和徑向漸變一樣，建立圓錐漸變所需的只是兩種顏色。預設情況下，漸變中心位於 50% 50% 標記處，漸變起點朝上。

<div class="simple-conic"></div>

div {
  width: 120px;
  height: 120px;
}

css

.simple-conic {
  background: conic-gradient(red, blue);
}

定位錐形中心

與徑向漸變一樣，你可以使用關鍵詞、百分比或絕對長度，並使用“at”關鍵詞來定位錐形漸變的中心。

<div class="conic-gradient"></div>

div {
  width: 120px;
  height: 120px;
}

css

.conic-gradient {
  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, dodgerblue 50%);
}

改變角度

預設情況下，你指定的不同顏色停止點在圓周上等距分佈。你可以使用開頭處的“from”關鍵詞後跟一個角度或長度來定位圓錐漸變的起始角度，並且可以透過在顏色停止點後面包含一個角度或長度來指定它們的不同位置。

<div class="conic-gradient"></div>

div {
  width: 120px;
  height: 120px;
}

css

.conic-gradient {
  background: conic-gradient(from 45deg, red, orange 50%, yellow 85%, green);
}

使用重複漸變

linear-gradient()、radial-gradient() 和 conic-gradient() 函式不支援自動重複顏色停止點。但是，可以使用 repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient() 函式來提供此功能。

重複的漸變線或弧的大小是第一個顏色停止點值和最後一個顏色停止點長度值之間的長度。如果第一個顏色停止點只有顏色而沒有顏色停止點長度，則該值預設為 0。如果最後一個顏色停止點只有顏色而沒有顏色停止點長度，則該值預設為 100%。如果兩者都未宣告，則漸變線為 100%，這意味著線性漸變和圓錐漸變不會重複，徑向漸變僅在漸變半徑小於漸變中心與最遠角之間的長度時重複。如果聲明瞭第一個顏色停止點，並且該值大於 0，則漸變將重複，因為線或弧的大小是第一個顏色停止點和最後一個顏色停止點之間的差值小於 100% 或 360 度。

重複線性漸變

此示例使用 repeating-linear-gradient() 建立一個沿直線重複進行漸變的漸變。隨著漸變重複，顏色會再次迴圈。在此示例中，漸變線長 10 畫素。

<div class="repeating-linear"></div>

div {
  width: 120px;
  height: 120px;
}

css

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

多重重複線性漸變

與常規線性漸變和徑向漸變類似，你可以包含多個漸變，一個在另一個之上。這隻有在漸變部分透明允許後續漸變透過透明區域顯示時才有意義，或者如果你為每個漸變影像包含不同的 background-sizes，可選地使用不同的 background-position 屬性值。我們正在使用透明度。

在此示例中，漸變線長 300 畫素、230 畫素和 300 畫素。

<div class="multi-repeating-linear"></div>

div {
  width: 600px;
  height: 400px;
}

css

.multi-repeating-linear {
  background:
    repeating-linear-gradient(
      190deg,
      rgb(255 0 0 / 50%) 40px,
      rgb(255 153 0 / 50%) 80px,
      rgb(255 255 0 / 50%) 120px,
      rgb(0 255 0 / 50%) 160px,
      rgb(0 0 255 / 50%) 200px,
      rgb(75 0 130 / 50%) 240px,
      rgb(238 130 238 / 50%) 280px,
      rgb(255 0 0 / 50%) 300px
    ),
    repeating-linear-gradient(
      -190deg,
      rgb(255 0 0 / 50%) 30px,
      rgb(255 153 0 / 50%) 60px,
      rgb(255 255 0 / 50%) 90px,
      rgb(0 255 0 / 50%) 120px,
      rgb(0 0 255 / 50%) 150px,
      rgb(75 0 130 / 50%) 180px,
      rgb(238 130 238 / 50%) 210px,
      rgb(255 0 0 / 50%) 230px
    ),
    repeating-linear-gradient(
      23deg,
      red 50px,
      orange 100px,
      yellow 150px,
      green 200px,
      blue 250px,
      indigo 300px,
      violet 350px,
      red 370px
    );
}

格子漸變

要建立格子，我們包含幾個帶有透明度的重疊漸變。在第一個背景宣告中，我們分別列出了每個顏色停止點。第二個背景屬性宣告使用多位置顏色停止點語法。

<div class="plaid-gradient"></div>

div {
  width: 200px;
  height: 200px;
}

css

.plaid-gradient {
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 50px,
      rgb(255 127 0 / 25%) 50px,
      rgb(255 127 0 / 25%) 56px,
      transparent 56px,
      transparent 63px,
      rgb(255 127 0 / 25%) 63px,
      rgb(255 127 0 / 25%) 69px,
      transparent 69px,
      transparent 116px,
      rgb(255 206 0 / 25%) 116px,
      rgb(255 206 0 / 25%) 166px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 50px,
      rgb(255 127 0 / 25%) 50px,
      rgb(255 127 0 / 25%) 56px,
      transparent 56px,
      transparent 63px,
      rgb(255 127 0 / 25%) 63px,
      rgb(255 127 0 / 25%) 69px,
      transparent 69px,
      transparent 116px,
      rgb(255 206 0 / 25%) 116px,
      rgb(255 206 0 / 25%) 166px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 5px,
      rgb(143 77 63 / 25%) 5px,
      rgb(143 77 63 / 25%) 10px
    ),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 5px,
      rgb(143 77 63 / 25%) 5px,
      rgb(143 77 63 / 25%) 10px
    );

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 50px,
      rgb(255 127 0 / 25%) 50px 56px,
      transparent 56px 63px,
      rgb(255 127 0 / 25%) 63px 69px,
      transparent 69px 116px,
      rgb(255 206 0 / 25%) 116px 166px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 50px,
      rgb(255 127 0 / 25%) 50px 56px,
      transparent 56px 63px,
      rgb(255 127 0 / 25%) 63px 69px,
      transparent 69px 116px,
      rgb(255 206 0 / 25%) 116px 166px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0 5px,
      rgb(143 77 63 / 25%) 5px 10px
    ),
    repeating-linear-gradient(
      45deg,
      transparent 0 5px,
      rgb(143 77 63 / 25%) 5px 10px
    );
}

重複徑向漸變

此示例使用 repeating-radial-gradient() 建立一個從中心點重複輻射的漸變。隨著漸變重複，顏色會一次又一次地迴圈。

<div class="repeating-radial"></div>

div {
  width: 120px;
  height: 120px;
}

css

.repeating-radial {
  background: repeating-radial-gradient(
    black,
    black 5px,
    white 5px,
    white 10px
  );
}

多重重複徑向漸變

<div class="multi-target"></div>

div {
  width: 250px;
  height: 150px;
}

css

.multi-target {
  background:
    repeating-radial-gradient(
        ellipse at 80% 50%,
        rgb(0 0 0 / 50%),
        rgb(0 0 0 / 50%) 15px,
        rgb(255 255 255 / 50%) 15px,
        rgb(255 255 255 / 50%) 30px
      )
      top left no-repeat,
    repeating-radial-gradient(
        ellipse at 20% 50%,
        rgb(0 0 0 / 50%),
        rgb(0 0 0 / 50%) 10px,
        rgb(255 255 255 / 50%) 10px,
        rgb(255 255 255 / 50%) 20px
      )
      top left no-repeat yellow;
  background-size:
    200px 200px,
    150px 150px;
}

重複圓錐漸變

此示例使用 repeating-conic-gradient() 建立一個圍繞中心點重複旋轉的漸變。在此示例中，宣告的顏色停止點重複四次。

<div class="repeating-conic"></div>

div {
  width: 120px;
  height: 120px;
}

css

.repeating-conic {
  background: repeating-conic-gradient(
    #66ccff 0% 8.25%,
    #6633ff 8.25% 16.5%,
    #ff3399 16.5% 25%
  );
}

多重重複圓錐漸變

就像線性漸變和徑向重複漸變一樣，你可以將多個圓錐漸變堆疊在一起，透過使用不同的 at <position> 值使圓錐漸變不在其中心重疊，以及不同的 from <angle> 值使重複效果不排成一線，從而建立有趣的效果。此示例重疊了三個半透明的重複徑向漸變，每個漸變都重複其配色方案四次。要使重疊漸變可見，你需要確保堆疊頂部漸變的顏色部分透明，或使用 background-blend-mode CSS 屬性。

<div class="multi-repeating-conic"></div>

div {
  width: 250px;
  height: 250px;
}

css

.multi-repeating-conic {
  background:
    repeating-conic-gradient(
      from 0deg at 80% 50%,
      #5691f580 0% 8.25%,
      #b338ff80 8.25% 16.5%,
      #f8305880 16.5% 25%
    ),
    repeating-conic-gradient(
      from 15deg at 50% 50%,
      #e856f580 0% 8.25%,
      #ff384c80 8.25% 16.5%,
      #e7f83080 16.5% 25%
    ),
    repeating-conic-gradient(
      from 0deg at 20% 50%,
      #f58356ff 0% 8.25%,
      #caff38ff 8.25% 16.5%,
      #30f88aff 16.5% 25%
    );
}