conic-gradient()

この記事は翻訳が完了していません。 この記事の翻訳にご協力ください

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

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

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

g

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

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

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

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

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

扇形グラデーションは、回転角度とグラデーションの中心を指定し、色停止点のリストを指定して指定します。長さを指定して色停止点を配置する線形グラデーションや放射グラデーションとは異なり、扇形グラデーションの色停止点は角度を指定します。単位にはを表す deg、グラデーションを表す grad、ラジアンを表す rad、回転数を表す turn があります。1つの円は360度、400グラデーション、2πラジアン、1回転になります。扇形グラデーションに対応しているブラウザーはパーセント値も受け付けており、100%は360度に相当しますが、これは仕様にはありません。

放射グラデーションと同様に、扇形グラデーションの構文では、グラデーションの中心を画像内のどこにでも、あるいは画像の外側にでも配置することができます。位置の値は、 2 値の背景位置の構文に似ています。

グラデーション円弧は、グラデーションのの円周です。グラデーションまたは円弧の始点は北、つまり12時の方向です。そして、グラデーションは from の角度だけ回転します。グラデーションの色は、角度のついた色停止点、それらの開始点、終了点、および、その間、および、任意の角度のついた色停止点によって決定されます。色間の遷移は、隣接する色の色停止点の間のカラーヒントで変更することができます。

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

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 any point between two color stops by adding a color hint, indicating where the middle of the color transition 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 checkerboard is one of them. By creating quadrants with an upper left and lower right white quadrant and lower left and upper right black quadrants, 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 quadrant 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>
Preceded by the from keyterm, and taking an angle as its value, defines 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 circumference 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 グラデーションの使用 をご覧ください。

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

Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. While it is possible to create pie charts, checkerboards, and other effects with conic gradients, CSS images provide no native way to assign alternative text, and therefore the image represented by the conic gradient will not be accessible to screen reader users. 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 完全対応 79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 56
完全対応 56
完全対応 46
無効
無効 From version 46: this feature is behind the Enable Experimental Web Platform Features preference.
Safari 完全対応 12.1WebView Android 完全対応 69Chrome 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 完全対応 48
完全対応 48
完全対応 43
無効
無効 From version 43: this feature is behind the Enable Experimental Web Platform Features preference.
Safari iOS 完全対応 12.2Samsung Internet Android 完全対応 10.0
Double-position color stopsChrome 完全対応 72Edge 完全対応 79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 60Safari 完全対応 12.1WebView Android 完全対応 72Chrome Android 完全対応 72Firefox Android 未対応 なしOpera Android 完全対応 51Safari iOS 完全対応 12.2Samsung Internet Android 完全対応 11.0

凡例

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

関連情報