<gradient>

Übersicht

Der <gradient> CSS Datentyp beschreibt ein <image>, das aus einem progressiven Verlauf zwischen zwei oder mehreren Farben besteht. Ein CSS Farbverlauf ist kein <color> Wert, aber ein Bild ohne innere Maße; das bedeutet, es hat weder eine natürliche oder bevorzugte Größe, noch ein bevorzugtes Seitenverhältnis. Seine konkrete Größe passt sich dem Element an, dem es zugewiesen wurde.

Es gibt drei Arten von Farbverläufen:

• Lineare Farbverläufe, erzeugt durch die linear-gradient() Funktion, wo die Farbe weich entlang einer imaginären Linie verläuft.

  Ein durch einen Farbverlauf erzeugter Regenbogen
  

  body { 
  background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
  background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
  background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
  background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
  background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet); 
  }

• Radiale Farbverläufe, erzeugt durch die radial-gradient() Funktion. Je weiter sich ein Punkt vom Ursprung entfernt befindet, desto weiter entfernt ist er von der Originalfarbe.

  Radialer Farbverlauf
    

  body {
  background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent;
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
  }
  

• Wiederholende Farbverläufe, welche lineare oder radiale Farbverläufe fester Größe sind, die sich solange wiederholen bis die gesamte Box gefüllt ist.

  Wiederholender Farbverlauf
  

  body {
  background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
  background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px);
  }  

Wie in allen Fällen, in denen zwischen Farben interpoliert wird, werden Farbverläufe im alpha-vormultiplizierten Farbraum berechnet. Dies verhindert unerwartete Grauschattierungen, wenn sowohl Farbe als auch Deckkraft variieren.

Spezifikationen

Browser Kompatibilität

Jeder Farbverlaufstyp hat eine unterschiedliche Kompatibilitätsmatrix. Bitte daher die individuellen Artikel lesen.

Siehe auch

• Farbverläufe in CSS, linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-radial-gradient()