conic-gradient()

試一試

background: conic-gradient(red, orange, yellow, green, blue);

background: conic-gradient(
  from 0.25turn at 50% 30%,
  #f69d3c,
  10deg,
  #3f87a6,
  350deg,
  #ebf8e1
);

background: conic-gradient(from 3.1416rad at 10% 50%, #e66465, #9198e5);

background: conic-gradient(
  red 6deg,
  orange 6deg 18deg,
  yellow 18deg 45deg,
  green 45deg 110deg,
  blue 110deg 200deg,
  purple 200deg
);

<section class="display-block" id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  min-height: 100%;
}

語法

/* A gradient with a single color of red */
conic-gradient(red)

/* A conic gradient rotated 45 degrees,
   starting blue and finishing red */
conic-gradient(from 45deg, blue, red)

/* A bluish purple box: the gradient goes from blue to red,
   but only the bottom right quadrant is visible, as the
   center of the conic gradient is at the top left corner */
conic-gradient(from 90deg at 0 0, blue, red)

/* Interpolation in polar color space
  with longer hue interpolation method */
conic-gradient(in hsl longer hue, red, blue, green, red)

/* Color wheel */
conic-gradient(
  hsl(360 100% 50%),
  hsl(315 100% 50%),
  hsl(270 100% 50%),
  hsl(225 100% 50%),
  hsl(180 100% 50%),
  hsl(135 100% 50%),
  hsl(90 100% 50%),
  hsl(45 100% 50%),
  hsl(0 100% 50%)
)

值

<angle>

在 from 關鍵字之後，接受一個角度值，用以定義漸變順時針旋轉的角度。

<position>

position 值使用與 background-position 屬性相同的長度、順序和關鍵字值，用於定義漸變的中心。如果未指定，position 的預設值為 center，表示漸變將居中。

<angular-color-stop>

一個色標的 <color> 值，後面可以跟一到兩個可選的位置（沿漸變圓周軸的 <angle>）。

<color-hint>

一個插值提示，用於定義漸變在相鄰色標之間的過渡方式。該長度定義了在兩個色標之間的哪個點，漸變色應達到顏色過渡的中點。如果省略，顏色過渡的中點將是兩個色標之間的中點。

描述

與任何漸變一樣，錐形漸變沒有內在尺寸；也就是說，它沒有自然或首選的尺寸，也沒有首選的比例。它的具體尺寸將與應用它的元素尺寸相匹配，或者如果它被設定為除元素尺寸之外的其他值，則與 <image> 的尺寸相匹配。

要建立一個重複以填充 360 度旋轉的錐形漸變，請改用 repeating-conic-gradient() 函式。

因為 <gradient> 屬於 <image> 資料型別，所以它們只能在可以使用 <image> 的地方使用。因此，conic-gradient() 對 background-color 和其他使用 <color> 資料型別的屬性無效。

錐形漸變的構成

錐形漸變的語法類似於徑向漸變，但色標是放置在漸變弧（圓的周長）周圍，而不是從漸變中心發出的漸變線上。對於錐形漸變，顏色過渡就像圍繞圓心旋轉一樣，從頂部開始順時針進行。而在徑向漸變中，顏色是從橢圓中心向外，向所有方向過渡。

錐形漸變透過指定一個旋轉角度、漸變中心，然後指定一系列色標來定義。與線性和徑向漸變透過指定 <length> 來放置色標不同，錐形漸變的色標是用角度指定的。單位包括 deg（度）、grad（百分度）、rad（弧度）和 turn（圈）。一個圓有 360 度、400 百分度、2π 弧度和 1 圈。支援錐形漸變的瀏覽器也接受百分比值，其中 100% 等於 360 度，但這不在規範中。

與徑向漸變類似，錐形漸變語法允許將漸變中心定位在影像內的任何位置，甚至在影像外部。位置的值類似於雙值 background-position 的語法。

漸變弧是漸變的周長。漸變或弧線的起始點是正北，即 12 點鐘方向。然後漸變會按 from 角度旋轉。漸變的顏色由帶角度的色標決定，包括它們的起點、終點，以及中間可選的帶角度的色標點。顏色之間的過渡可以透過在相鄰顏色的色標之間新增顏色提示來改變。

自定義漸變

透過在漸變弧上新增更多帶角度的色標點，你可以在多種顏色之間建立高度定製的過渡。色標的位置可以透過使用 <angle> 來明確定義。如果你不指定色標的位置，它將被放置在前一個和後一個色標的中間。如果你不為第一個或最後一個色標指定角度，它們的值將分別為 0deg 和 360deg。以下兩個漸變是等效的。

conic-gradient(red, orange, yellow, green, blue);
conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);

預設情況下，顏色從一個色標的顏色平滑過渡到下一個色標的顏色，顏色之間的中點是顏色過渡的中間點。你可以透過新增顏色提示，將這個顏色過渡的中點移動到兩個色標之間的任何點，以指示顏色過渡的中間應該在哪裡。以下示例從開始到 10% 標記處是純紅色，在 80% 的旋轉範圍內從紅色過渡到藍色，最後 10% 是純藍色。然而，紅到藍漸變變化的中點在 20% 標記處，而不是在 50% 標記處，如果沒有 80grad（即 20%）的顏色提示，就會是後者。

