A kúpos gradiens olyan színátmenet, amelynek színátmenetei egy középpont körül el vannak forgatva.
Kúpos gradiens létrehozásához legalább két színt meg kell határoznia.
background-image: conic-gradient([from angle] [at position,] color
[degree], color [degree], ...);Alapértelmezés szerint az angle 0 fok, a pozíció pedig a középpont.
Ha nincs fok megadva, a színek egyenlően oszlanak el a középpont.
A következő példa egy kúpos gradienst mutat be három színnel:
Kúpos gradiens három színnel:
#grad {
background-image: conic-gradient(red, yellow, green);
} Próbálja ki Ön is →
<!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>
A következő példa egy kúpos gradienst mutat be öt színnel:
Kúpos gradiens öt színnel:
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
} Próbálja ki Ön is →
<!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>
A következő példa egy kúpos gradienst mutat be három színnel és minden színhez egy fokozattal:
Kúpos gradiens három színnel és minden színhez egy fokozattal:
#grad {
background-image: conic-gradient(red 45deg, yellow
90deg, green 210deg);
} Próbálja ki Ön is →
<!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>
Csak adja hozzá a border-radius: 50% értéket, hogy a kúpos gradiens tortaszerű legyen:
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
} Próbálja ki Ön is →
<!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>
Itt van egy másik kördiagram az összes színhez meghatározott fokozatokkal:
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow
180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
} Próbálja ki Ön is →
<!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>
A [from angle] olyan szöget ad meg, amely a teljes kúpos gradiens által forgatva.
A következő példa egy kúpos gradienst mutat be 90 fokos szöggel:
Kúpos gradiens szögből:
#grad {
background-image: conic-gradient(from 90deg, red, yellow,
green);
} Próbálja ki Ön is →
<!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>
A [at pozíció] a kúpos gradiens középpontját adja meg.
A következő példa egy kúpos gradienst mutat be, amelynek középpontja 60% 45%:
Kúpos gradiens meghatározott középső pozícióval:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow,
green);
} Próbálja ki Ön is →
<!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>
A repeating-conic-gradient() függvény a kúpos gradiensek ismétlésére szolgál:
Ismétlődő kúpos gradiens:
#grad {
background-image:
repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
} Próbálja ki Ön is →
<!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>
Íme egy ismétlődő kúpos gradiens meghatározott színkezdetekkel és színleállításokkal:
Ismétlődő kúpos gradiens meghatározott színkezdetekkel és színleállításokkal:
#grad {
background-image:
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
} Próbálja ki Ön is →
<!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>
Az alábbi táblázat felsorolja a CSS gradiens függvényeit:
Kúpos gradienst hoz létre. Határozzon meg legalább kettőt színek (egy középpont körül)
Lineáris gradienst hoz létre. Határozzon meg legalább kettőt színek (fentről lefelé)
Radiális gradienst hoz létre. Határozzon meg legalább kettőt színek (középtől a szélekig)
Kúpos gradienst ismétel meg
Lineáris gradienst ismétel meg
Radiális gradienst ismétel meg