[{"data":1,"prerenderedAt":1129},["ShallowReactive",2],{"guide-css-radial-gradients-tutorial":3},{"id":4,"title":5,"body":6,"date":1121,"description":1122,"extension":1123,"meta":1124,"navigation":69,"path":1125,"readingTime":103,"seo":1126,"stem":1127,"__hash__":1128},"guides\u002Fguides\u002Fcss-radial-gradients-tutorial.md","CSS Radial Gradients Tutorial: From Basic to Advanced",{"type":7,"value":8,"toc":1103},"minimark",[9,14,18,21,25,125,135,139,186,291,295,302,421,424,428,431,485,536,539,592,596,599,702,705,709,714,805,809,893,897,975,979,986,990,1023,1027,1062,1066,1087,1091,1099],[10,11,13],"h2",{"id":12},"what-are-radial-gradients","What Are Radial Gradients?",[15,16,17],"p",{},"Radial gradients transition colors outward from a central point, creating circular or elliptical color blends. Unlike linear gradients that move along a straight axis, radial gradients radiate in all directions — perfect for spotlights, vignettes, and focal-point effects.",[15,19,20],{},"The browser draws a radial gradient by defining a center point, a shape, and a size, then distributing color stops from the center outward.",[10,22,24],{"id":23},"basic-syntax","Basic Syntax",[26,27,32],"pre",{"className":28,"code":29,"language":30,"meta":31,"style":31},"language-css shiki shiki-themes github-light github-dark","\u002F* Simplest form — two colors, centered, ellipse *\u002F\nbackground: radial-gradient(#3B82F6, #1E3A5F);\n\n\u002F* Explicit circle *\u002F\nbackground: radial-gradient(circle, #3B82F6, #1E3A5F);\n\n\u002F* Circle with custom center *\u002F\nbackground: radial-gradient(circle at 75% 25%, #3B82F6, #1E3A5F);\n","css","",[33,34,35,44,64,71,77,96,101,107],"code",{"__ignoreMap":31},[36,37,40],"span",{"class":38,"line":39},"line",1,[36,41,43],{"class":42},"sJ8bj","\u002F* Simplest form — two colors, centered, ellipse *\u002F\n",[36,45,47,51,55,58,61],{"class":38,"line":46},2,[36,48,50],{"class":49},"sVt8B","background: radial-gradient(",[36,52,54],{"class":53},"s7hpK","#3B82F6",[36,56,57],{"class":49},", ",[36,59,60],{"class":53},"#1E3A5F",[36,62,63],{"class":49},");\n",[36,65,67],{"class":38,"line":66},3,[36,68,70],{"emptyLinePlaceholder":69},true,"\n",[36,72,74],{"class":38,"line":73},4,[36,75,76],{"class":42},"\u002F* Explicit circle *\u002F\n",[36,78,80,82,86,88,90,92,94],{"class":38,"line":79},5,[36,81,50],{"class":49},[36,83,85],{"class":84},"s9eBZ","circle",[36,87,57],{"class":49},[36,89,54],{"class":53},[36,91,57],{"class":49},[36,93,60],{"class":53},[36,95,63],{"class":49},[36,97,99],{"class":38,"line":98},6,[36,100,70],{"emptyLinePlaceholder":69},[36,102,104],{"class":38,"line":103},7,[36,105,106],{"class":42},"\u002F* Circle with custom center *\u002F\n",[36,108,110,112,114,117,119,121,123],{"class":38,"line":109},8,[36,111,50],{"class":49},[36,113,85],{"class":84},[36,115,116],{"class":49}," at 75% 25%, ",[36,118,54],{"class":53},[36,120,57],{"class":49},[36,122,60],{"class":53},[36,124,63],{"class":49},[15,126,127,128,131,132,134],{},"If you omit the shape, the gradient defaults to ",[33,129,130],{},"ellipse",", which stretches to fill the container. Use ",[33,133,85],{}," when you want uniform radius regardless of container proportions.",[10,136,138],{"id":137},"shape-circle-vs-ellipse","Shape: Circle vs. Ellipse",[140,141,142,158],"table",{},[143,144,145],"thead",{},[146,147,148,152,155],"tr",{},[149,150,151],"th",{},"Shape",[149,153,154],{},"Behavior",[149,156,157],{},"Best For",[159,160,161,174],"tbody",{},[146,162,163,168,171],{},[164,165,166],"td",{},[33,167,85],{},[164,169,170],{},"Uniform radius in all directions",[164,172,173],{},"Spotlights, orbs, icons",[146,175,176,180,183],{},[164,177,178],{},[33,179,130],{},[164,181,182],{},"Stretches to match container aspect ratio",[164,184,185],{},"Backgrounds, hero sections",[26,187,189],{"className":28,"code":188,"language":30,"meta":31,"style":31},"\u002F* Circle — stays round even in wide containers *\u002F\n.card-icon {\n  background: radial-gradient(circle, #8B5CF6, #4C1D95);\n}\n\n\u002F* Ellipse — fills the full container naturally *\u002F\n.hero {\n  background: radial-gradient(ellipse at center, #1E293B, #0F172A);\n}\n",[33,190,191,196,205,234,239,243,248,255,286],{"__ignoreMap":31},[36,192,193],{"class":38,"line":39},[36,194,195],{"class":42},"\u002F* Circle — stays round even in wide containers *\u002F\n",[36,197,198,202],{"class":38,"line":46},[36,199,201],{"class":200},"sScJk",".card-icon",[36,203,204],{"class":49}," {\n",[36,206,207,211,214,217,220,222,224,227,229,232],{"class":38,"line":66},[36,208,210],{"class":209},"sj4cs","  background",[36,212,213],{"class":49},": ",[36,215,216],{"class":209},"radial-gradient",[36,218,219],{"class":49},"(",[36,221,85],{"class":209},[36,223,57],{"class":49},[36,225,226],{"class":209},"#8B5CF6",[36,228,57],{"class":49},[36,230,231],{"class":209},"#4C1D95",[36,233,63],{"class":49},[36,235,236],{"class":38,"line":73},[36,237,238],{"class":49},"}\n",[36,240,241],{"class":38,"line":79},[36,242,70],{"emptyLinePlaceholder":69},[36,244,245],{"class":38,"line":98},[36,246,247],{"class":42},"\u002F* Ellipse — fills the full container naturally *\u002F\n",[36,249,250,253],{"class":38,"line":103},[36,251,252],{"class":200},".hero",[36,254,204],{"class":49},[36,256,257,259,261,263,265,267,271,274,276,279,281,284],{"class":38,"line":109},[36,258,210],{"class":209},[36,260,213],{"class":49},[36,262,216],{"class":209},[36,264,219],{"class":49},[36,266,130],{"class":209},[36,268,270],{"class":269},"szBVR"," at",[36,272,273],{"class":209}," center",[36,275,57],{"class":49},[36,277,278],{"class":209},"#1E293B",[36,280,57],{"class":49},[36,282,283],{"class":209},"#0F172A",[36,285,63],{"class":49},[36,287,289],{"class":38,"line":288},9,[36,290,238],{"class":49},[10,292,294],{"id":293},"positioning-the-center","Positioning the Center",[15,296,297,298,301],{},"Control where the gradient originates using the ",[33,299,300],{},"at"," keyword followed by coordinates:",[26,303,305],{"className":28,"code":304,"language":30,"meta":31,"style":31},"\u002F* Keyword positions *\u002F\nbackground: radial-gradient(circle at top left, #3B82F6, #1E3A5F);\nbackground: radial-gradient(circle at center, #3B82F6, #1E3A5F);\nbackground: radial-gradient(circle at bottom right, #3B82F6, #1E3A5F);\n\n\u002F* Percentage positions *\u002F\nbackground: radial-gradient(circle at 20% 80%, #3B82F6, #1E3A5F);\n\n\u002F* Pixel positions *\u002F\nbackground: radial-gradient(circle at 100px 200px, #3B82F6, #1E3A5F);\n",[33,306,307,312,329,351,368,372,377,394,398,403],{"__ignoreMap":31},[36,308,309],{"class":38,"line":39},[36,310,311],{"class":42},"\u002F* Keyword positions *\u002F\n",[36,313,314,316,318,321,323,325,327],{"class":38,"line":46},[36,315,50],{"class":49},[36,317,85],{"class":84},[36,319,320],{"class":49}," at top left, ",[36,322,54],{"class":53},[36,324,57],{"class":49},[36,326,60],{"class":53},[36,328,63],{"class":49},[36,330,331,333,335,338,341,343,345,347,349],{"class":38,"line":66},[36,332,50],{"class":49},[36,334,85],{"class":84},[36,336,337],{"class":49}," at ",[36,339,340],{"class":84},"center",[36,342,57],{"class":49},[36,344,54],{"class":53},[36,346,57],{"class":49},[36,348,60],{"class":53},[36,350,63],{"class":49},[36,352,353,355,357,360,362,364,366],{"class":38,"line":73},[36,354,50],{"class":49},[36,356,85],{"class":84},[36,358,359],{"class":49}," at bottom right, ",[36,361,54],{"class":53},[36,363,57],{"class":49},[36,365,60],{"class":53},[36,367,63],{"class":49},[36,369,370],{"class":38,"line":79},[36,371,70],{"emptyLinePlaceholder":69},[36,373,374],{"class":38,"line":98},[36,375,376],{"class":42},"\u002F* Percentage positions *\u002F\n",[36,378,379,381,383,386,388,390,392],{"class":38,"line":103},[36,380,50],{"class":49},[36,382,85],{"class":84},[36,384,385],{"class":49}," at 20% 80%, ",[36,387,54],{"class":53},[36,389,57],{"class":49},[36,391,60],{"class":53},[36,393,63],{"class":49},[36,395,396],{"class":38,"line":109},[36,397,70],{"emptyLinePlaceholder":69},[36,399,400],{"class":38,"line":288},[36,401,402],{"class":42},"\u002F* Pixel positions *\u002F\n",[36,404,406,408,410,413,415,417,419],{"class":38,"line":405},10,[36,407,50],{"class":49},[36,409,85],{"class":84},[36,411,412],{"class":49}," at 100px 200px, ",[36,414,54],{"class":53},[36,416,57],{"class":49},[36,418,60],{"class":53},[36,420,63],{"class":49},[15,422,423],{},"For hero sections, positioning the gradient off-center creates dynamic, asymmetric light effects that feel more natural than a dead-center glow.",[10,425,427],{"id":426},"sizing-the-gradient","Sizing the Gradient",[15,429,430],{},"Size keywords control how far the gradient extends:",[140,432,433,443],{},[143,434,435],{},[146,436,437,440],{},[149,438,439],{},"Keyword",[149,441,442],{},"Description",[159,444,445,455,465,475],{},[146,446,447,452],{},[164,448,449],{},[33,450,451],{},"closest-side",[164,453,454],{},"Stops at the nearest edge",[146,456,457,462],{},[164,458,459],{},[33,460,461],{},"farthest-side",[164,463,464],{},"Extends to the farthest edge",[146,466,467,472],{},[164,468,469],{},[33,470,471],{},"closest-corner",[164,473,474],{},"Stops at the nearest corner",[146,476,477,482],{},[164,478,479],{},[33,480,481],{},"farthest-corner",[164,483,484],{},"Extends to the farthest corner (default)",[26,486,488],{"className":28,"code":487,"language":30,"meta":31,"style":31},"\u002F* Compact glow — stops at nearest edge *\u002F\nbackground: radial-gradient(circle closest-side at 30% 50%, #3B82F6, transparent);\n\n\u002F* Wide spread — reaches farthest corner *\u002F\nbackground: radial-gradient(circle farthest-corner at 30% 50%, #3B82F6, transparent);\n",[33,489,490,495,512,516,521],{"__ignoreMap":31},[36,491,492],{"class":38,"line":39},[36,493,494],{"class":42},"\u002F* Compact glow — stops at nearest edge *\u002F\n",[36,496,497,499,501,504,507,509],{"class":38,"line":46},[36,498,50],{"class":49},[36,500,85],{"class":84},[36,502,503],{"class":84}," closest-side",[36,505,506],{"class":49}," at 30% 50%, ",[36,508,54],{"class":53},[36,510,511],{"class":49},", transparent);\n",[36,513,514],{"class":38,"line":66},[36,515,70],{"emptyLinePlaceholder":69},[36,517,518],{"class":38,"line":73},[36,519,520],{"class":42},"\u002F* Wide spread — reaches farthest corner *\u002F\n",[36,522,523,525,527,530,532,534],{"class":38,"line":79},[36,524,50],{"class":49},[36,526,85],{"class":84},[36,528,529],{"class":84}," farthest-corner",[36,531,506],{"class":49},[36,533,54],{"class":53},[36,535,511],{"class":49},[15,537,538],{},"For explicit sizes:",[26,540,542],{"className":28,"code":541,"language":30,"meta":31,"style":31},"\u002F* Pixel-based sizing (circle) *\u002F\nbackground: radial-gradient(circle 150px at 50% 50%, #3B82F6, #1E3A5F);\n\n\u002F* Percentage-based sizing (ellipse) *\u002F\nbackground: radial-gradient(ellipse 80% 50% at 50% 50%, #3B82F6, #1E3A5F);\n",[33,543,544,549,566,570,575],{"__ignoreMap":31},[36,545,546],{"class":38,"line":39},[36,547,548],{"class":42},"\u002F* Pixel-based sizing (circle) *\u002F\n",[36,550,551,553,555,558,560,562,564],{"class":38,"line":46},[36,552,50],{"class":49},[36,554,85],{"class":84},[36,556,557],{"class":49}," 150px at 50% 50%, ",[36,559,54],{"class":53},[36,561,57],{"class":49},[36,563,60],{"class":53},[36,565,63],{"class":49},[36,567,568],{"class":38,"line":66},[36,569,70],{"emptyLinePlaceholder":69},[36,571,572],{"class":38,"line":73},[36,573,574],{"class":42},"\u002F* Percentage-based sizing (ellipse) *\u002F\n",[36,576,577,579,581,584,586,588,590],{"class":38,"line":79},[36,578,50],{"class":49},[36,580,130],{"class":84},[36,582,583],{"class":49}," 80% 50% at 50% 50%, ",[36,585,54],{"class":53},[36,587,57],{"class":49},[36,589,60],{"class":53},[36,591,63],{"class":49},[10,593,595],{"id":594},"color-stops","Color Stops",[15,597,598],{},"Color stops work the same way as in linear gradients:",[26,600,602],{"className":28,"code":601,"language":30,"meta":31,"style":31},"\u002F* Multi-stop radial *\u002F\nbackground: radial-gradient(\n  circle,\n  #FBBF24 0%,\n  #F59E0B 30%,\n  #D97706 60%,\n  #92400E 100%\n);\n\n\u002F* Hard-edge stop for ring effects *\u002F\nbackground: radial-gradient(\n  circle,\n  #3B82F6 0% 40%,\n  #1E3A5F 40% 100%\n);\n",[33,603,604,609,614,622,630,638,646,654,658,662,667,672,679,688,697],{"__ignoreMap":31},[36,605,606],{"class":38,"line":39},[36,607,608],{"class":42},"\u002F* Multi-stop radial *\u002F\n",[36,610,611],{"class":38,"line":46},[36,612,613],{"class":49},"background: radial-gradient(\n",[36,615,616,619],{"class":38,"line":66},[36,617,618],{"class":84},"  circle",[36,620,621],{"class":49},",\n",[36,623,624,627],{"class":38,"line":73},[36,625,626],{"class":200},"  #FBBF24",[36,628,629],{"class":49}," 0%,\n",[36,631,632,635],{"class":38,"line":79},[36,633,634],{"class":200},"  #F59E0B",[36,636,637],{"class":49}," 30%,\n",[36,639,640,643],{"class":38,"line":98},[36,641,642],{"class":200},"  #D97706",[36,644,645],{"class":49}," 60%,\n",[36,647,648,651],{"class":38,"line":103},[36,649,650],{"class":53},"  #92400E",[36,652,653],{"class":49}," 100%\n",[36,655,656],{"class":38,"line":109},[36,657,63],{"class":49},[36,659,660],{"class":38,"line":288},[36,661,70],{"emptyLinePlaceholder":69},[36,663,664],{"class":38,"line":405},[36,665,666],{"class":42},"\u002F* Hard-edge stop for ring effects *\u002F\n",[36,668,670],{"class":38,"line":669},11,[36,671,613],{"class":49},[36,673,675,677],{"class":38,"line":674},12,[36,676,618],{"class":84},[36,678,621],{"class":49},[36,680,682,685],{"class":38,"line":681},13,[36,683,684],{"class":53},"  #3B82F6",[36,686,687],{"class":49}," 0% 40%,\n",[36,689,691,694],{"class":38,"line":690},14,[36,692,693],{"class":53},"  #1E3A5F",[36,695,696],{"class":49}," 40% 100%\n",[36,698,700],{"class":38,"line":699},15,[36,701,63],{"class":49},[15,703,704],{},"When two stops share the same position, the transition becomes a hard edge — useful for creating rings, targets, and bullseye patterns.",[10,706,708],{"id":707},"practical-design-patterns","Practical Design Patterns",[710,711,713],"h3",{"id":712},"spotlight-effect","Spotlight Effect",[26,715,717],{"className":28,"code":716,"language":30,"meta":31,"style":31},".spotlight {\n  background: radial-gradient(\n    circle 300px at 70% 30%,\n    rgba(59, 130, 246, 0.15),\n    transparent\n  );\n}\n",[33,718,719,726,737,763,791,796,801],{"__ignoreMap":31},[36,720,721,724],{"class":38,"line":39},[36,722,723],{"class":200},".spotlight",[36,725,204],{"class":49},[36,727,728,730,732,734],{"class":38,"line":46},[36,729,210],{"class":209},[36,731,213],{"class":49},[36,733,216],{"class":209},[36,735,736],{"class":49},"(\n",[36,738,739,742,745,748,750,753,756,759,761],{"class":38,"line":66},[36,740,741],{"class":209},"    circle",[36,743,744],{"class":209}," 300",[36,746,747],{"class":269},"px",[36,749,270],{"class":269},[36,751,752],{"class":209}," 70",[36,754,755],{"class":269},"%",[36,757,758],{"class":209}," 30",[36,760,755],{"class":269},[36,762,621],{"class":49},[36,764,765,768,770,773,775,778,780,783,785,788],{"class":38,"line":73},[36,766,767],{"class":209},"    rgba",[36,769,219],{"class":49},[36,771,772],{"class":209},"59",[36,774,57],{"class":49},[36,776,777],{"class":209},"130",[36,779,57],{"class":49},[36,781,782],{"class":209},"246",[36,784,57],{"class":49},[36,786,787],{"class":209},"0.15",[36,789,790],{"class":49},"),\n",[36,792,793],{"class":38,"line":79},[36,794,795],{"class":209},"    transparent\n",[36,797,798],{"class":38,"line":98},[36,799,800],{"class":49},"  );\n",[36,802,803],{"class":38,"line":103},[36,804,238],{"class":49},[710,806,808],{"id":807},"vignette-overlay","Vignette Overlay",[26,810,812],{"className":28,"code":811,"language":30,"meta":31,"style":31},".vignette {\n  background: radial-gradient(\n    ellipse at center,\n    transparent 50%,\n    rgba(0, 0, 0, 0.4) 100%\n  );\n}\n",[33,813,814,821,831,842,854,885,889],{"__ignoreMap":31},[36,815,816,819],{"class":38,"line":39},[36,817,818],{"class":200},".vignette",[36,820,204],{"class":49},[36,822,823,825,827,829],{"class":38,"line":46},[36,824,210],{"class":209},[36,826,213],{"class":49},[36,828,216],{"class":209},[36,830,736],{"class":49},[36,832,833,836,838,840],{"class":38,"line":66},[36,834,835],{"class":209},"    ellipse",[36,837,270],{"class":269},[36,839,273],{"class":209},[36,841,621],{"class":49},[36,843,844,847,850,852],{"class":38,"line":73},[36,845,846],{"class":209},"    transparent",[36,848,849],{"class":209}," 50",[36,851,755],{"class":269},[36,853,621],{"class":49},[36,855,856,858,860,863,865,867,869,871,873,876,879,882],{"class":38,"line":79},[36,857,767],{"class":209},[36,859,219],{"class":49},[36,861,862],{"class":209},"0",[36,864,57],{"class":49},[36,866,862],{"class":209},[36,868,57],{"class":49},[36,870,862],{"class":209},[36,872,57],{"class":49},[36,874,875],{"class":209},"0.4",[36,877,878],{"class":49},") ",[36,880,881],{"class":209},"100",[36,883,884],{"class":269},"%\n",[36,886,887],{"class":38,"line":98},[36,888,800],{"class":49},[36,890,891],{"class":38,"line":103},[36,892,238],{"class":49},[710,894,896],{"id":895},"glowing-button","Glowing Button",[26,898,900],{"className":28,"code":899,"language":30,"meta":31,"style":31},".glow-btn {\n  background: radial-gradient(circle, #8B5CF6, #6D28D9);\n  box-shadow: 0 0 30px rgba(139, 92, 246, 0.4);\n}\n",[33,901,902,909,932,971],{"__ignoreMap":31},[36,903,904,907],{"class":38,"line":39},[36,905,906],{"class":200},".glow-btn",[36,908,204],{"class":49},[36,910,911,913,915,917,919,921,923,925,927,930],{"class":38,"line":46},[36,912,210],{"class":209},[36,914,213],{"class":49},[36,916,216],{"class":209},[36,918,219],{"class":49},[36,920,85],{"class":209},[36,922,57],{"class":49},[36,924,226],{"class":209},[36,926,57],{"class":49},[36,928,929],{"class":209},"#6D28D9",[36,931,63],{"class":49},[36,933,934,937,939,941,944,946,948,951,953,956,958,961,963,965,967,969],{"class":38,"line":66},[36,935,936],{"class":209},"  box-shadow",[36,938,213],{"class":49},[36,940,862],{"class":209},[36,942,943],{"class":209}," 0",[36,945,758],{"class":209},[36,947,747],{"class":269},[36,949,950],{"class":209}," rgba",[36,952,219],{"class":49},[36,954,955],{"class":209},"139",[36,957,57],{"class":49},[36,959,960],{"class":209},"92",[36,962,57],{"class":49},[36,964,782],{"class":209},[36,966,57],{"class":49},[36,968,875],{"class":209},[36,970,63],{"class":49},[36,972,973],{"class":38,"line":73},[36,974,238],{"class":49},[710,976,978],{"id":977},"radial-progress-ring-with-conic-gradient","Radial Progress Ring (with conic gradient)",[15,980,981,982,985],{},"Combine with ",[33,983,984],{},"conic-gradient"," for a progress indicator — the radial gradient handles the background while the conic handles the arc.",[10,987,989],{"id":988},"common-mistakes","Common Mistakes",[991,992,993,1007,1017],"ul",{},[994,995,996,1003,1004,1006],"li",{},[997,998,999,1000,1002],"strong",{},"Using ",[33,1001,85],{}," on wide containers without sizing"," — the gradient stretches unpredictably. Always set an explicit size or use ",[33,1005,451],{},".",[994,1008,1009,1016],{},[997,1010,1011,1012,1015],{},"Forgetting ",[33,1013,1014],{},"transparent"," at the edge"," — without it, the outermost color fills the remaining space as a solid block.",[994,1018,1019,1022],{},[997,1020,1021],{},"Overlapping too many radial gradients"," — stacking three or more can hurt readability and GPU performance on mobile.",[10,1024,1026],{"id":1025},"key-takeaways","Key Takeaways",[991,1028,1029,1032,1041,1047,1056,1059],{},[994,1030,1031],{},"Radial gradients radiate from a center point, creating circles or ellipses",[994,1033,1034,1035,1037,1038,1040],{},"Use ",[33,1036,85],{}," for uniform radius, ",[33,1039,130],{}," (default) for container-filling shapes",[994,1042,1043,1044,1046],{},"Position the center with ",[33,1045,300],{}," for off-center light effects",[994,1048,1049,1050,1052,1053,1055],{},"Size keywords like ",[33,1051,451],{}," and ",[33,1054,481],{}," control the gradient spread",[994,1057,1058],{},"Hard-edge stops create ring and target patterns",[994,1060,1061],{},"Combine radial gradients with shadows and transparency for polished UI effects",[10,1063,1065],{"id":1064},"related-guides","Related Guides",[991,1067,1068,1075,1081],{},[994,1069,1070],{},[1071,1072,1074],"a",{"href":1073},"\u002Fguides\u002Fcss-gradient-guide","CSS Gradient Guide",[994,1076,1077],{},[1071,1078,1080],{"href":1079},"\u002Fguides\u002Fcss-linear-gradient-tutorial","CSS Linear Gradient Tutorial",[994,1082,1083],{},[1071,1084,1086],{"href":1085},"\u002Fguides\u002Fcss-design-tips","CSS Design Tips",[10,1088,1090],{"id":1089},"try-it-yourself","Try It Yourself",[15,1092,1093,1094,1098],{},"Build and preview radial gradients interactively with our ",[1071,1095,1097],{"href":1096},"\u002Ftools\u002Fcss-gradient","CSS Gradient Generator",". Adjust shape, position, and color stops, then copy the generated code into your project.",[1100,1101,1102],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}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 pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}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 .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}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}",{"title":31,"searchDepth":46,"depth":46,"links":1104},[1105,1106,1107,1108,1109,1110,1111,1117,1118,1119,1120],{"id":12,"depth":46,"text":13},{"id":23,"depth":46,"text":24},{"id":137,"depth":46,"text":138},{"id":293,"depth":46,"text":294},{"id":426,"depth":46,"text":427},{"id":594,"depth":46,"text":595},{"id":707,"depth":46,"text":708,"children":1112},[1113,1114,1115,1116],{"id":712,"depth":66,"text":713},{"id":807,"depth":66,"text":808},{"id":895,"depth":66,"text":896},{"id":977,"depth":66,"text":978},{"id":988,"depth":46,"text":989},{"id":1025,"depth":46,"text":1026},{"id":1064,"depth":46,"text":1065},{"id":1089,"depth":46,"text":1090},"2026-05-28","Learn how to create CSS radial gradients — circles, ellipses, positioning, sizing, and design patterns for modern web interfaces.","md",{"immutable":69},"\u002Fguides\u002Fcss-radial-gradients-tutorial",{"title":5,"description":1122},"guides\u002Fcss-radial-gradients-tutorial","4RqiqSQjyLB2qTb1-Cpc2dKYwQA-WUw3IuZ_MKBmR90",1780401333087]