CSS/Tutorials/Hintergrund/conic-gradient()

20min

mittel

CSS

Mithilfe der Funktion conic-gradient() können Sie einen kreisförmigen Farbverlauf als Hintergrundgrafik eines Elements erstellen. Im Unterschied zum radialen Verlauf, der beginnend im Mittelpunkt nach außen läuft (in Richtung des Radius, deshalb radial), verläuft dieser um den Kreis herum. Der Name ergibt sich, weil bei manchen Ergebnissen der Eindruck eines Kegels (lat, conus) entsteht.

konischer und radialer Verlauf

Browserunterstützung
caniuse.com

conic-gradient()

Syntax:

conic-gradient(
 [ from <angle> ]? [ at <position> ]?,
 <angular-color-stop-list>

Die Funktion erwartet

• mindestens zwei color-stops mit einer Farb- und einer optionalen Längenangabe, der festlegt, welche Farbe an welcher Stelle des Verlaufs dargestellt werden soll.
  Fehlen die Längenangaben, so wird die zur Verfügung stehende Breite in soviele Teile geteilt, wie Farbübergänge vorhanden sind.
• ein optionales Winkelmaß, das den Beginn festlegt und mit from eingeleitet wird. (Standardwert 0: Verlauf beginnt oben)
• eine background-position entsprechende Positionsangabe, die das Zentrum des Verlaufs festlegt (Standardwert center center)

konische Verläufe ansehen …

.conic-gradient-sw {
  background: conic-gradient(black, #fff, #000);
}
.conic-gradient1 {
  background: conic-gradient(red, orange, yellow, lime, aqua, blue, magenta, red);
}

.farbkreis {
  background: conic-gradient(#c32e04 22deg, #df6c20 0 67deg, #dfac20 0 112deg, #8db243 0 157deg, hsl(85 100% 30%)  0 202deg, #306f91 0 247deg, #9357b9  0 292deg, #660033 0 337deg,#c32e04 0);
}
.sunbeam {
  background: conic-gradient(from 0.25turn at 20% 50%, #dfac20, 10deg, #306f91, 350deg, #e6f2f7);
  border-radius: 0;
 }
.squares {
  background: conic-gradient(#c32e04 90deg, #dfac20 0 180deg, #306f91 0 270deg, #5a9900 0);
  border-radius: 0;
}
.prism {
  background: conic-gradient(at 0% 30%, #c32e04 10%, yellow 30%, #306f91 50%);
  border-radius: 0;
}

Der Farbkreis, .squares und das Prisma verwenden harte Übergänge, indem die colorstops zwei Längenangaben (double position syntax) erhalten, wie es schon im linear-gradient()-Kapitel besprochen wurde.

Beachten Sie: Auch wenn der Farbkreis in Donut-Form wie ein Kreisdiagramm aussieht, ist er doch eine inhaltsleere Hintergrundgrafik ohne Möglichkeit einen Alternativtext zu hinterlegen.
Zur Realisierung von Diagrammen oder Schachbrettmustern für Spielfelder sind SVG-Elemente, die dann mit Metadaten und Text beschriftet werden können, besser geeignet.
Siehe auch: Datenvisualisierung

repeating-conic-gradient()

Sich wiederholende konische Farbverläufe können Sie mithilfe der Funktion repeating-conic-gradient() erreichen.

Browserunterstützung
caniuse.com

repeating-conic-gradient() ansehen …

.starburst{
  background: 
    repeating-conic-gradient(
      yellow, #c32e04 20deg
    );
}

.starburst2 {
	background: repeating-conic-gradient(
	  from 3deg at 0 0, 
	  #337599        2deg, 
	  yellow   4deg  7deg, 
	  #337599 15deg 18deg
	);
}

.macedonia {
  background: 
    radial-gradient(
      #dfac20 10%, 
      #c32e04 0 12%, 
      transparent 12%
    ),
    repeating-conic-gradient(
      #dfac20 0 15deg,
      #c32e04 0 40deg
    );
  border-radius: 0;
}

CSS3 Patterns

Konische Farbverläufe vereinfachen besonders das Entwerfen von komplexen Mustern für Hintergrundbilder. Lea Verou schuf bereits 2011 ihre CSS3 Patterns Gallery. Einige dieser Muster lassen sich nun vereinfacht notieren, wie Ana Tudor zeigt.

komplexe Muster ansehen …

.checkers {
  background: 
    repeating-conic-gradient(
      black 0deg 25%, 
      white 0deg 50%);
  background-size: 60px 60px;
}
.diagonalesSchach {
  background-image: 
    repeating-conic-gradient(
      from 45deg, 
      black 0% 25%, 
      white 0% 50%);
  background-size: 2em 2em;
}
.squares {
  background: 
    repeating-conic-gradient(#c32e04 0 25%, #dfac20 0 50%, #337599 0 75%, #5a9900 0 100%);
  background-size: 2em 2em;
}
.pyramid {
  background:
    conic-gradient(from 45deg, 
      hsl(13 96% 39% / 1)  25%, 
      hsl(13 96% 39% / 0.86)  0% 50%, 
      hsl(13 96% 39% / 0.63) 0% 75%, 
      hsl(13 96% 39% / 0.50) 0%);
  background-size: 2em 2em;
}
.triangles {
  background: conic-gradient(from 26.56505deg, white 0% 63.43495deg, blue 0% 126.8699deg, white 0% 50%, blue 0% 243.43495deg, white 0% 306.8699deg, blue 0%) 0 0/ 16px 32px;
}
.bavarian {
	background: 
		conic-gradient(
			from 26.56505deg, 
			white 0% 126.8699deg, 
			DeepSkyBlue 0% 50%, 
			white 0% 306.8699deg, 
			DeepSkyBlue 0%
		) 
		0 0/ 16px 32px;

}

glänzendes Metall

Mit dieser Funktion sind optisch ansprechende Effekte wie ein metallic look mit scheinbar reflektierenden Oberflächen möglich:

brushed metal look ansehen …

.gold {
  --accentcolor: gold;	
  background: 
    repeating-conic-gradient(
	  var(--accentcolor)   0deg, 
	  white               45deg, 
	  var(--accentcolor)  90deg
    );
}	
.silver {
  --accentcolor: silver;	
  background: 
    repeating-conic-gradient(
	  var(--accentcolor)   0deg, 
	  white               45deg, 
	  var(--accentcolor)  90deg
    );
}

Auf glänzenden Flächen bildet sich oft ein sphärisches Lichtkreuz. Dies wird mit einem repeating-conic-gradient() nachgebildet. Der Verlauf changiert von der Grundfarbe zu weiß und wieder zurück.

Siehe auch:

• CodePen: pure CSS metallic buttons with shadow (no pseudos) von Ana Tudor
• CodePen: Metallic button von Ana Tudor
• CodePen: Starry (uses clip-path) von Ana Tudor

conic Radar von Ana Tudor ansehen …

• radial-gradient()
• Gestaltung von Hintergründen
  (Übersicht)

Weblinks

• W3C: 3.3. Conic Gradients
  CSS Images Module Level 4, Editor’s Draft, 9 November 2020
• MDN: conic-gradient()
• kulturbanause: CSS conic gradients (gewinkelte Verläufe)
• Lea Verou: https://leaverou.github.io/conic-gradient/fill mit vielen spektakulären Beispielen am Ende der Seite.
• alligator.io Introduction to Conic Gradients in CSS
• css-challenges.com: conic-gradient-patterns
• css-tricks: Creative Background Patterns Using Gradients, CSS Shapes, and Even Emojis