CSS koniska gradienter


Innehållsförteckning

    Visa innehållsförteckning


CSS koniska gradienter

En konisk gradient är en gradient med färgövergångar roterade runt en mittpunkt.

För att skapa en konisk gradient måste du definiera minst två färger.

Syntax

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

Som standard är vinkel 0 grader och position är mitten.

Om ingen grad anges kommer färgerna att spridas lika runt mittpunkten.


Konisk gradient: tre färger

Följande exempel visar en konisk gradient med tre färger:

Exempel

En konisk gradient med tre färger:

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

Prova själv →

<!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 färger

Följande exempel visar en konisk gradient med fem färger:

Exempel

En konisk gradient med fem färger:

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

Prova själv →

<!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 färger och grader

Följande exempel visar en konisk gradient med tre färger och en grad för varje färg:

Exempel

En konisk gradient med tre färger och en grad för varje färg:

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

Prova själv →

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




Skapa cirkeldiagram

Lägg bara till border-radius: 50% för att få den koniska gradienten att se ut som en paj:

Exempel

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

Prova själv →

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


Här är ett annat cirkeldiagram med definierade grader för alla färgerna:

Exempel

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

Prova själv →

<!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 Specificerad Från Vinkel

[från vinkel] anger en vinkel som hela koniska gradienten är roteras av.

Följande exempel visar en konisk gradient med en från-vinkel på 90 grader:

Exempel

En konisk gradient med en från vinkel:

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

Prova själv →

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

[vid position] anger mitten av den koniska gradienten.

Följande exempel visar en konisk gradient med en mittposition på 60% 45%:

Exempel

En konisk gradient med en specificerad mittposition:

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

Prova själv →

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



Upprepa en konisk gradient

Funktionen repeating-conic-gradient() används för att upprepa koniska gradienter:

Exempel

En upprepande konisk gradient:

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

Prova själv →

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


Här är en upprepad konisk gradient med definierade färgstarter och färgstopp:

Exempel

En upprepande konisk gradient med definierade färgstarter och färgstopp:

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

Prova själv →

<!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öljande tabell listar CSS-gradientfunktionerna:

conic-gradient()

Skapar en konisk gradient. Definiera minst två färger (runt en mittpunkt)

linear-gradient()

Skapar en linjär gradient. Definiera minst två färger (uppifrån och ned)

radial-gradient()

Skapar en radiell gradient. Definiera minst två färger (mitt till kanter)

repeating-conic-gradient()

Upprepar en konisk gradient

repeating-linear-gradient()

Upprepar en linjär gradient

repeating-radial-gradient()

Upprepar en radiell gradient