conic-gradient(red 40grad, 80grad, blue 360grad);

如果兩個或多個色標在同一位置，過渡將是在該位置宣告的第一個和最後一個顏色之間的硬線。要使用錐形漸變建立餅圖（這不是建立餅圖的正確方法，因為背景影像是不可訪問的），請使用硬色標，即兩個相鄰色標的色標角度相同。最簡單的方法是使用多位置色標。以下兩個宣告是等效的。

conic-gradient(white 0.09turn, #bbbbbb 0.09turn, #bbbbbb 0.27turn, #666666 0.27turn, #666666 0.54turn, black 0.54turn);
conic-gradient(white 0turn 0.09turn, #bbbbbb 0.09turn 0.27turn, #666666 0.27turn 0.54turn, black 0.54turn 1turn);

色標應按升序排列。後續值較小的色標將覆蓋前一個色標的值，從而產生硬過渡。以下示例在 30% 標記處從紅色變為黃色，然後在 35% 的漸變範圍內從黃色過渡到藍色。

conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);

你還可以用錐形漸變建立其他效果。奇怪的是，棋盤格就是其中之一。透過建立左上和右下為白色象限、左下和右上為黑色象限的象限，然後將漸變重複 16 次（橫向四次，縱向四次），就可以製作出一個棋盤格。

conic-gradient(white 90deg, black 0.25turn 0.5turn, white 1rad 1.5rad, black 300grad);
background-size: 25% 25%;

而且，是的，你可以混合使用不同的角度單位，但不要這樣做。上面的例子很難閱讀。

正式語法

<conic-gradient()> = 
  conic-gradient( [ <conic-gradient-syntax> ] )  

<conic-gradient-syntax> = 
  [ [ [ from [ <angle> | <zero> ] ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <angular-color-stop-list>  

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]  

<angular-color-stop-list> = 
  <angular-color-stop> , [ <angular-color-hint>? , <angular-color-stop> ]#?  

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

<rectangular-color-space> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  lab                |
  oklab              |
  <xyz-space>        

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<custom-color-space> = 
  <dashed-ident>  

<angular-color-stop> = 
  <color> <color-stop-angle>?  

<angular-color-hint> = 
  <angle-percentage>  |
  <zero>              

<length-percentage> = 
  <length>      |
  <percentage>  

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

<color-stop-angle> = 
  [ <angle-percentage> | <zero> ]{1,2}  

<angle-percentage> = 
  <angle>       |
  <percentage>  

無障礙

瀏覽器不會向輔助技術提供有關背景影像的任何特殊資訊。這主要對螢幕閱讀器很重要，因為螢幕閱讀器不會宣告其存在，因此不會向用戶傳達任何資訊。雖然可以使用錐形漸變建立餅圖、棋盤格和其他效果，但 CSS 影像沒有提供分配替代文字的原生方法，因此錐形漸變表示的影像對螢幕閱讀器使用者是不可訪問的。如果影像包含對理解頁面整體目的至關重要的資訊，最好在文件中以語義化的方式描述它。

• MDN 理解 WCAG，指南 1.1 解釋
• 理解成功標準 1.1.1 | W3C 理解 WCAG 2.0

示例

40 度角的漸變

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

<div></div>

div {
  background-image: conic-gradient(from 40deg, white, black);
}

偏心漸變

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

<div></div>

div {
  background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);
}

漸變餅圖

此示例使用多位置色標，相鄰顏色具有相同的色標值，從而建立條紋效果。

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

<div></div>

div {
  background: conic-gradient(red 36deg, orange 36deg 170deg, yellow 170deg);
  border-radius: 50%;
}

棋盤格

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

<div></div>

div {
  background: conic-gradient(
      white 0.25turn,
      black 0.25turn 0.5turn,
      white 0.5turn 0.75turn,
      black 0.75turn
    )
    top left / 25% 25% repeat;
  border: 1px solid;
}

色相插值

<div class="shorter"></div>
<div class="longer"></div>

div {
  display: inline-block;
  margin-top: 1rem;
  width: 45vw;
  height: 80vh;
}

.shorter::before {
  content: "shorter hue";
  display: block;
  margin-top: -1rem;
}

.longer::before {
  content: "longer hue";
  display: block;
  margin-top: -1rem;
}

在此示例中，使用了 hsl 顏色系統進行插值，並對色相進行了插值。

.shorter {
  background-image: conic-gradient(in hsl shorter hue, red, blue);
}

.longer {
  background-image: conic-gradient(in hsl longer hue, red, blue);
}

左邊的框使用較短插值，意味著顏色使用色輪上的較短弧線直接從紅色變為藍色。右邊的框使用較長插值，意味著顏色使用較長弧線從紅色變為藍色，經過綠色、黃色和橙色。

更多錐形漸變示例

請參閱使用 CSS 漸變瞭解更多示例。

規範

瀏覽器相容性

另見

• 使用 CSS 漸變
• 其他漸變函式：repeating-conic-gradient()、linear-gradient()、repeating-linear-gradient()、radial-gradient()、repeating-radial-gradient()
• <hue-interpolation-method>
• <color-interpolation-method>
• <image>
• image()
• element()
• image-set()
• cross-fade()