CSS, HTML und Javascript mit {stil}

Radial Gradient – Kreisverlauf

CSS kreisförmiger Verlauf Zeigt zwei Ringe mit Kreisverlauf

Sowohl Webkit-basierte Browser als auch Firefox unterstützen neben dem linearen Verlauf durch linear-gradient einen radialen (kreisförmigen) Verlauf. Internet Explorer bis einschl. Version 9 nicht.

Ein radialer Verlauf entsteht in seinem Zentrum und breitet sich nach außen aus. Im einfachsten Fall entsteht ein kreisförmiger Verlauf aus der Mitte des umfassenden Blocks. 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%);

Ein radialer Verlauf beginnt im Zentrum des Kreis bzw. der Ellipse und breitet sich nach Rechts auf einer gedachten Linie aus.

  • 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.

Verlaufswinkel

Adobe Photoshop hat neben dem linearen Verlauf und dem radialen Verlauf noch einen Verlaufswinkel und einen Rautenverlauf. Diese Verlaufstypen werden weder von CSS noch von SVG geboten.

verlaufswinkel

Ältere Browser und ältere Syntax

Für ä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: radial-gradient(
   center, 
   ellipse closest-side, 
   yellow 0%, 
   blue 25%, 
   white 75%
);
background: radial-gradient(
	150px 0,
	ellipse farthest-corner, 
	white 30%,  
	blue 70%);
50% 73% 100% 50% 73% 50% 73% 50% 73% 100%