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.
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.
Följande exempel visar en konisk gradient med tre färger:
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>
Följande exempel visar en konisk gradient med fem färger:
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>
Följande exempel visar en konisk gradient med tre färger och en grad för varje färg:
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>
Lägg bara till border-radius: 50%
för att få den koniska gradienten att se ut som en paj:
#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:
#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>
[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:
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>
[vid position] anger mitten av den koniska gradienten.
Följande exempel visar en konisk gradient med en mittposition på 60% 45%:
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>
Funktionen repeating-conic-gradient()
används för att upprepa koniska gradienter:
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:
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>
Följande tabell listar CSS-gradientfunktionerna:
Skapar en konisk gradient. Definiera minst två färger (runt en mittpunkt)
Skapar en linjär gradient. Definiera minst två färger (uppifrån och ned)
Skapar en radiell gradient. Definiera minst två färger (mitt till kanter)
Upprepar en konisk gradient
Upprepar en linjär gradient
Upprepar en radiell gradient