[{"data":1,"prerenderedAt":926},["ShallowReactive",2],{"guide-css-conic-gradient-guide":3},{"id":4,"title":5,"body":6,"date":918,"description":919,"extension":920,"meta":921,"navigation":655,"path":922,"readingTime":96,"seo":923,"stem":924,"__hash__":925},"guides\u002Fguides\u002Fcss-conic-gradient-guide.md","CSS Conic Gradients Explained",{"type":7,"value":8,"toc":903},"minimark",[9,14,18,34,38,41,117,152,155,164,167,172,175,212,215,219,226,361,364,477,480,484,487,535,538,542,545,699,702,706,712,742,745,749,807,811,847,851,886,890,899],[10,11,13],"h2",{"id":12},"what-is-a-conic-gradient","What Is a Conic Gradient?",[15,16,17],"p",{},"A conic gradient sweeps colors around a center point, like the slices of a pie chart or the hues on a color wheel. Unlike linear gradients that transition along a line or radial gradients that expand outward in circles, conic gradients rotate color stops around an origin angle — producing patterns that are impossible to replicate with the other two types.",[15,19,20,21,25,26,29,30,33],{},"The ",[22,23,24],"code",{},"conic-gradient()"," function is supported in all modern browsers and works anywhere CSS accepts an ",[22,27,28],{},"\u003Cimage>"," value — most commonly in ",[22,31,32],{},"background"," properties.",[10,35,37],{"id":36},"syntax-and-color-stops","Syntax and Color Stops",[15,39,40],{},"The full syntax gives you control over the center position, starting angle, and color transition points:",[42,43,48],"pre",{"className":44,"code":45,"language":46,"meta":47,"style":47},"language-css shiki shiki-themes github-light github-dark","background: conic-gradient(\n  from 45deg at 50% 50%,\n  #f00 0deg,\n  #ff0 90deg,\n  #0f0 180deg,\n  #00f 270deg,\n  #f00 360deg\n);\n","css","",[22,49,50,59,65,75,84,94,103,111],{"__ignoreMap":47},[51,52,55],"span",{"class":53,"line":54},"line",1,[51,56,58],{"class":57},"sVt8B","background: conic-gradient(\n",[51,60,62],{"class":53,"line":61},2,[51,63,64],{"class":57},"  from 45deg at 50% 50%,\n",[51,66,68,72],{"class":53,"line":67},3,[51,69,71],{"class":70},"sScJk","  #f00",[51,73,74],{"class":57}," 0deg,\n",[51,76,78,81],{"class":53,"line":77},4,[51,79,80],{"class":70},"  #ff0",[51,82,83],{"class":57}," 90deg,\n",[51,85,87,91],{"class":53,"line":86},5,[51,88,90],{"class":89},"s7hpK","  #0f0",[51,92,93],{"class":57}," 180deg,\n",[51,95,97,100],{"class":53,"line":96},6,[51,98,99],{"class":89},"  #00f",[51,101,102],{"class":57}," 270deg,\n",[51,104,106,108],{"class":53,"line":105},7,[51,107,71],{"class":70},[51,109,110],{"class":57}," 360deg\n",[51,112,114],{"class":53,"line":113},8,[51,115,116],{"class":57},");\n",[118,119,120,134,146],"ul",{},[121,122,123,129,130,133],"li",{},[124,125,126],"strong",{},[22,127,128],{},"from"," — sets the starting angle (defaults to ",[22,131,132],{},"0deg",", which is straight up).",[121,135,136,141,142,145],{},[124,137,138],{},[22,139,140],{},"at"," — positions the center point (defaults to ",[22,143,144],{},"center",").",[121,147,148,151],{},[124,149,150],{},"Color stops"," — specify colors at angle positions around the circle.",[15,153,154],{},"You can omit the angles entirely for equal distribution:",[42,156,158],{"className":44,"code":157,"language":46,"meta":47,"style":47},"background: conic-gradient(red, yellow, green, blue, red);\n",[22,159,160],{"__ignoreMap":47},[51,161,162],{"class":53,"line":54},[51,163,157],{"class":57},[15,165,166],{},"This divides the 360-degree sweep evenly among the five stops.",[168,169,171],"h3",{"id":170},"hard-stops-for-pie-slices","Hard Stops for Pie Slices",[15,173,174],{},"When two color stops share the same angle, you get a hard edge — perfect for pie-chart-like visuals:",[42,176,178],{"className":44,"code":177,"language":46,"meta":47,"style":47},"background: conic-gradient(\n  #4caf50 0deg 120deg,\n  #2196f3 120deg 240deg,\n  #ff9800 240deg 360deg\n);\n",[22,179,180,184,192,200,208],{"__ignoreMap":47},[51,181,182],{"class":53,"line":54},[51,183,58],{"class":57},[51,185,186,189],{"class":53,"line":61},[51,187,188],{"class":89},"  #4caf50",[51,190,191],{"class":57}," 0deg 120deg,\n",[51,193,194,197],{"class":53,"line":67},[51,195,196],{"class":89},"  #2196f3",[51,198,199],{"class":57}," 120deg 240deg,\n",[51,201,202,205],{"class":53,"line":77},[51,203,204],{"class":70},"  #ff9800",[51,206,207],{"class":57}," 240deg 360deg\n",[51,209,210],{"class":53,"line":86},[51,211,116],{"class":57},[15,213,214],{},"Each color occupies exactly one-third of the circle with no blending between them.",[10,216,218],{"id":217},"building-a-pie-chart","Building a Pie Chart",[15,220,221,222,225],{},"You can create a simple CSS-only pie chart by combining hard stops with ",[22,223,224],{},"border-radius: 50%",":",[42,227,229],{"className":44,"code":228,"language":46,"meta":47,"style":47},".pie-chart {\n  width: 200px;\n  height: 200px;\n  border-radius: 50%;\n  background: conic-gradient(\n    #6366f1 0deg 150deg,\n    #22d3ee 150deg 240deg,\n    #f472b6 240deg 360deg\n  );\n}\n",[22,230,231,239,258,271,286,299,318,334,349,355],{"__ignoreMap":47},[51,232,233,236],{"class":53,"line":54},[51,234,235],{"class":70},".pie-chart",[51,237,238],{"class":57}," {\n",[51,240,241,245,248,251,255],{"class":53,"line":61},[51,242,244],{"class":243},"sj4cs","  width",[51,246,247],{"class":57},": ",[51,249,250],{"class":243},"200",[51,252,254],{"class":253},"szBVR","px",[51,256,257],{"class":57},";\n",[51,259,260,263,265,267,269],{"class":53,"line":67},[51,261,262],{"class":243},"  height",[51,264,247],{"class":57},[51,266,250],{"class":243},[51,268,254],{"class":253},[51,270,257],{"class":57},[51,272,273,276,278,281,284],{"class":53,"line":77},[51,274,275],{"class":243},"  border-radius",[51,277,247],{"class":57},[51,279,280],{"class":243},"50",[51,282,283],{"class":253},"%",[51,285,257],{"class":57},[51,287,288,291,293,296],{"class":53,"line":86},[51,289,290],{"class":243},"  background",[51,292,247],{"class":57},[51,294,295],{"class":243},"conic-gradient",[51,297,298],{"class":57},"(\n",[51,300,301,304,307,310,313,315],{"class":53,"line":96},[51,302,303],{"class":243},"    #6366f1",[51,305,306],{"class":243}," 0",[51,308,309],{"class":253},"deg",[51,311,312],{"class":243}," 150",[51,314,309],{"class":253},[51,316,317],{"class":57},",\n",[51,319,320,323,325,327,330,332],{"class":53,"line":105},[51,321,322],{"class":243},"    #22d3ee",[51,324,312],{"class":243},[51,326,309],{"class":253},[51,328,329],{"class":243}," 240",[51,331,309],{"class":253},[51,333,317],{"class":57},[51,335,336,339,341,343,346],{"class":53,"line":113},[51,337,338],{"class":243},"    #f472b6",[51,340,329],{"class":243},[51,342,309],{"class":253},[51,344,345],{"class":243}," 360",[51,347,348],{"class":253},"deg\n",[51,350,352],{"class":53,"line":351},9,[51,353,354],{"class":57},"  );\n",[51,356,358],{"class":53,"line":357},10,[51,359,360],{"class":57},"}\n",[15,362,363],{},"To add a label in the center, overlay a smaller circle:",[42,365,367],{"className":44,"code":366,"language":46,"meta":47,"style":47},".pie-chart::after {\n  content: \"42%\";\n  position: absolute;\n  inset: 30%;\n  border-radius: 50%;\n  background: white;\n  display: grid;\n  place-items: center;\n  font-weight: 600;\n}\n",[22,368,369,376,389,401,415,427,438,450,461,473],{"__ignoreMap":47},[51,370,371,374],{"class":53,"line":54},[51,372,373],{"class":70},".pie-chart::after",[51,375,238],{"class":57},[51,377,378,381,383,387],{"class":53,"line":61},[51,379,380],{"class":243},"  content",[51,382,247],{"class":57},[51,384,386],{"class":385},"sZZnC","\"42%\"",[51,388,257],{"class":57},[51,390,391,394,396,399],{"class":53,"line":67},[51,392,393],{"class":243},"  position",[51,395,247],{"class":57},[51,397,398],{"class":243},"absolute",[51,400,257],{"class":57},[51,402,403,406,408,411,413],{"class":53,"line":77},[51,404,405],{"class":243},"  inset",[51,407,247],{"class":57},[51,409,410],{"class":243},"30",[51,412,283],{"class":253},[51,414,257],{"class":57},[51,416,417,419,421,423,425],{"class":53,"line":86},[51,418,275],{"class":243},[51,420,247],{"class":57},[51,422,280],{"class":243},[51,424,283],{"class":253},[51,426,257],{"class":57},[51,428,429,431,433,436],{"class":53,"line":96},[51,430,290],{"class":243},[51,432,247],{"class":57},[51,434,435],{"class":243},"white",[51,437,257],{"class":57},[51,439,440,443,445,448],{"class":53,"line":105},[51,441,442],{"class":243},"  display",[51,444,247],{"class":57},[51,446,447],{"class":243},"grid",[51,449,257],{"class":57},[51,451,452,455,457,459],{"class":53,"line":113},[51,453,454],{"class":243},"  place-items",[51,456,247],{"class":57},[51,458,144],{"class":243},[51,460,257],{"class":57},[51,462,463,466,468,471],{"class":53,"line":351},[51,464,465],{"class":243},"  font-weight",[51,467,247],{"class":57},[51,469,470],{"class":243},"600",[51,472,257],{"class":57},[51,474,475],{"class":53,"line":357},[51,476,360],{"class":57},[15,478,479],{},"This \"donut chart\" pattern is a common way to foreground a key metric inside the ring.",[10,481,483],{"id":482},"color-wheels-and-hue-rotations","Color Wheels and Hue Rotations",[15,485,486],{},"A conic gradient cycling through all hues produces a color wheel:",[42,488,490],{"className":44,"code":489,"language":46,"meta":47,"style":47},"background: conic-gradient(\n  hsl(0, 100%, 50%),\n  hsl(60, 100%, 50%),\n  hsl(120, 100%, 50%),\n  hsl(180, 100%, 50%),\n  hsl(240, 100%, 50%),\n  hsl(300, 100%, 50%),\n  hsl(360, 100%, 50%)\n);\n",[22,491,492,496,501,506,511,516,521,526,531],{"__ignoreMap":47},[51,493,494],{"class":53,"line":54},[51,495,58],{"class":57},[51,497,498],{"class":53,"line":61},[51,499,500],{"class":57},"  hsl(0, 100%, 50%),\n",[51,502,503],{"class":53,"line":67},[51,504,505],{"class":57},"  hsl(60, 100%, 50%),\n",[51,507,508],{"class":53,"line":77},[51,509,510],{"class":57},"  hsl(120, 100%, 50%),\n",[51,512,513],{"class":53,"line":86},[51,514,515],{"class":57},"  hsl(180, 100%, 50%),\n",[51,517,518],{"class":53,"line":96},[51,519,520],{"class":57},"  hsl(240, 100%, 50%),\n",[51,522,523],{"class":53,"line":105},[51,524,525],{"class":57},"  hsl(300, 100%, 50%),\n",[51,527,528],{"class":53,"line":113},[51,529,530],{"class":57},"  hsl(360, 100%, 50%)\n",[51,532,533],{"class":53,"line":351},[51,534,116],{"class":57},[15,536,537],{},"This is useful for color picker UIs or as a visual reference when working with HSL values.",[10,539,541],{"id":540},"spinner-and-loading-effects","Spinner and Loading Effects",[15,543,544],{},"Conic gradients shine in loading animations. A common spinner uses a fade from a solid color to transparency:",[42,546,548],{"className":44,"code":547,"language":46,"meta":47,"style":47},".spinner {\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  background: conic-gradient(#6366f1 0deg, transparent 270deg);\n  animation: spin 0.8s linear infinite;\n}\n\n@keyframes spin {\n  to { transform: rotate(360deg); }\n}\n",[22,549,550,557,570,582,594,625,647,651,657,668,694],{"__ignoreMap":47},[51,551,552,555],{"class":53,"line":54},[51,553,554],{"class":70},".spinner",[51,556,238],{"class":57},[51,558,559,561,563,566,568],{"class":53,"line":61},[51,560,244],{"class":243},[51,562,247],{"class":57},[51,564,565],{"class":243},"48",[51,567,254],{"class":253},[51,569,257],{"class":57},[51,571,572,574,576,578,580],{"class":53,"line":67},[51,573,262],{"class":243},[51,575,247],{"class":57},[51,577,565],{"class":243},[51,579,254],{"class":253},[51,581,257],{"class":57},[51,583,584,586,588,590,592],{"class":53,"line":77},[51,585,275],{"class":243},[51,587,247],{"class":57},[51,589,280],{"class":243},[51,591,283],{"class":253},[51,593,257],{"class":57},[51,595,596,598,600,602,605,608,610,612,615,618,621,623],{"class":53,"line":86},[51,597,290],{"class":243},[51,599,247],{"class":57},[51,601,295],{"class":243},[51,603,604],{"class":57},"(",[51,606,607],{"class":243},"#6366f1",[51,609,306],{"class":243},[51,611,309],{"class":253},[51,613,614],{"class":57},", ",[51,616,617],{"class":243},"transparent",[51,619,620],{"class":243}," 270",[51,622,309],{"class":253},[51,624,116],{"class":57},[51,626,627,630,633,636,639,642,645],{"class":53,"line":96},[51,628,629],{"class":243},"  animation",[51,631,632],{"class":57},": spin ",[51,634,635],{"class":243},"0.8",[51,637,638],{"class":253},"s",[51,640,641],{"class":243}," linear",[51,643,644],{"class":243}," infinite",[51,646,257],{"class":57},[51,648,649],{"class":53,"line":105},[51,650,360],{"class":57},[51,652,653],{"class":53,"line":113},[51,654,656],{"emptyLinePlaceholder":655},true,"\n",[51,658,659,662,666],{"class":53,"line":351},[51,660,661],{"class":253},"@keyframes",[51,663,665],{"class":664},"s4XuR"," spin",[51,667,238],{"class":57},[51,669,670,673,676,679,681,684,686,689,691],{"class":53,"line":357},[51,671,672],{"class":70},"  to",[51,674,675],{"class":57}," { ",[51,677,678],{"class":243},"transform",[51,680,247],{"class":57},[51,682,683],{"class":243},"rotate",[51,685,604],{"class":57},[51,687,688],{"class":243},"360",[51,690,309],{"class":253},[51,692,693],{"class":57},"); }\n",[51,695,697],{"class":53,"line":696},11,[51,698,360],{"class":57},[15,700,701],{},"The gradient fades out before completing the circle, so the \"tail\" disappears — creating a convincing spinning effect with just one element and no extra markup.",[10,703,705],{"id":704},"repeating-conic-gradients","Repeating Conic Gradients",[15,707,20,708,711],{},[22,709,710],{},"repeating-conic-gradient()"," function tiles the gradient pattern, producing ray or starburst effects:",[42,713,715],{"className":44,"code":714,"language":46,"meta":47,"style":47},"background: repeating-conic-gradient(\n  #1e1b4b 0deg 30deg,\n  #312e81 30deg 60deg\n);\n",[22,716,717,722,730,738],{"__ignoreMap":47},[51,718,719],{"class":53,"line":54},[51,720,721],{"class":57},"background: repeating-conic-gradient(\n",[51,723,724,727],{"class":53,"line":61},[51,725,726],{"class":89},"  #1e1b4b",[51,728,729],{"class":57}," 0deg 30deg,\n",[51,731,732,735],{"class":53,"line":67},[51,733,734],{"class":89},"  #312e81",[51,736,737],{"class":57}," 30deg 60deg\n",[51,739,740],{"class":53,"line":77},[51,741,116],{"class":57},[15,743,744],{},"This alternates two dark colors every 30 degrees, creating 12 identical slices. It works well for decorative backgrounds or subtle texture overlays.",[168,746,748],{"id":747},"comparison-conic-vs-repeating-conic","Comparison: Conic vs Repeating Conic",[750,751,752,770],"table",{},[753,754,755],"thead",{},[756,757,758,762,766],"tr",{},[759,760,761],"th",{},"Feature",[759,763,764],{},[22,765,24],{},[759,767,768],{},[22,769,710],{},[771,772,773,785,796],"tbody",{},[756,774,775,779,782],{},[776,777,778],"td",{},"Pattern",[776,780,781],{},"Single sweep, then last color fills",[776,783,784],{},"Repeats the defined pattern",[756,786,787,790,793],{},[776,788,789],{},"Use case",[776,791,792],{},"Pie charts, color wheels",[776,794,795],{},"Rays, burst patterns, texture",[756,797,798,801,804],{},[776,799,800],{},"Blank areas",[776,802,803],{},"Last color extends beyond stops",[776,805,806],{},"Stops loop automatically",[10,808,810],{"id":809},"common-mistakes","Common Mistakes",[118,812,813,823,838],{},[121,814,815,818,819,822],{},[124,816,817],{},"Forgetting to close the circle"," — if your last color stop is less than ",[22,820,821],{},"360deg",", the remaining angle fills with the last color. This is often unintended.",[121,824,825,828,829,614,831,614,834,837],{},[124,826,827],{},"Using percentages instead of degrees"," — conic-gradient uses angle units (",[22,830,309],{},[22,832,833],{},"rad",[22,835,836],{},"turn","), not percentages like linear and radial gradients.",[121,839,840,846],{},[124,841,842,843],{},"Not setting ",[22,844,845],{},"border-radius"," — without it, you get a square with a conic pattern, not a circle.",[10,848,850],{"id":849},"key-takeaways","Key Takeaways",[118,852,853,856,859,867,872,880],{},[121,854,855],{},"Conic gradients rotate color around a center point, unlike linear (along a line) or radial (outward from center).",[121,857,858],{},"Hard stops at the same angle create pie-slice effects with no blending.",[121,860,861,863,864,866],{},[22,862,128],{}," and ",[22,865,140],{}," keywords let you control starting angle and center position.",[121,868,869,871],{},[22,870,710],{}," tiles the pattern for ray and starburst effects.",[121,873,874,875,614,877,879],{},"Always use angle units (",[22,876,309],{},[22,878,836],{},") for color stops, not percentages.",[121,881,882,883,885],{},"Pair with ",[22,884,224],{}," for circular visuals like pie charts and spinners.",[10,887,889],{"id":888},"try-it-yourself","Try It Yourself",[15,891,892,893,898],{},"Experiment with conic gradient angles, color stops, and center positions in real time using the ",[894,895,897],"a",{"href":896},"\u002Ftools\u002Fcss-gradient","CSS Gradient Generator",".",[900,901,902],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":47,"searchDepth":61,"depth":61,"links":904},[905,906,909,910,911,912,915,916,917],{"id":12,"depth":61,"text":13},{"id":36,"depth":61,"text":37,"children":907},[908],{"id":170,"depth":67,"text":171},{"id":217,"depth":61,"text":218},{"id":482,"depth":61,"text":483},{"id":540,"depth":61,"text":541},{"id":704,"depth":61,"text":705,"children":913},[914],{"id":747,"depth":67,"text":748},{"id":809,"depth":61,"text":810},{"id":849,"depth":61,"text":850},{"id":888,"depth":61,"text":889},"2026-05-28","Create pie charts, color wheels, and spinner effects using CSS conic-gradient syntax.","md",{"immutable":655},"\u002Fguides\u002Fcss-conic-gradient-guide",{"title":5,"description":919},"guides\u002Fcss-conic-gradient-guide","ErMyVD0qGx-aW8dD60V-HWTs9QLTK9Mg0Secg5I_5SY",1780401332735]