path: root/files/ja/orphaned/web/css/conic-gradient()/index.html

---
title: conic-gradient()
slug: orphaned/Web/CSS/conic-gradient()
tags:
  - CSS
  - CSS 画像
  - CSS 関数
  - Reference
  - ウェブ
  - グラデーション
  - グラフィック
  - レイアウト
translation_of: Web/CSS/conic-gradient()
original_slug: Web/CSS/conic-gradient()
---
<div>{{CSSRef}}</div>

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

<div>{{EmbedInteractiveExample("pages/css/function-conic-gradient.html")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<p>他のグラデーションと同様、扇形グラデーションは<a href="/ja/docs/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。固有の寸法は適用先の要素の寸法、または要素の寸法以外で設定された <code>&lt;image&gt;</code> の寸法に一致します。</p>

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

<p>g</p>

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

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

<h2 id="Understanding_conic_gradients" name="Understanding_conic_gradients">扇型グラデーションの理解</h2>

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

<p><img alt="扇形グラデーションの円周と放射グラデーションの軸に沿った色経由点" src="https://mdn.mozillademos.org/files/16361/Screenshot_2018-11-29_21.09.19.png" style="height: 258px; width: 515px;"></p>

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

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

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

<h3 id="Customizing_gradients" name="Customizing_gradients">グラデーションのカスタマイズ</h3>

<p>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 {{CSSxRef("&lt;angle&gt;")}}. 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</p>

<pre class="brush: css notranslate">conic-gradient(red, orange, yellow, green, blue);
conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);</pre>

<p>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.</p>

<pre class="brush: css notranslate">conic-gradient(red 40grad, 80grad, blue 360grad);</pre>

<p>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:</p>

<pre class="brush: css notranslate">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);</pre>

<p>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</p>

<pre class="brush: css notranslate">conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);
</pre>

<p>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.</p>

<pre class="brush: css notranslate">conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad);
background-size: 25% 25%;
</pre>

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

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="language-css notranslate" id="css">/* 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%)
);</pre>

<h3 id="Values" name="Values">値</h3>

<dl>
 <dt>{{CSSxRef("&lt;angle&gt;")}}</dt>
 <dd>Preceded by the <code>from</code> keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.</dd>
 <dt><code>&lt;position&gt;</code></dt>
 <dd>Using the same length, order and keyterm values as the <a href="/en-US/docs/Web/CSS/background-position">background-position</a> property, the position defines center of the gradient. If omitted, the default value is <code>center</code>, meaing the gradient will be centered, .</dd>
 <dt><code>&lt;angular-color-stop&gt;</code></dt>
 <dd>A color-stop's {{CSSxRef("&lt;color&gt;")}} value, followed by one or two optional stop positions, (an {{CSSxRef("&lt;angle&gt;")}} along the gradient's circumference axis).</dd>
 <dt><code>&lt;color-hint&gt;</code></dt>
 <dd>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.</dd>
 <dd>
 <div class="note">
 <p><strong>Note:</strong> Rendering of <a href="#Gradient_with_multiple_color_stops">color stops in CSS gradients</a> follows the same rules as color stops in <a href="/en-US/docs/Web/SVG/Tutorial/Gradients">SVG gradients</a>.</p>
 </div>
 </dd>
</dl>

<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>

<pre class="syntaxbox notranslate">conic-gradient(
  [ from &lt;angle&gt; ]? [ at &lt;position&gt; ]?, &lt;angular-color-stop-list&gt; )
  \---------------------------------/ \----------------------------/
        Gradient definition                List of color stops

where &lt;angular-color-stop-list&gt; = [ &lt;angular-color-stop&gt; [, &lt;angular-color-hint&gt;]? ]# , &lt;angular-color-stop&gt;
  and &lt;angular-color-stop&gt; = &lt;color&gt; &amp;&amp; &lt;color-stop-angle&gt;?
  and &lt;angular-color-hint&gt; = &lt;angle-percentage&gt;
  and &lt;color-stop-angle&gt; = &lt;angle-percentage&gt;{1,2}</pre>

<h2 id="Examples" name="Examples">例</h2>

<div>
<h3 id="Gradient_at_a_40-degrees" name="Gradient_at_a_40-degrees">40度のグラデーション</h3>

<div class="hidden">
<pre class="brush: css notranslate">div {
  width: 100px;
  height: 100px;
}</pre>

<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
</pre>
</div>

<pre class="brush: css notranslate">div {
  background-image:
     conic-gradient(from 40deg, #fff, #000);
}
</pre>

<p>{{EmbedLiveSample("Gradient_at_40-degrees", 120, 120)}}</p>
</div>

<div>
<h3 id="Off-centered_gradient" name="Off-centered_gradient">中心をずらしたグラデーション</h3>

<div class="hidden">
<pre class="brush: css notranslate">div {
  width: 100px;
  height: 100px;
}</pre>

<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
</pre>
</div>

<pre class="brush: css notranslate">div {
  background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);
}</pre>

<p>{{EmbedLiveSample("Off-centered_gradient", 120, 120)}}</p>
</div>

<div>
<h3 id="Gradient_pie-chart" name="Gradient_pie-chart">グラデーションの円グラフ</h3>

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

<div class="hidden">
<pre class="brush: css notranslate">div {
  width: 100px;
  height: 100px;
}</pre>

<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
</pre>
</div>

<pre class="brush: css notranslate">div {
  background: conic-gradient(
     red 36deg, orange 36deg 170deg, yellow 170deg);
  border-radius: 50%
}</pre>

<p>{{EmbedLiveSample("Gradient_pie-chart", 120, 120)}}</p>
</div>

<div>
<h3 id="Checkerboard">Checkerboard</h3>

<div class="hidden">
<pre class="brush: css notranslate">div {
  width: 100px;
  height: 100px;
}</pre>

<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
</pre>
</div>

<pre class="brush: css notranslate">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;
}</pre>

<p>{{EmbedLiveSample("Checkerboard", 120, 120)}}</p>
</div>

<div class="note">
<p><strong>注:</strong> 他の例は <a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a> をご覧ください。</p>
</div>

<h2 id="Acessibility_Concerns" name="Acessibility_Concerns">アクセシビリティの考慮事項</h2>

<p>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.</p>

<ul>
 <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
 <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Images', '#conic-gradients', 'conic-gradient()')}}</td>
   <td>{{Spec2('CSS4 Images')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<div>{{Compat("css.types.image.gradient.conic-gradient")}}</div>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a></li>
 <li>他のグラデーション関数: {{CSSxRef("repeating-conic-gradient")}}, {{CSSxRef("linear-gradient")}}, {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}</li>
 <li>{{cssxref("&lt;image&gt;")}}</li>
 <li>{{cssxref("_image","image()")}}</li>
 <li>{{cssxref("element()")}}</li>
 <li>{{cssxref("image-set","image-set()")}}</li>
 <li>{{cssxref("cross-fade")}}</li>
</ul>