CSS koniske gradienter

Indholdsfortegnelse

CSS koniske gradienter

En konisk gradient er en gradient med farveovergange roteret omkring et midtpunkt.

For at skabe en konisk gradient skal du definere mindst to farver.

Syntaks

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

Som standard er vinkel 0 grader og position er i midten.

Hvis der ikke er angivet en grad, vil farverne blive spredt ligeligt rundt midtpunktet.

Konisk gradient: Tre farver

Følgende eksempel viser en konisk gradient med tre farver:

Eksempel

En kegleformet gradient med tre farver:

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

Prøv det selv →

<!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>

Konisk gradient: Fem farver

Følgende eksempel viser en konisk gradient med fem farver:

Eksempel

En kegleformet gradient med fem farver:

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

Prøv det selv →

<!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>

Konisk gradient: Tre farver og grader

Følgende eksempel viser en konisk gradient med tre farver og en grad for hver farve:

Eksempel

En konisk gradient med tre farver og en grad for hver farve:

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

Prøv det selv →

<!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>

Opret cirkeldiagrammer

Bare tilføj border-radius: 50% for at få den kegleformede gradient til at ligne en kage:

Eksempel

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

Prøv det selv →

<!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>

Her er endnu et cirkeldiagram med definerede grader for alle farverne:

Eksempel

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

Prøv det selv →

<!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>

Konisk gradient med specificeret fra vinkel

[fra vinklen] angiver en vinkel, som hele den koniske gradient er roteret af.

Følgende eksempel viser en konisk gradient med en fra-vinkel på 90 grader:

Eksempel

En konisk gradient med en fra-vinkel:

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

Prøv det selv →

<!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>

Konisk gradient med specificeret midterposition

[at position] angiver midten af den kegleformede gradient.

Følgende eksempel viser en konisk gradient med en midterposition på 60% 45%:

Eksempel

En konisk gradient med en specificeret midterposition:

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

Prøv det selv →

<!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>

Gentagelse af en konisk gradient

Funktionen repeating-conic-gradient() bruges til at gentage koniske gradienter:

Eksempel

En gentagen keglegradient:

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

Prøv det selv →

<!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>

Her er en gentagende konisk gradient med definerede farvestarter og farvestop:

Eksempel

En gentagende konisk gradient med definerede farvestarter og farvestop:

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

Prøv det selv →

<!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-gradientfunktioner

Følgende tabel viser CSS-gradientfunktionerne:

conic-gradient(): Skaber en kegleformet gradient. Definer mindst to farver (omkring et midtpunkt)
linear-gradient(): Opretter en lineær gradient. Definer mindst to farver (top til bund)
radial-gradient(): Opretter en radial gradient. Definer mindst to farver (center til kanter)
repeating-conic-gradient(): Gentager en konisk gradient
repeating-linear-gradient(): Gentager en lineær gradient
repeating-radial-gradient(): Gentager en radial gradient