この翻訳は不完全です。英語から この記事を翻訳 してください。

conic-gradient()CSS の関数で、中心から広がるのではなく、中心点の周りを回りながら色が変化する放射グラデーションから成る画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがあります。 conic-gradient() 関数の結果は <gradient> データ型のオブジェクトであり、これは <image> の特殊型です。

他のグラデーションと同様、扇形グラデーションは固有の寸法を持ちません。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。固有の寸法は適用先の要素の寸法、または要素の寸法以外で設定された <image> の寸法に一致します。

繰り返して360度の回転を埋める扇形グラデーションを生成するには、代わりに repeating-conic-gradient 関数を使用してください。

<gradient><image> データ型に属するため、 <image> が使用できるところでしか使用できません。このため、 conic-gradient()background-color や、その他の <color> データ型を使用するプロパティでは動作しません。

なぜ "conical" (円錐の) グラデーションと呼ばれるのか。色経由点が一方よりもう一方が明るい場合、上から見た円錐のように見えるからです。

扇型グラデーションの理解

扇形グラデーションは放射グラデーションの構文と似ていますが、色経由点はグラデーションの中心から現れるグラデーションライン上ではなく、グラデーションアーク、すなわち円周上に配置されます。扇形グラデーションでは、色の遷移は円の中心を回るように、上から始まって時計回りに行われます。放射グラデーションでは、色の遷移は楕円の中心から外に向けて、すべての方向に行われます。

扇形グラデーションの円周と放射グラデーションの軸に沿った色経由点

A conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops. Unlike linear and radial gradients, whose color-stops are placed by specifying a length, the color-stops of a conic gradient are specified with an angle. Units include deg, for degrees, grad for gradients, rad for radians, and turn for turns. There are 360 degrees, 400 gradians, two radians and one turn in a circle. Browsers supporting conic gradients also accept percent values, with 100% equalling 360 degrees, but this is not in the specification.

Similar to radial gradients, the conical gradient syntax provides for positioning the center of the gradient anywhere within, or even outside, the image. The values for the position are similar to the syntax for 2-value background-position.

The gradient arc is the circumference of the gradient. The starting point of the gradient or arc is north, or 12:00pm. The gradient is then rotated by the from angle. The colors of the gradient are determined by the angled color stops, their starting points, ending points, and, in between, and optional angled color-stop points. The transitions between colors can be altered with color hints between adjacent colors' color stops.

グラデーションのカスタマイズ

By adding more angled color-stop points on the gradient arc, you can create a highly customized transition between multiple colors. A color-stop's position can be explicitly defined by using an <angle>. If you don't specify the location of a color stop, it is placed halfway between the one that precedes it and the one that follows it. If you don't specify an angle for the first or last color stop, their values are 0deg and 360deg respectively. The following two gradients are equivalent

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

By default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition. You can move this color transition midpoint to anypoint between two color stops by adding a color hint, indicating where the middle of the color transtion should be. The following is solid red from the start to the 10% mark, transitions from red to blue over 80% of the turn, with the final 10% being solid blue. The midpoint of the red to blue gradient change, however, is at the 20% mark rather than the 50% mark as would have happened without the 80grad, or 20%, color hint.

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

If two or more color stops are at the same location, the transition will be a hard line between the first and last colors declared at that location. To use conic gradients to create pie charts --- which is NOT the correct way to create pie charts as background images are not accessible -- use hard color stops, where the color stop angles for two adjacent color stops are the same. The easiest way to do this is to use multip position colors stops. The following two declarations are equivalent:

conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn);
conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn);

Color stops should be listed in ascending order. Subsequent color stops of lower value will override the value of the previous color stop creating a hard transition. The following changes from red to yellow at the 30% mark, and then transitions from yellow to blue over 35% of the gradient

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

There are other effects you can create with conic gradients. Oddly, a checkboard is one of them. By creating quandrants with an upper left and lower right white quandrant and lower left and upper right black quandrants, then repeating the gradient 16 times (four times across and four times down) you can make a checkerboard.

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

And, yes, you can mix and match different angle units, but don't. The above is hard to read.

構文

/* 45度回転した扇形グラデーション、
   青で始まり赤で終わる */
conic-gradient(from 45deg, blue, red);

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

/* 色相環 */
background: 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>
Preceeded by the from keyterm, and taking an angle as it's value, defined the gradient rotation in clockwise direction.
<position>
Using the same length, order and keyterm values as the background-position property, the position defines center of the gradient. If omitted, the default value is center, meaing the gradient will be centered, .
<angular-color-stop>
A color-stop's <color> value, followed by one or two optional stop positions, (an <angle> along the gradient's circumfrence axis).
<color-hint>
Th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

Note: Rendering of color stops in CSS gradients follows the same rules as color stops in SVG gradients.

形式文法

conic-gradient(
  [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
  \---------------------------------/ \----------------------------/
        Gradient definition                List of color stops

where <angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>
  and <angular-color-stop> = <color> && <color-stop-angle>?
  and <angular-color-hint> = <angle-percentage>
  and <color-stop-angle> = <angle-percentage>{1,2}

40度のグラデーション

div {
  background-image:
     conic-gradient(from 40deg, #fff, #000);
}

中心をずらしたグラデーション

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

グラデーションの円グラフ

This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.

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

Checkerboard

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

メモ: 他の例は CSS グラデーションの使用 をご覧ください。

アクセシビリティの考慮事項

Assistive technology cannot parse background images. While it is possible to create pie charts, checkerboards, and other effects with conic gradients, CSS images are not accessible, and therefore the image represented by the conic gradient will not be accessible. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

仕様書

仕様書 状態 備考
CSS Images Module Level 4
conic-gradient() の定義
草案  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
conic-gradient()Chrome 完全対応 69
完全対応 69
完全対応 59
無効
無効 From version 59: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 56Safari 完全対応 12.1WebView Android 完全対応 69
完全対応 69
完全対応 59
無効
無効 From version 59: this feature is behind the Enable Experimental Web Platform Features preference.
Chrome Android 完全対応 69
完全対応 69
完全対応 59
無効
無効 From version 59: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android 未対応 なしOpera Android 完全対応 48Safari iOS 完全対応 12.2Samsung Internet Android 未対応 なし
Double-position color stopsChrome 完全対応 72Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 完全対応 12.1WebView Android 完全対応 72Chrome Android 完全対応 72Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 完全対応 12.2Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09
最終更新者: mdnwebdocs-bot,