Radiale Farbverläufe in CSS mit radial-gradient

Im Gegensatz zu früheren Zeiten muss man für Farbverläufe auf Websites nicht mehr auf Bilder zurückgreifen, sondern kann das rein mit CSS bewerkstelligen. Man spart sich dadurch Ladezeiten, die Qualität der Verläufe ist wesentlich flüssiger als mit Bildern und man hat bei der Entwicklung eine erhebliche Reduzierung des Aufwands.

Man kann in CSS neben linearen auch radiale (kreisförmige) Farbverläufe erstellen und sehr schöne Effekte damit erzielen. Der Vorteil in CSS gegenüber der Variante mit Hintergrundbildern wird hierbei besonders deutlich. Denn, da Bilder eine bestimmte Größe haben, die Größen der HTML-Elemente jedoch unterschiedlich sind, war die Positionierung eines Hintergrundbilds mit einem radialen Farbverlauf nicht einfach. Mit den vielen Einstellungsmöglichkeiten in CSS ist das wesentlich einfacher.

Radialer Farbverlauf in CSS

Für einen kreisförmigen Verlauf verwendet man als Wert radial-gradient, den man den Eigenschaften background, background-image, border-image, list-style-image oder generiertem Content zuweisen kann. Somit stellt radial-gradient keine Eigenschaft an sich dar, sondern ist ein Wert für eine Eigenschaft, in dem die folgenden Angaben zum Verlauf gemacht werden können.

  • Typ des radialen Verlaufs
  • Bezugsseite oder -punkt für den Verlauf
  • Die Position des Zentrums für den Verlauf
  • Farbangaben mit Stopp-Positionen
CSS-Code mit radial-gradient

Typ des radialen Verlaufs

Als Typ kann man entweder circle (kreisförmig) oder ellipse angeben.

Verlaufs als Kreis und Ellipse

Bezugsseiten und -punkte

Jeder radiale Verlauf besitzt einen Mittelpunkt sowie ein (Kreis) oder zwei (Ellipse) Radien. Diese werden mit Hilfe der Bezugsseiten oder -punkte ermittelt, die man angeben kann. Dabei sind die folgenden Angaben möglich.

  • closest-side (bis zu der Seite mit der kürzesten Strecke)
  • closest-corner (bis zu der Ecke mit der kürzesten Strecke)
  • farthest-side (bis zur der Seite mit der längsten Strecke)
  • farthest-corner (bis zu der Ecke mit der längsten Strecke)

Nachfolgend ist abgebildet, wie sich die Bezugsseiten bzw. -punkte auf den radialen Verlauf auswirken.

closest-side
closest-corner
farthest-side
farthest-corner

Das Zentrum des radialen Verlaufs

Die x- und y-Achse des Zentrums kann entweder über ein oder zwei Positionswörter (z.B. at center oder at top left) oder numerisch angegeben werden. Man kann diese auch miteinander kombinieren, um es zu versetzen (z.B. left 20px bottom 30px). Hierbei muss man beachten, dass wenn das Zentrum an einer Kante oder Ecke positioniert ist, bei closest-side aus logischen Gründen kein Verlauf erzeugt wird. Ebenso wird kein Verlauf erzeugt, wenn das Zentrum an einer Ecke positioniert ist und man als Bezugspunkt closest-corner wählt. Außerdem kann man für center keinen Versatz angeben, wenn gleichzeitig ein zweites Positionswort (z.B. left) angegeben wurde. Nachfolgend einige Möglichkeiten, um das Zentrum anzugeben.

  • at center (horizontal und vertikal mittig)
  • at center left (vertikal mittig, horizontal links)
  • at center right (vertikal mittig, horizontal rechts)
  • at center top (vertikal oben, horizontal mittig)
  • at center bottom (vertikal unten, horizontal mittig)
  • at left top (linke, obere Ecke)
  • at left bottom (linke, untere Ecke)
  • at right top (rechte, obere Ecke)
  • at right bottom (rechte, untere Ecke)
  • at right 20px bottom 30px (Versatz 20px/30px, ausgehend von der rechten, unteren Ecke)
  • at 0 0 (linke obere Ecke)
  • at 20px 30px (Versatz 20px/30px, ausgehend von der linken, oberen Ecke)

Farbangaben und Stopp-Positionen

