---
title: Verwendung von CSS Farbverläufen
slug: Farbverläufe_in_CSS
tags:
  - Beispiel
  - CSS
  - CSS Bild
  - Guide
  - NeedsLiveSample
  - NeedsUpdate
  - Web
  - erweitert
translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
---
<p><span class="seoSummary"><strong>CSS Farbverläufe</strong> sind neue Typen von {{cssxref("&lt;image&gt;")}}, die durch das <a href="/de/docs/CSS/CSS3" title="CSS3">CSS3</a> Image Module hinzugefügt wurden. Die Verwendung von CSS Farbverläufen erlaubt es, weiche Übergänge zwischen zwei oder mehr angegebenen Farben anzuzeigen.</span> Dies ermöglicht es, Bilder für diese Effekte zu vermeiden, was Downloadzeit und Bandbreitennutzung verringert. Darüber hinaus sehen Objekte besser aus, wenn sie herangezoomt werden, da der Farbverlauf durch den Browser erzeugt wird, sodass das Layout viel flexibler gestaltet werden kann.</p>

<p><span class="seoSummary">Browser unterstützen zwei Arten von Verläufen: <em>lineare</em>, definiert durch die {{cssxref("linear-gradient")}} Funktion, und <em>radiale</em>, definiert durch {{cssxref("radial-gradient")}}.</span></p>

<h2 id="Lineare_Farbverläufe">Lineare Farbverläufe</h2>

<p>Um einen linearen Farbverlauf zu erstellen, wird ein Startpunkt gesetzt und eine Richtung (als Winkel), entlang welcher der Verlaufseffekt angewendet wird. Es werden auch <strong>Farbstopps</strong> definiert. Farbstopps sind die Farben, zwischen denen Gecko weiche Übergänge darstellen soll. Es müssen mindestens zwei angegeben werden, es können jedoch auch mehrere definiert werden, um komplexere Verlaufseffekte zu erzeugen.</p>

<h3 id="Einfache_lineare_Farbverläufe">Einfache lineare Farbverläufe</h3>

<p>Hier ist ein linearer Farbverlauf, der in der Mitte (horizontal) oben (vertikal) mit blau beginnt und in weiß übergeht.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Screenshot</td>
   <td class="header">Livedemo</td>
  </tr>
  <tr>
   <td><img alt="" src="/@api/deki/files/3950/=basic_linear_bluetop.png" style="text-align: center;"></td>
   <td>
    <div style=""> </div>
   </td>
  </tr>
 </tbody>
</table>

<div>
<pre class="brush: css">/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */
background: -<em>prefix</em>-linear-gradient(top, blue, white);

/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1,
   IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */
background: linear-gradient(to bottom, blue, white);
</pre>
</div>

<p>(Siehe die <a href="/de/docs/Web/CSS/linear-gradient#Browser_Kompatibilität">Browser Kompatibilitätstabelle</a> für eine Übersicht der Präfixe, die benötigt werden, um verschiedene Browserversionen zu unterstützen).</p>

<p>Der gleiche Farbverlauf wird geändert, sodass er von links nach rechts verläuft:</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Screenshot</td>
   <td class="header">Livedemo</td>
  </tr>
  <tr>
   <td><img alt="basic_linear_blueleft.png" class="default internal" src="/@api/deki/files/3951/=basic_linear_blueleft.png"></td>
   <td>
    <div style=""> </div>
   </td>
  </tr>
 </tbody>
</table>

<pre class="brush: css">/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */
background: -<em>prefix</em>-linear-gradient(left, blue, white);

/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1,
   IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */
background: linear-gradient(to right, blue, white); </pre>

<p>(Siehe die <a href="/de/docs/Web/CSS/linear-gradient#Browser_Kompatibilität">Browser Kompatibilitätstabelle</a> für eine Übersicht der Präfixe, die benötigt werden, um verschiedene Browserversionen zu unterstützen).</p>

<p>Der Verlauf kann diagonal gestaltet werden, indem die horizontale und vertikale Startposition definiert wird. Zum Beispiel:</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Screenshot</td>
   <td class="header">Livedemo</td>
  </tr>
  <tr>
   <td><img alt="basic_linear_bluetopleft.png" class="default internal" src="/@api/deki/files/3952/=basic_linear_bluetopleft.png"></td>
   <td>
    <div style=""> </div>
   </td>
  </tr>
 </tbody>
</table>

<pre class="brush: css">/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */
background: -<em>prefix</em>-linear-gradient(left top, blue, white);

/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1,
   IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */
background: linear-gradient(to bottom right, blue, white);
</pre>

<h3 id="Verwendung_von_Winkeln">Verwendung von Winkeln</h3>

