Konische CSS-Verläufe

Inhaltsverzeichnis

Konische CSS-Verläufe

Ein konischer Farbverlauf ist ein Farbverlauf mit um einen Mittelpunkt gedrehten Farbübergängen.

Um einen konischen Farbverlauf zu erstellen, müssen Sie mindestens zwei Farben definieren.

Syntax

background-image: conic-gradient([from angle] [at position,] color 
  [degree], color [degree], ...);

Standardmäßig beträgt Winkel 0 Grad und Position ist die Mitte.

Wenn kein Grad angegeben ist, werden die Farben gleichmäßig verteilt der Mittelpunkt.

Konischer Farbverlauf: Drei Farben

Das folgende Beispiel zeigt einen konischen Farbverlauf mit drei Farben:

Beispiel

Ein konischer Farbverlauf mit drei Farben:

   #grad {
  background-image: conic-gradient(red, yellow, green);
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red, yellow, green);
}
</style>
</head>
<body>

<h1>Conic Gradient - Three Colors</h1>

<div id="grad1"></div>

</body>
</html>

Konischer Farbverlauf: Fünf Farben

Das folgende Beispiel zeigt einen konischen Farbverlauf mit fünf Farben:

Beispiel

Ein konischer Farbverlauf mit fünf Farben:

   #grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red, yellow, green, blue, black);
}
</style>
</head>
<body>

<h1>Conic Gradient - Five Colors</h1>

<div id="grad1"></div>

</body>
</html>

Konischer Farbverlauf: Drei Farben und Grade

Das folgende Beispiel zeigt einen konischen Farbverlauf mit drei Farben und einem Grad für jede Farbe:

Beispiel

Ein konischer Farbverlauf mit drei Farben und einem Grad für jede Farbe:

   #grad {
  background-image: conic-gradient(red 45deg, yellow 
    90deg, green 210deg);
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}
</style>
</head>
<body>

<h1>Conic Gradient - Defined degree for each color</h1>

<div id="grad1"></div>

</body>
</html>

Erstellen Sie Kreisdiagramme

Fügen Sie einfach border-radius: 50% hinzu, damit der konische Farbverlauf wie ein Kuchen aussieht:

Beispiel

   #grad {
  background-image: conic-gradient(red, yellow, green, blue, 
    black);
  
    border-radius: 50%;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Conic Gradient - Pie Chart</h1>

<div id="grad1"></div>

</body>
</html>

Hier ist ein weiteres Kreisdiagramm mit definierten Graden für alle Farben:

Beispiel

   #grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 
    180deg, green 180deg, green 270deg, blue 270deg);
  
    border-radius: 50%;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Conic Gradient - Pie Chart</h1>

<div id="grad1"></div>

</body>
</html>

Konischer Verlauf mit angegebenem Ab-Winkel

Der [von Winkel] gibt einen Winkel an, den der gesamte konische Verlauf hat gedreht um.

Das folgende Beispiel zeigt einen konischen Farbverlauf mit einem Winkel von 90 Grad:

Beispiel

Ein konischer Gradient mit einem Ab-Winkel:

   #grad {
  background-image: conic-gradient(from 90deg, red, yellow, 
    green);
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(from 90deg, red, yellow, green);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Conic Gradient - With a from angle</h1>

<div id="grad1"></div>

</body>
</html>

Konischer Verlauf mit angegebener Mittelposition

Die [at position] gibt die Mitte des konischen Farbverlaufs an.

Das folgende Beispiel zeigt einen konischen Farbverlauf mit einer Mittelposition von 60 % 45 %:

Beispiel

Ein konischer Farbverlauf mit einer angegebenen Mittelposition:

   #grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, 
    green);
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Conic Gradient - With a specified center position</h1>

<div id="grad1"></div>

</body>
</html>

Wiederholen eines konischen Farbverlaufs

Die Funktion repeating-conic-gradient() wird verwendet, um konische Farbverläufe zu wiederholen:

Beispiel

Ein sich wiederholender konischer Gradient:

   #grad {
  background-image: 
repeating-conic-gradient(red 10%, yellow 20%);
  
    border-radius: 50%;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Repeating a Conic Gradient</h1>

<div id="grad1"></div>

</body>
</html>

Hier ist ein sich wiederholender konischer Farbverlauf mit definierten Farbstarts und Farbstopps:

Beispiel

Ein sich wiederholender konischer Farbverlauf mit definierten Farbstarts und Farbstopps:

   #grad {
  background-image: 
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
  
    border-radius: 50%;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Repeating a Conic Gradient with color-starts and -stops</h1>

<div id="grad1"></div>

</body>
</html>

CSS-Verlaufsfunktionen

In der folgenden Tabelle sind die CSS-Verlaufsfunktionen aufgeführt:

conic-gradient(): Erstellt einen konischen Farbverlauf. Definieren Sie mindestens zwei Farben (um einen Mittelpunkt)
linear-gradient(): Erstellt einen linearen Farbverlauf. Definieren Sie mindestens zwei Farben (von oben nach unten)
radial-gradient(): Erstellt einen radialen Farbverlauf. Definieren Sie mindestens zwei Farben (Mitte bis Ränder)
repeating-conic-gradient(): Wiederholt einen konischen Farbverlauf
repeating-linear-gradient(): Wiederholt einen linearen Farbverlauf
repeating-radial-gradient(): Wiederholt einen radialen Farbverlauf