Die Farbangaben und Stopp-Positionen werden wie beim linearen Verlauf angegeben und werden unter Farben und Stopp-Positionen erläutert. Bei radialen Verläufen besteht der Unterschied lediglich darin, dass das Element radial (ringsherum) mit dem Farbverlauf gefüllt wird, der auf der Farblinie angegeben wird. Außerdem können außerhalb der Radien lückenhafte Bereiche entstehen, z.B. in den Ecken, die nicht mit dem Verlauf gefüllt werden, sondern mit der zuletzt angegebenen Farbe.

Beispiele ohne Bezugspunkt und Zentrum

Der Bezugspunkt und das Zentrum müssen nicht unbedingt angegeben werden. In dem Fall gilt für den Bezugspunkt der Standardwert farthest-side und für den Mittelpunkt center. Nachfolgend ist ein Beispielcode mit der Darstellung im Browser.

/* Kreis, zentriert, mit 2 Farben */
.selektor1 {
background: radial-gradient(circle, red, blue);
}

/* Ellipse, zentriert, mit 2 Farben */
.selektor2 {
background: radial-gradient(ellipse, red, blue);
}

/* Kreis, zentriert, mit 3 Farben */
.selektor3 {
background: radial-gradient(circle, yellow, red, blue);
}

/* Ellipse, zentriert, mit 3 Farben */
.selektor4 {
background: radial-gradient(ellipse, yellow, red, blue);
}
Verlauf ohne Angabe von Bezugs- und Mittelpunkt

Beispiele mit Bezugspunkt und versetztem Zentrum

Nachfolgend sind ein paar Beispiele, in denen die Bezugspunkte sowie das Zentrum mit einem Versatz angegeben wurden.

/* Kreis, zentriert links mit Versatz, mit 2 Farben */
.selektor1 {
background: radial-gradient(
circle closest-side at center left 30px, red, blue
);
}

/* Ellipse, zentriert links mit Versatz, mit 2 Farben */
.selektor2 {
background: radial-gradient(
ellipse closest-side at center left 30px, red, blue
);
}

/* Kreis, links unten mit Versatz, mit 3 Farben */
.selektor3 {
background: radial-gradient(
circle farthest-side at left 20px bottom 30px, yellow, red, blue
);
}

/* Ellipse, rechts oben mit Versatz, mit 3 Farben */
.selektor4 {
background: radial-gradient(
ellipse farthest-side at right 20px top 30px, yellow, red, blue
);
}
Verläufe mit Angabe von Bezugs- und Mittelpunkt

Fallback und Präfix für ältere Browser

Ältere Browserversionen unterstützen Farbverläufe nicht oder benötigen einen Browser-Präfix. Wenn man auch diese Browser abdecken möchte, kann man z.B. für einen radialen Farbverlauf mit drei Farben den folgenden Code verwenden.

.selektor1 {
/* Einfarbiger Fallback für alte Browser */
background: red;

/* Ab Firefox 3.6 */
background: -moz-radial-gradient(center, ellipse cover, yellow 0%, red 50%, blue 100%);

/* Ältere Chrome- und Safari-Versionen */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, 
  color-stop(0%,yellow), color-stop(50%,red), color-stop(100%,blue));

/* Ab Chrome 10 und Safari 15.1 */
background: -webkit-radial-gradient(center, ellipse cover, yellow 0%, red 50%, blue 100%);

/* Ab Opera 11.10 */
background: -o-radial-gradient(center, ellipse cover, yellow 0%, red 50%, blue 100%);

/* Ab IE10 */
background: -ms-radial-gradient(center, ellipse cover, yellow 0%, red 50%, blue 100%);


/* Offizielle Syntax */
background: radial-gradient(ellipse at center, yellow 0%, red 50%, blue 100%);

/* Vor IE10 */
filter: progid:DXImageTransform.Microsoft.Gradient(start
  Colorstr='pink', 
  endColorstr='red', 
  GradientType=1
);
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(
  startColorStr='pink', 
  endColorStr='red', 
  GradientType=1
)";
}

Die älteren IE-Versionen unterstützten radiale Verläufe nicht, jedoch horizontale oder vertikale Farbverläufe. Man muss sich bei diesen Browsern deshalb für die Richtung des Verlaufs entscheiden und das wird über GradientType festgelegt. Der Wert 1 ist für einen horizontalen Verlauf. Möchte man einen vertikalen Verlauf, gibt man als Wert 0 an.