<p>Falls kein Winkel angegeben wird, wird er automatisch durch die angegebene Richtung bestimmt. Falls mehr Kontrolle über die Richtung des Verlaufs erwünscht ist, kann der Winkel explizit angegeben werden.</p>

<p>Als Beispiel sind hier zwei Verläufe, der erste mit einer Richtung nach rechts und der zweite mit einem Winkel von 70 Grad.</p>

<p><img alt="linear_gradient_angle.png" class="default internal" src="/@api/deki/files/3953/=linear_gradient_angle.png"></p>

<p>Der rechte verwendet CSS wie folgt:</p>

<pre class="brush: css">background: linear-gradient(70deg, black, white);
</pre>

<p>Der Winkel wird angegeben als ein Winkel zwischen horizontaler Linie und der Verlaufslinie gegen den Uhrzeigersinn. Mit anderen Worten, <code>0deg</code> erzeugt einen vertikalen Farbverlauf von unten nach oben, während <code>90deg</code> einen horizontalen Verlauf von links nach rechts erzeugt:</p>

<p><img alt="linear_redangles.png" class="default internal" src="/files/3811/linear_red_angles.png"></p>

<pre class="brush: css">background: linear-gradient(&lt;angle&gt;, red, white);
</pre>

<div class="note style-wrap">
<p><strong>Hinweis:</strong> Mehrere Browser implementieren (mit Präfix) einen älteren Entwurf der Spezifikation, wo <code>0deg</code> nach rechts anstatt nach oben zeigte. Daher sollte auf den Wert des Winkels geachtet werden, wenn der standardisierte <code>linear-gradient</code> und der mit Präfix versehene gemischt verwendet werden. Eine einfache Formel hierfür ist 90 - x = y, wobei x die Standardverwendung und y die nicht standardisierte, mit Herstellerpräfix versehene Verwendung ist.</p>
</div>

<h3 id="Farbstopps">Farbstopps</h3>

<p>Farbstopps sind Punkte entlang der Verlaufslinie, die eine bestimmte Farbe an dieser Position angeben. Die Position kann entweder als ein Prozentwert der Länge der Linie oder als absolute Länge angegeben werden. Es können beliebig viele Farbstopps definiert werden, um den gewünschten Effekt zu erzielen.</p>

<p>Falls die Position als Prozentwert angegeben wird, repräsentiert <code>0%</code> den Startpunkt und <code>100%</code> den Endpunkt; jedoch können auch Werte außerhalb dieses Bereichs verwendet werden, falls nötig, um den gewünschten Effekt zu erhalten.</p>

<h4 id="Beispiel_Drei_Farbstopps">Beispiel: Drei Farbstopps</h4>

<p>Dieses Beispiel definiert drei Farbstopps:</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Screenshot</td>
   <td class="header">Livedemo</td>
  </tr>
  <tr>
   <td><img alt="linear_colorstops1.png" class="default internal" src="/@api/deki/files/3955/=linear_colorstops1.png"></td>
   <td>
    <div style=""> </div>
   </td>
  </tr>
 </tbody>
</table>

<pre class="brush: css">/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */
background: -<em>prefix</em>-linear-gradient(top, blue, white 80%, orange);

/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1,
   IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */
background: linear-gradient(to bottom, blue, white 80%, orange);
</pre>

<p>Beachte, dass der erste und letzte Farbstopp keine Position definieren; daher werden ihnen automatisch Werte von 0% und 100% zugewiesen. Der mittlere Farbstopp definiert eine Position von 80%, was ihn ziemlich weit nach unten verlagert.</p>

<h4 id="Beispiel_Gleichmäßig_verteilte_Farbstopps">Beispiel: Gleichmäßig verteilte Farbstopps</h4>

<p>Hier ist ein Beispiel, das eine Vielzahl an Farben verwendet, die alle gleichmäßig verteilt sind:</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Screenshot</td>
   <td class="header">Livedemo</td>
  </tr>
  <tr>
   <td><img alt="linear_rainbow.png" class="default internal" src="/@api/deki/files/3956/=linear_rainbow.png"></td>
   <td>
    <div style=""> </div>
   </td>
  </tr>
 </tbody>
</table>

<pre class="brush: css">/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */
background: -<em>prefix</em>-linear-gradient(left, red, orange, yellow, green, blue);

/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1,
   IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */
background: linear-gradient(to right, red, orange, yellow, green, blue);
</pre>

<p>Beachte, dass die Farbstopps automatisch gleichmäßig verteilt werden, wenn keine Positionen angegeben werden.</p>

<h3 id="Transparenz_und_Farbverläufe">Transparenz und Farbverläufe</h3>

