.ﺪﺧﺮﭼ ﯽﻣ ﯼﺰﮐﺮﻣ ﻪﻄﻘﻧ ﮏﯾ ﻝﻮﺣ ﻪﮐ ﺖﺳﺍ ﮓﻧﺭ ﻝﺎﻘﺘﻧﺍ ﺎﺑ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ ﯽﻃﻭﺮﺨﻣ ﻥﺎﯾﺩﺍﺮﮔ
.ﺪﯿﻨﮐ ﻒﯾﺮﻌﺗ ﮓﻧﺭ ﻭﺩ ﻞﻗﺍﺪﺣ ﺪﯾﺎﺑ ﯽﻃﻭﺮﺨﻣ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ
background-image: conic-gradient([from angle] [at position,] color
[degree], color [degree], ...);.ﺖﺳﺍ ﺰﮐﺮﻣ position ﻭ ﻪﺟﺭﺩ 0/>ﻪﯾﻭﺍﺯ ،ﺽﺮﻓ ﺶﯿﭘ ﺭﻮﻃ ﻪﺑ
ﺪﻧﻮﺷ ﯽﻣ ﺶﺨﭘ ﻑﺍﺮﻃﺍ ﺭﺩ ﯼﻭﺎﺴﻣ ﺭﻮﻃ ﻪﺑ ﺎﻫ ﮓﻧﺭ ،ﺪﺷﺎﺑ ﻩﺪﺸﻧ ﺺﺨﺸﻣ ﻪﺟﺭﺩ ﺮﮔﺍ
:ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﮓﻧﺭ ﻪﺳ ﺎﺑ ﯽﻃﻭﺮﺨﻣ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ ﺮﯾﺯ ﻝﺎﺜﻣ
:ﮓﻧﺭ ﻪﺳ ﺎﺑ ﯽﻃﻭﺮﺨﻣ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ
#grad {
background-image: conic-gradient(red, yellow, green);
} → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!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>
:ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﮓﻧﺭ ﺞﻨﭘ ﺎﺑ ﯽﻃﻭﺮﺨﻣ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ ﺮﯾﺯ ﻝﺎﺜﻣ
:ﮓﻧﺭ ﺞﻨﭘ ﺎﺑ ﯽﻃﻭﺮﺨﻣ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
} → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!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>
:ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﮓﻧﺭ ﺮﻫ ﯼﺍﺮﺑ ﻪﺟﺭﺩ ﮏﯾ ﻭ ﮓﻧﺭ ﻪﺳ ﺎﺑ ﯽﻃﻭﺮﺨﻣ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ ﺮﯾﺯ ﻝﺎﺜﻣ
:ﮓﻧﺭ ﺮﻫ ﯼﺍﺮﺑ ﻪﺟﺭﺩ ﮏﯾ ﻭ ﮓﻧﺭ ﻪﺳ ﺎﺑ ﯽﻃﻭﺮﺨﻣ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ
#grad {
background-image: conic-gradient(red 45deg, yellow
90deg, green 210deg);
} → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!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>
:ﺪﺳﺮﺑ ﺮﻈﻧ ﻪﺑ ﯼﺎﭘ ﮏﯾ ﻪﯿﺒﺷ ﯽﻃﻭﺮﺨﻣ ﺐﯿﺷ ﺎﺗ ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺍﺭ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ :ﺩﺭﺍﺩ ﺩﻮﺟﻭ ﺎﻫ ﮓﻧﺭ ﻪﻤﻫ ﯼﺍﺮﺑ ﻩﺪﺷ ﻒﯾﺮﻌﺗ ﯼﺎﻫ ﻪﺟﺭﺩ ﺎﺑ ﯼﺮﮕﯾﺩ ﯼﺍ ﻩﺮﯾﺍﺩ ﺭﺍﺩﻮﻤﻧ ﺎﺠﻨﯾﺍ ﺭ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ [from angle] ﺖﺳﺍ ﯽﻃﻭﺮﺨﻣ ﻥﺎﯾﺩﺍﺮﮔ ﻞﮐ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﯼﺍ ﻪﯾﻭﺍﺯ :ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﻪﺟﺭﺩ 90 ﻪﯾﻭﺍﺯ ﺎﺑ ﯽﻃﻭﺮﺨﻣ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ ﺮﯾﺯ ﻝﺎﺜﻣ :ﺯﺍ ﻪﯾﻭﺍﺯ ﺎﺑ ﯽﻃﻭﺮﺨﻣ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ .ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﯽﻃﻭﺮﺨﻣ ﺐﯿﺷ ﺰﮐﺮﻣ [ﺖﯿﻌﻗﻮﻣ ﺭﺩ] :ﺪﻫﺩﯽﻣ ﻥﺎﺸﻧ ﺍﺭ %45 %60 ﯼﺰﮐﺮﻣ ﺖﯿﻌﻗﻮﻣ ﺎﺑ ﯽﻃﻭﺮﺨﻣ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ ﺮﯾﺯ ﻝﺎﺜﻣ :ﺺﺨﺸﻣ ﯼﺰﮐﺮﻣ ﺖﯿﻌﻗﻮﻣ ﺎﺑ ﯽﻃﻭﺮﺨﻣ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ :ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﯽﻃﻭﺮﺨﻣ ﯼﺎﻫ ﻥﺎﯾﺩﺍﺮﮔ ﺭﺍﺮﮑﺗ ﯼﺍﺮﺑ :ﯼﺭﺍﺮﮑﺗ ﯽﻃﻭﺮﺨﻣ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ :ﺖﺳﺍ ﻩﺪﺷ ﻒﯾﺮﻌﺗ ﮓﻧﺭ ﻒﻗﻮﺗ ﻭ ﻉﻭﺮﺷ ﺎﺑ ﯼﺭﺍﺮﮑﺗ ﯽﻃﻭﺮﺨﻣ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ ﺎﺠﻨﯾﺍ ﺭﺩ :ﺺﺨﺸﻣ ﮓﻧﺭ ﻒﻗﻮﺗ ﻭ ﻉﻭﺮﺷ ﺎﺑ ﯼﺭﺍﺮﮑﺗ ﯽﻃﻭﺮﺨﻣ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ :ﺪﻨﮐ ﯽﻣ ﺖﺳﺮﻬﻓ ﺍﺭ CSS ﻥﺎﯾﺩﺍﺮﮔ ﻊﺑﺍﻮﺗ ﺮﯾﺯ ﻝﻭﺪﺟ ﺪﯿﻨﮐ ﻒﯾﺮﻌﺗ ﺍﺭ ﺩﺭﻮﻣ ﻭﺩ ﻞﻗﺍﺪﺣ .ﺪﻨﮐ ﯽﻣ ﺩﺎﺠﯾﺍ ﯽﻃﻭﺮﺨﻣ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ ﺪﯿﻨﮐ ﻒﯾﺮﻌﺗ ﺍﺭ ﺩﺭﻮﻣ ﻭﺩ ﻞﻗﺍﺪﺣ .ﺪﻨﮐ ﯽﻣ ﺩﺎﺠﯾﺍ ﯽﻄﺧ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ ﺪﯿﻨﮐ ﻒﯾﺮﻌﺗ ﺍﺭ ﺩﺭﻮﻣ ﻭﺩ ﻞﻗﺍﺪﺣ .ﺪﻨﮐ ﯽﻣ ﺩﺎﺠﯾﺍ ﯽﻋﺎﻌﺷ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ ﺪﻨﮐ ﯽﻣ ﺭﺍﺮﮑﺗ ﺍﺭ ﯽﻃﻭﺮﺨﻣ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ ﺪﻨﮐ ﯽﻣ ﺭﺍﺮﮑﺗ ﺍﺭ ﯽﻄﺧ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ ﺪﻨﮐ ﯽﻣ ﺭﺍﺮﮑﺗ ﺍﺭ ﯽﻋﺎﻌﺷ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ
ﻝﺎﺜﻣ
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
} <!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>
ﻝﺎﺜﻣ
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow
180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
} <!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>
ﻪﯾﻭﺍﺯ ﺯﺍ ﻩﺪﺷ ﺺﺨﺸﻣ ﺎﺑ ﯽﻃﻭﺮﺨﻣ ﻥﺎﯾﺩﺍﺮﮔ
ﻝﺎﺜﻣ
#grad {
background-image: conic-gradient(from 90deg, red, yellow,
green);
} <!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>
ﺺﺨﺸﻣ ﯼﺰﮐﺮﻣ ﺖﯿﻌﻗﻮﻣ ﺎﺑ ﯽﻃﻭﺮﺨﻣ ﻥﺎﯾﺩﺍﺮﮔ
ﻝﺎﺜﻣ
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow,
green);
} <!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>
ﯽﻃﻭﺮﺨﻣ ﻥﺎﯾﺩﺍﺮﮔ ﮏﯾ ﺭﺍﺮﮑﺗ
repeat ﻝﺎﺜﻣ
#grad {
background-image:
repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
} <!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>
ﻝﺎﺜﻣ
#grad {
background-image:
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
} <!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 ﻥﺎﯾﺩﺍﺮﮔ ﻊﺑﺍﻮﺗ