---
title: <gradient>
slug: Web/CSS/gradient
tags:
  - CSS
  - CSS Data Type
  - CSS Images
  - Data Type
  - Graphics
  - Layout
  - Reference
translation_of: Web/CSS/gradient
---
<div>{{CSSRef}}</div>

<p><strong><code>&lt;gradient&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、2色以上の連続的な色の変化で構成される特殊な型の {{cssxref("&lt;image&gt;")}} です。</p>

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

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

<p>CSS グラデーションは<a href="/ja/docs/Web/CSS/image#no_intrinsic">固有の寸法を持ちません</a>。つまり、自然又は推奨される寸法や、推奨される縦横比を持ちません。実際の寸法は適用される要素に一致します。</p>

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

<p><code>&lt;gradient&gt;</code> データ型は、以下のリストにある関数型のうちの一つによって定義します。</p>

<div id="linear-gradient">
<h4 id="Linear_gradient" name="Linear_gradient"><ruby>線形<rp> (</rp><rt>linear</rt><rp>) </rp></ruby>グラデーション</h4>

<p>色が仮想の直線に沿って変化します。 {{cssxref("linear-gradient", "linear-gradient()")}} 関数で生成されます。</p>
</div>

<div id="radial-gradient">
<h4 id="Radial_gradient" name="Radial_gradient"><ruby>放射<rp> (</rp><rt>radical</rt><rp>) </rp></ruby>グラデーション</h4>

<p>色が中央点 (origin) から連続的に変化します。 {{cssxref("radial-gradient", "radial-gradient()")}} 関数で生成されます。</p>
</div>

<div id="repeating-gradient">
<h4 id="Repeating_gradient" name="Repeating_gradient"><ruby>反復<rp> (</rp><rt>repeating</rt><rp>) </rp></ruby>グラデーション</h4>

<p>要素全体を埋めるのに必要なだけ、グラデーションを繰り返します。 {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}} 及び {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}} 関数で生成されます。</p>
</div>

<div id="conic-gradient">
<h4 id="Conic_gradient" name="Conic_gradient"><ruby>扇形<rp> (</rp><rt>conic</rt><rp>) </rp></ruby>グラデーション</h4>

<p>色が円を描くように連続的に変化します。 {{cssxref("conic-gradient", "conic-gradient()")}} 関数で生成されます。</p>
</div>

<h2 id="Interpolation" name="Interpolation">補間</h2>

<p>色に関する他の補間操作と同様、グラデーションはアルファ乗算済み色空間で計算されます。これは、色と透過性が同時に変化するときに、予期しない灰色が現れるのを避けるためです。 (古いブラウザーは、 <a href="/ja/docs/Web/CSS/color_value#transparent_keyword">transparent キーワード</a>を使用するとこれを使用しないことがあるので注意してください。)</p>

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

<h3 id="Linear_gradient_example" name="Linear_gradient_example">線形グラデーションの例</h3>

<p>単純な線形グラデーションです。</p>

<div class="hidden">
<pre class="brush: html notranslate">&lt;div class="linear-gradient"&gt;Linear gradient&lt;/div&gt;
</pre>

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

<pre class="brush: css notranslate">.linear-gradient {
  background: linear-gradient(to right,
      red, orange, yellow, green, blue, indigo, violet);
}</pre>

<p>{{EmbedLiveSample('Linear_gradient_example', 240, 80)}}</p>

<h3 id="Radial_gradient_example" name="Radial_gradient_example">放射グラデーションの例</h3>

<p>単純な放射グラデーションです。</p>

<div class="hidden">
<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;Radial gradient&lt;/div&gt;
</pre>

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

<pre class="brush: css notranslate">.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}
</pre>

<p>{{EmbedLiveSample('Radial_gradient_example', 240, 80)}}</p>

<h3 id="Repeating_gradient_examples" name="Repeating_gradient_examples">反復グラデーションの例</h3>

<p>単純な線形および放射の反復グラデーションの例です。</p>

<div class="hidden">
<pre class="brush: html notranslate">&lt;div class="linear-repeat"&gt;Repeating linear gradient&lt;/div&gt;
&lt;br&gt;
&lt;div class="radial-repeat"&gt;Repeating radial gradient&lt;/div&gt;
</pre>

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

<pre class="brush: css notranslate">.linear-repeat {
  background: repeating-linear-gradient(to top left,
      lightpink, lightpink 5px, white 5px, white 10px);
}

.radial-repeat {
  background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
}</pre>

<p>{{EmbedLiveSample('Repeating_gradient_examples', 240, 180)}}</p>

<h3 id="Conic_gradient_example" name="Conic_gradient_example">扇形グラデーションの例</h3>

<p>単純な扇形グラデーションの例です。なお、まだこれはブラウザーの間で十分に対応されていません。</p>

<div class="hidden">
<pre class="brush: html notranslate">&lt;div class="conic-gradient"&gt;Conic gradient&lt;/div&gt;
</pre>

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

<pre class="brush: css notranslate">.conic-gradient {
  background: conic-gradient(lightpink, white, powderblue);
}
</pre>

<p>{{EmbedLiveSample('Conic_gradient_example', 240, 200)}}</p>

<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', '#gradients', '&lt;gradient&gt;')}}</td>
   <td>{{Spec2('CSS4 Images')}}</td>
   <td>conic-gradient を追加</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Images', '#gradients', '&lt;gradient&gt;')}}</td>
   <td>{{Spec2('CSS3 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")}}</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("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("conic-gradient", "conic-gradient()")}}</li>
 <li><a href="/ja/docs/Web/CSS/CSS_Types">CSS の基本データ型</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 単位と値</a></li>
 <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 入門: 値と単位</a></li>
</ul>