<p>Farbverläufe unterstützen Transparenz. Diese kann zum Beispiel dazu benutzt werden, mehrere Hintergründe übereinander zu legen, um Fadingeffekte bei Hintergrundbilder zu erzeugen. Um dies zu erreichen, können entweder <code>rgba</code> Farben, <code>hsla</code> Farben oder das Schlüsselwort <code>transparent</code> verwendet werden (siehe <a href="/de/docs/Web/CSS/Farben">Farbwerte</a>). Jedoch sei darauf hingewiesen, dass einige Browser das Schlüsselwort <code>transparent</code> als <code>rgba(0,0,0,0)</code> anstatt <code>rgba(255,255,255,0)</code> rendern, was zu unerwarteten Ergebnissen (und potentiell dunklen Stellen) führen kann wenn die Farbverläufe sich überblenden. Daher ist es sicherer, opake Farbverläufe zu definieren.</p>

<p>Hier ist ein Beispiel, wie Transparenz in Farbverläufen verwendet wird:</p>

<p><img alt="Beispiel für Farbverläufe mit Transparenz" class="default internal" src="/files/4275/linear_multibg_transparent2.png" style="height: 119px; width: 643px;"></p>

<pre class="brush: css">/* Die alte Syntax, veraltet und mit Präfix versehen, für alte Browser */
background: -<em>prefix</em>-linear-gradient(left, rgba(255,255,255,0),
  rgba(255,255,255,1)), url(http://foo.com/image.jpg);

/* Die neue Syntax, die von Browsern benötigt wird, die dem Standard folgen (Opera 12.1,
   IE 10, Firefox 16, Chrome 26, Safari 6.1), ohne Präfix */
background: linear-gradient(to right, rgba(255,255,255,0),
  rgba(255,255,255,1)), url(http://foo.com/image.jpg);
</pre>

<p>Die Hintergründe sind überlagert, wobei der erste Hintergrund oben liegt und jeder weitere Hintergrund weiter unten. Durch die Überlagerung von Hintergründen auf diese Weise können kreative Effekte erzeugt werden, wie oben zu sehen.</p>

<h2 id="Radiale_Farbverläufe">Radiale Farbverläufe</h2>

<p>Radiale Farbverläufe werden durch die {{cssxref("radial-gradient")}} Funktion definiert. Die Syntax ist ähnlich der linearer Farbverläufe, außer, dass die Endform (ob Kreis oder Ellipse) des Verlaufs angegeben werden kann, als auch deren Größe. Standardmäßig ist die Endform eine Ellipse mit den gleichen Proportionen wie die der Containerbox.</p>

<h3 id="Farbstopps_2">Farbstopps</h3>

<p>Farbstopps können auf die gleiche Weise wie bei linearen Farbverläufen angegeben werden. Die Verlaufslinie verläuft dabei von der Startposition in alle Richtungen.</p>

<h4 id="Beispiel_Gleichmäßig_verteilte_Farbstopps_2">Beispiel: Gleichmäßig verteilte Farbstopps</h4>

<p>Standardmäßig werden Farbstopps wie bei linearen Verläufen gleichmäßig verteilt:</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Screenshot</td>
   <td class="header">Livedemo</td>
  </tr>
  <tr>
   <td><img alt="radial_gradient_even.png" class="default internal" src="/@api/deki/files/3958/=radial_gradient_even.png"></td>
   <td>
    <div style=""> </div>
   </td>
  </tr>
 </tbody>
</table>

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

<h4 id="Beispiel_Explizit_verteilte_Farbstopps">Beispiel: Explizit verteilte Farbstopps</h4>

<p>Hier werden bestimmte Positionen für die Farbstopps definiert:</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Screenshot</td>
   <td class="header">Livedemo</td>
  </tr>
  <tr>
   <td><img alt="radial_gradient_varied.png" class="default internal" src="/@api/deki/files/3959/=radial_gradient_varied.png"></td>
   <td>
    <div style=""> </div>
   </td>
  </tr>
 </tbody>
</table>

<pre class="brush: css">background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
</pre>

<h3 id="Größe">Größe</h3>

<p>Dies ist einer der Bereiche, in denen sich radiale von linearen Farbverläufen unterscheiden. Es kann ein Größenwert angegeben werden, der den Punkt definiert, der die Größe des Kreises oder der Ellipse bestimmt. Siehe die <a href="/de/docs/Web/CSS/radial-gradient#Größenkonstanten">Beschreibung der Größenkonstanten</a> für Details.</p>

<h4 id="Beispiel_closest-side_für_Ellipsen">Beispiel: <code>closest-side</code> für Ellipsen</h4>

<p>Diese Ellipse verwendet den Größenwert <code>closest-side</code>, welcher bedeutet, dass die Größe durch die Distanz zwischen dem Startpunkt (der Mitte) und der nähesten Seite der eingeschlossenen Box bestimmt wird.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Screenshot</td>
   <td class="header">Livedemo</td>
  </tr>
  <tr>
   <td><img alt="radial_ellipse_size1.png" class="default internal" src="/@api/deki/files/3960/=radial_ellipse_size1.png"></td>
   <td>
    <div style=""> </div>
   </td>
  </tr>
 </tbody>
</table>

<pre class="brush: css">background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
</pre>

<h4 id="Beispiel_farthest-corner_für_Ellipsen">Beispiel: <code>farthest-corner</code> für Ellipsen</h4>

<p>Dieses Beispiel ist ähnlich zum vorherigen mit dem Unterschied, dass die Größe der Ellipse durch <code>farthest-corner</code> bestimmt wird, welches die Größe des Verlaufs durch die Distanz zwischen Startpunkt und der vom Startpunkt am weitesten entfernten Ecke der engeschlossenen Box bestimmt.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Screenshot</td>
   <td class="header">Livedemo</td>
  </tr>
  <tr>
   <td><img alt="radial_ellipse_size2.png" class="default internal" src="/@api/deki/files/3961/=radial_ellipse_size2.png"></td>
   <td>
    <div style=""> </div>
   </td>
  </tr>
 </tbody>
</table>

<pre class="brush: css">background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);
</pre>

<h4 id="Beispiel_closest-side_für_Kreise">Beispiel: <code>closest-side</code> für Kreise</h4>

<p>Dieses Beispiel verwendet <code>closest-side</code>, welches die Größe des Kreises als die Distanz zwischen dem Startpunkt und der nähesten Seite definiert.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Screenshot</td>
   <td class="header">Livedemo</td>
  </tr>
  <tr>
   <td><img alt="radial_circle_size1.png" class="default internal" src="/@api/deki/files/3962/=radial_circle_size1.png"></td>
   <td>
    <div style=""> </div>
   </td>
  </tr>
 </tbody>
</table>

<pre class="brush: css">background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
</pre>

<p>Hier entspricht der Radius des Kreises der Hälfte der Höhe der Box, da der obere und untere Rand gleich weit vom Startpunkt entfernt sind und näher als der linke und rechte Rand sind.</p>

<h2 id="Wiederholung_von_Farbverläufen">Wiederholung von Farbverläufen</h2>

<p>Die {{cssxref("linear-gradient")}} und {{cssxref("radial-gradient")}} Eigenschaften unterstützen nicht automatisch die Wiederholung von Farbstopps. Jedoch sind die Eigenschaften {{cssxref("repeating-linear-gradient")}} und {{cssxref("repeating-radial-gradient")}} für diese Funktionalität verfügbar.</p>

<h3 id="Beispiele_Sich_wiederholender_linearer_Farbverlauf">Beispiele: Sich wiederholender linearer Farbverlauf</h3>

<p>Dieses Beispiel verwendet {{cssxref("repeating-linear-gradient")}}, um einen Farbverlauf zu erzeugen:</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Screenshot</td>
   <td class="header">Livedemo</td>
  </tr>
  <tr>
   <td><img alt="repeating_linear_gradient.png" class="default internal" src="/@api/deki/files/3964/=repeating_linear_gradient.png"></td>
   <td>
    <div style=""> </div>
   </td>
  </tr>
 </tbody>
</table>

<pre class="brush: css">background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
</pre>

<p>Ein weiteres Beispiel, das die {{cssxref("repeating-linear-gradient")}} Eigenschaft verwendet.</p>

<p><a href="/@api/deki/files/6192/=repeat_background_gradient_checked.png"><img alt="repeat_background_gradient_checked.png" class="default internal" src="/@api/deki/files/6192/=repeat_background_gradient_checked.png?size=thumb" style="height: 160px; width: 160px;"></a></p>

<pre class="brush: css">background-color: #000;
background-image: repeating-linear-gradient(90deg, transparent, transparent 50px,
      rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px,
      rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px,
      rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px,
      rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px,
      rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px,
      rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
      rgba(143, 77, 63, 0.25) 10px),
repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
      rgba(143, 77, 63, 0.25) 10px);
</pre>

<h3 id="Beispiel_Sich_wiederholender_radialer_Farbverlauf">Beispiel: Sich wiederholender radialer Farbverlauf</h3>

<p>Dieses Beispiel verwendet {{cssxref("repeating-radial-gradient")}}, um einen Farbverlauf zu erzeugen:</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Screenshot</td>
   <td class="header">Livedemo</td>
  </tr>
  <tr>
   <td><img alt="repeating_radial_gradient.png" class="default internal" src="/@api/deki/files/3965/=repeating_radial_gradient.png"></td>
   <td>
    <div style=""> </div>
   </td>
  </tr>
 </tbody>
</table>

<pre class="brush: css">background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
</pre>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>Farbverlauf-bezogene Artikel: {{cssxref("&lt;image&gt;")}}, {{cssxref("&lt;gradient&gt;")}}, {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}.</li>
</ul>