CSS Radial Gradient – Kreisverlauf

CSS radial gradient – Kreisverlauf

Ein radialer oder kreisförmiger Verlauf entsteht im Zentrum eines Kreises oder einer Ellipse und breitet sich nach außen aus. Im einfachsten Fall entsteht ein kreisförmiger Verlauf aus der Mitte des umfassenden Blocks.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Ursprung des Verlaufs

Die elementare Variante ist der radiale Verlauf mit dem Mittelpunkt im Zentrum des Elements. Wenn der Block nicht quadratisch ist, entsteht ein elipsenförmiger Verlauf, in einem quadratischen Block entsteht ein kreisförmiger Verlauf.

.circ { 
   background-image: radial-gradient( 
      hsl(200,10%,50%) 29%, 
      hsl(200,10%,60%) 30%,
      hsl(200,10%,90%) 50%,
      hsl(200,10%,60%) 70%,
      hsl(200,10%,90%) 73%
   );
}

Eine Positionsangabe verschiebt den Verlauf und die beiden Schlüsselwörter circle und ellipse erzeugen einen kreis- bzw. ellipsenförmigen Verlauf, auch wenn der umfassende Block nicht quadratisch oder rechteckig ist.

background-image: radial-gradient(
   shape at top left, 
     |       |    |
     |       +----+-- Position von oben links
     |
     +-- circle oder ellipse
   color1 0, 
   color2 x%, 
   color3 100%);
  • Color Stops können in % angegeben werden – dann endet der Kreisverlauf am Rand des Elements.
  • Mit absoluten Werten (px, em, …) endet der Verlauf mit dem letzten Color Stop oder am Rand des Elements.

radial gradient – Schlüsselwörter (neue Syntax)

Die Schlüsselwörter des radialen Verlaufs und sind Typ (circle, ellipse), Richtung (closest-side, farthest-side, closest-corner, farthest-corner) und die Position den Zentrums innerhalb des Blocks. Die Color Stops werden in gleicher Weise angegeben wie beim linearen Verlauf.

circle ellipse
.grad {
  background-image: 
  radial-gradient(
    circle at 200px 50px, 
    hsl(200,10%,50%) 29%, 
    hsl(200,10%,60%) 30%,
    hsl(200,10%,90%) 50%,
    hsl(200,10%,60%) 70%,
    hsl(200,10%,90%) 73% );
closest-side
setzt einen Verlauf, der von der Mitte aus genau auf die am nächsten liegende Seite trifft.
closest-corner
setzt einen Verlauf, der von der Mitte aus genau die nächste Ecke des Blocks trifft.
farthest-side
setzt einen Verlauf, der von der Mitte aus genau die am weitesten entfernte Seite des Blocks trifft.
farthest-corner (default)
setzt einen Verlauf, der von der Mitte aus genau die am weitesten entfernte Ecke des Blocks trifft.

repeating radial gradient

repeating-radial-gradient erzeugt Wiederholungen für Zielscheiben und Wellen.

.repeating {
   background-image: repeating-radial-gradient(circle at center, powderblue, powderblue 10px, cadetblue 10px, cadetblue 20px);
}

.welle {
   background-image: repeating-radial-gradient(circle at center, powderblue 20px, cadetblue 40px, powderblue 50px);
}

Wenn die nächste Farbe an der Position beginnt, an der die vorangehende Farbe endet, entsteht ein harter Übergang im Verlauf. So entsteht die Zielscheibe.

Ausgefallene Verläufe

Bei Rettungsringen und Schlauchbooten muss es nicht bleiben. Verläufe erzeugen auch Phantasiemuster. Bei Werner Zenk gibt es seitenweise Variationen.

Konischer Verlauf

CSS hat die Syntax für den konischen Verlauf nachgeliefert, CSS conic-gradient wird heute von allen modernen Browsern unterstützt.

linear gradient parameter Angaben
radial gradient parameter Angaben
conic gradient parameter Angaben

Linearer Verlauf, radialer Verlauf, konischer Verlauf

Syntax radial gradient – alte Browser

Für (sehr viel) ältere Browser, die radial-gradient bereits unterstützen, aber noch in der alten Syntax, muss noch ein Browser-Präfix verwendet werden. Die alte Syntax benutzt für die Positionierung des kreisförmigen Verlaufs dieselben Werte wie für die Position eines Hintergrundbilds.

Die Schlüsselwörter waren dieselben wie in der neuen Syntax, aber die Werte wurden in anderer Reihenfolge aufgelistet.

background-image: -webkit-radial-gradient(150px 0,ellipse farthest-corner, white 30%,teal 70%);
background-image: -moz-radial-gradient(150px 0,ellipse farthest-corner, white 30%,teal 70%);
background-image: -ms-radial-gradient(150px 0,ellipse farthest-corner, white 30%,teal 70%);
background-image: -o-radial-gradient(150px 0,ellipse farthest-corner, white 30%,teal 70%);
background-image: radial-gradient(150px 0,ellipse farthest-corner, white 30%,teal 70%);
50% 73% 100% 50% 73% 50% 73% 50% 73% 100%