[{"data":1,"prerenderedAt":1511},["ShallowReactive",2],{"guide-css-gradient-guide":3},{"id":4,"title":5,"body":6,"date":1503,"description":1504,"extension":1505,"meta":1506,"navigation":162,"path":1507,"readingTime":191,"seo":1508,"stem":1509,"__hash__":1510},"guides\u002Fguides\u002Fcss-gradient-guide.md","CSS Gradient Guide: Mastering Linear, Radial, and Conic Gradients",{"type":7,"value":8,"toc":1474},"minimark",[9,14,18,41,45,48,110,113,117,120,209,214,278,285,289,292,355,358,362,365,444,448,520,529,533,540,562,573,577,580,666,670,673,719,723,726,730,746,778,782,788,809,812,816,823,973,976,980,984,1133,1137,1196,1200,1278,1282,1397,1401,1437,1441,1450,1454,1470],[10,11,13],"h2",{"id":12},"what-are-css-gradients","What Are CSS Gradients?",[15,16,17],"p",{},"CSS gradients let you transition smoothly between two or more colors without using any image files. They render at any resolution, scale with the viewport, and download instantly since the browser generates them on the fly.",[15,19,20,21,25,26,29,30,29,33,36,37,40],{},"You can use gradients anywhere a CSS ",[22,23,24],"code",{},"\u003Cimage>"," value is accepted — ",[22,27,28],{},"background",", ",[22,31,32],{},"border-image",[22,34,35],{},"list-style-image",", and even ",[22,38,39],{},"mask-image",". That flexibility makes them one of the most powerful visual tools in CSS.",[10,42,44],{"id":43},"the-three-gradient-types","The Three Gradient Types",[15,46,47],{},"CSS provides three gradient functions, each producing a different visual pattern:",[49,50,51,67],"table",{},[52,53,54],"thead",{},[55,56,57,61,64],"tr",{},[58,59,60],"th",{},"Type",[58,62,63],{},"Function",[58,65,66],{},"Visual Pattern",[68,69,70,84,97],"tbody",{},[55,71,72,76,81],{},[73,74,75],"td",{},"Linear",[73,77,78],{},[22,79,80],{},"linear-gradient()",[73,82,83],{},"Colors flow along a straight line",[55,85,86,89,94],{},[73,87,88],{},"Radial",[73,90,91],{},[22,92,93],{},"radial-gradient()",[73,95,96],{},"Colors radiate from a center point",[55,98,99,102,107],{},[73,100,101],{},"Conic",[73,103,104],{},[22,105,106],{},"conic-gradient()",[73,108,109],{},"Colors sweep around a center point like aPie chart",[15,111,112],{},"All three share the same color stop syntax, so once you understand stops you can apply that knowledge across every type.",[10,114,116],{"id":115},"linear-gradients","Linear Gradients",[15,118,119],{},"A linear gradient transitions colors along a straight axis. You control the direction with an angle or a keyword.",[121,122,127],"pre",{"className":123,"code":124,"language":125,"meta":126,"style":126},"language-css shiki shiki-themes github-light github-dark","\u002F* Direction keyword *\u002F\nbackground: linear-gradient(to right, #3B82F6, #8B5CF6);\n\n\u002F* Angle in degrees *\u002F\nbackground: linear-gradient(135deg, #3B82F6, #8B5CF6);\n\n\u002F* Top to bottom (default) *\u002F\nbackground: linear-gradient(#3B82F6, #8B5CF6);\n","css","",[22,128,129,138,157,164,170,184,189,195],{"__ignoreMap":126},[130,131,134],"span",{"class":132,"line":133},"line",1,[130,135,137],{"class":136},"sJ8bj","\u002F* Direction keyword *\u002F\n",[130,139,141,145,149,151,154],{"class":132,"line":140},2,[130,142,144],{"class":143},"sVt8B","background: linear-gradient(to right, ",[130,146,148],{"class":147},"s7hpK","#3B82F6",[130,150,29],{"class":143},[130,152,153],{"class":147},"#8B5CF6",[130,155,156],{"class":143},");\n",[130,158,160],{"class":132,"line":159},3,[130,161,163],{"emptyLinePlaceholder":162},true,"\n",[130,165,167],{"class":132,"line":166},4,[130,168,169],{"class":136},"\u002F* Angle in degrees *\u002F\n",[130,171,173,176,178,180,182],{"class":132,"line":172},5,[130,174,175],{"class":143},"background: linear-gradient(135deg, ",[130,177,148],{"class":147},[130,179,29],{"class":143},[130,181,153],{"class":147},[130,183,156],{"class":143},[130,185,187],{"class":132,"line":186},6,[130,188,163],{"emptyLinePlaceholder":162},[130,190,192],{"class":132,"line":191},7,[130,193,194],{"class":136},"\u002F* Top to bottom (default) *\u002F\n",[130,196,198,201,203,205,207],{"class":132,"line":197},8,[130,199,200],{"class":143},"background: linear-gradient(",[130,202,148],{"class":147},[130,204,29],{"class":143},[130,206,153],{"class":147},[130,208,156],{"class":143},[210,211,213],"h3",{"id":212},"angles-vs-direction-keywords","Angles vs. Direction Keywords",[49,215,216,226],{},[52,217,218],{},[55,219,220,223],{},[58,221,222],{},"Keyword",[58,224,225],{},"Equivalent Angle",[68,227,228,238,248,258,268],{},[55,229,230,235],{},[73,231,232],{},[22,233,234],{},"to top",[73,236,237],{},"0deg",[55,239,240,245],{},[73,241,242],{},[22,243,244],{},"to right",[73,246,247],{},"90deg",[55,249,250,255],{},[73,251,252],{},[22,253,254],{},"to bottom",[73,256,257],{},"180deg (default)",[55,259,260,265],{},[73,261,262],{},[22,263,264],{},"to left",[73,266,267],{},"270deg",[55,269,270,275],{},[73,271,272],{},[22,273,274],{},"to top right",[73,276,277],{},"45deg",[15,279,280,281,284],{},"Angles give you finer control. A direction of ",[22,282,283],{},"137deg"," has no keyword equivalent — use the degree value when you need precision.",[210,286,288],{"id":287},"multi-stop-gradients","Multi-Stop Gradients",[15,290,291],{},"You can add as many color stops as you want. The browser distributes them evenly by default, or you can specify exact positions.",[121,293,295],{"className":123,"code":294,"language":125,"meta":126,"style":126},"\u002F* Evenly distributed *\u002F\nbackground: linear-gradient(to right, #EF4444, #F59E0B, #10B981, #3B82F6);\n\n\u002F* Custom positions *\u002F\nbackground: linear-gradient(to right, #3B82F6 0%, #8B5CF6 50%, #EC4899 100%);\n",[22,296,297,302,326,330,335],{"__ignoreMap":126},[130,298,299],{"class":132,"line":133},[130,300,301],{"class":136},"\u002F* Evenly distributed *\u002F\n",[130,303,304,306,310,312,315,317,320,322,324],{"class":132,"line":140},[130,305,144],{"class":143},[130,307,309],{"class":308},"sScJk","#EF4444",[130,311,29],{"class":143},[130,313,314],{"class":308},"#F59E0B",[130,316,29],{"class":143},[130,318,319],{"class":147},"#10B981",[130,321,29],{"class":143},[130,323,148],{"class":147},[130,325,156],{"class":143},[130,327,328],{"class":132,"line":159},[130,329,163],{"emptyLinePlaceholder":162},[130,331,332],{"class":132,"line":166},[130,333,334],{"class":136},"\u002F* Custom positions *\u002F\n",[130,336,337,339,341,344,346,349,352],{"class":132,"line":172},[130,338,144],{"class":143},[130,340,148],{"class":147},[130,342,343],{"class":143}," 0%, ",[130,345,153],{"class":147},[130,347,348],{"class":143}," 50%, ",[130,350,351],{"class":308},"#EC4899",[130,353,354],{"class":143}," 100%);\n",[15,356,357],{},"Position values use percentages or length units. If you skip positions, the browser calculates them automatically based on the number of stops.",[10,359,361],{"id":360},"radial-gradients","Radial Gradients",[15,363,364],{},"A radial gradient expands outward from a center point. You control the shape, size, and position.",[121,366,368],{"className":123,"code":367,"language":125,"meta":126,"style":126},"\u002F* Basic radial gradient *\u002F\nbackground: radial-gradient(#3B82F6, #1E3A5F);\n\n\u002F* Custom shape and size *\u002F\nbackground: radial-gradient(circle at top left, #3B82F6, #1E3A5F);\n\n\u002F* Ellipse (default) with explicit size *\u002F\nbackground: radial-gradient(ellipse 80% 50% at 50% 50%, #3B82F6, #1E3A5F);\n",[22,369,370,375,389,393,398,417,421,426],{"__ignoreMap":126},[130,371,372],{"class":132,"line":133},[130,373,374],{"class":136},"\u002F* Basic radial gradient *\u002F\n",[130,376,377,380,382,384,387],{"class":132,"line":140},[130,378,379],{"class":143},"background: radial-gradient(",[130,381,148],{"class":147},[130,383,29],{"class":143},[130,385,386],{"class":147},"#1E3A5F",[130,388,156],{"class":143},[130,390,391],{"class":132,"line":159},[130,392,163],{"emptyLinePlaceholder":162},[130,394,395],{"class":132,"line":166},[130,396,397],{"class":136},"\u002F* Custom shape and size *\u002F\n",[130,399,400,402,406,409,411,413,415],{"class":132,"line":172},[130,401,379],{"class":143},[130,403,405],{"class":404},"s9eBZ","circle",[130,407,408],{"class":143}," at top left, ",[130,410,148],{"class":147},[130,412,29],{"class":143},[130,414,386],{"class":147},[130,416,156],{"class":143},[130,418,419],{"class":132,"line":186},[130,420,163],{"emptyLinePlaceholder":162},[130,422,423],{"class":132,"line":191},[130,424,425],{"class":136},"\u002F* Ellipse (default) with explicit size *\u002F\n",[130,427,428,430,433,436,438,440,442],{"class":132,"line":197},[130,429,379],{"class":143},[130,431,432],{"class":404},"ellipse",[130,434,435],{"class":143}," 80% 50% at 50% 50%, ",[130,437,148],{"class":147},[130,439,29],{"class":143},[130,441,386],{"class":147},[130,443,156],{"class":143},[210,445,447],{"id":446},"shape-and-size-options","Shape and Size Options",[49,449,450,460],{},[52,451,452],{},[55,453,454,457],{},[58,455,456],{},"Value",[58,458,459],{},"Effect",[68,461,462,471,480,490,500,510],{},[55,463,464,468],{},[73,465,466],{},[22,467,405],{},[73,469,470],{},"Perfect circle radius",[55,472,473,477],{},[73,474,475],{},[22,476,432],{},[73,478,479],{},"Oval shaped (default)",[55,481,482,487],{},[73,483,484],{},[22,485,486],{},"closest-side",[73,488,489],{},"Gradient meets nearest edge",[55,491,492,497],{},[73,493,494],{},[22,495,496],{},"farthest-corner",[73,498,499],{},"Gradient reaches farthest corner (default)",[55,501,502,507],{},[73,503,504],{},[22,505,506],{},"closest-corner",[73,508,509],{},"Gradient meets nearest corner",[55,511,512,517],{},[73,513,514],{},[22,515,516],{},"farthest-side",[73,518,519],{},"Gradient reaches farthest side",[15,521,522,523,525,526,528],{},"Use ",[22,524,405],{}," when you want uniform expansion. Use ",[22,527,432],{}," (or omit the shape) for backgrounds that stretch with the container.",[210,530,532],{"id":531},"positioning-the-center","Positioning the Center",[15,534,535,536,539],{},"Place the gradient origin with the ",[22,537,538],{},"at"," keyword followed by coordinates:",[121,541,543],{"className":123,"code":542,"language":125,"meta":126,"style":126},"background: radial-gradient(circle at 75% 25%, #3B82F6, #1E3A5F);\n",[22,544,545],{"__ignoreMap":126},[130,546,547,549,551,554,556,558,560],{"class":132,"line":133},[130,548,379],{"class":143},[130,550,405],{"class":404},[130,552,553],{"class":143}," at 75% 25%, ",[130,555,148],{"class":147},[130,557,29],{"class":143},[130,559,386],{"class":147},[130,561,156],{"class":143},[15,563,564,565,568,569,572],{},"Coordinates can be percentages, pixels, or keywords like ",[22,566,567],{},"top left"," and ",[22,570,571],{},"center center",".",[10,574,576],{"id":575},"conic-gradients","Conic Gradients",[15,578,579],{},"A conic gradient rotates color stops around a center point. Think of a color wheel or a pie chart.",[121,581,583],{"className":123,"code":582,"language":125,"meta":126,"style":126},"\u002F* Basic conic gradient *\u002F\nbackground: conic-gradient(#3B82F6, #8B5CF6, #3B82F6);\n\n\u002F* Pie chart effect *\u002F\nbackground: conic-gradient(#3B82F6 0% 25%, #10B981 25% 50%, #F59E0B 50% 75%, #EF4444 75% 100%);\n\n\u002F* Rotated start angle *\u002F\nbackground: conic-gradient(from 45deg, #3B82F6, #8B5CF6, #3B82F6);\n",[22,584,585,590,607,611,616,640,644,649],{"__ignoreMap":126},[130,586,587],{"class":132,"line":133},[130,588,589],{"class":136},"\u002F* Basic conic gradient *\u002F\n",[130,591,592,595,597,599,601,603,605],{"class":132,"line":140},[130,593,594],{"class":143},"background: conic-gradient(",[130,596,148],{"class":147},[130,598,29],{"class":143},[130,600,153],{"class":147},[130,602,29],{"class":143},[130,604,148],{"class":147},[130,606,156],{"class":143},[130,608,609],{"class":132,"line":159},[130,610,163],{"emptyLinePlaceholder":162},[130,612,613],{"class":132,"line":166},[130,614,615],{"class":136},"\u002F* Pie chart effect *\u002F\n",[130,617,618,620,622,625,627,630,632,635,637],{"class":132,"line":172},[130,619,594],{"class":143},[130,621,148],{"class":147},[130,623,624],{"class":143}," 0% 25%, ",[130,626,319],{"class":147},[130,628,629],{"class":143}," 25% 50%, ",[130,631,314],{"class":308},[130,633,634],{"class":143}," 50% 75%, ",[130,636,309],{"class":308},[130,638,639],{"class":143}," 75% 100%);\n",[130,641,642],{"class":132,"line":186},[130,643,163],{"emptyLinePlaceholder":162},[130,645,646],{"class":132,"line":191},[130,647,648],{"class":136},"\u002F* Rotated start angle *\u002F\n",[130,650,651,654,656,658,660,662,664],{"class":132,"line":197},[130,652,653],{"class":143},"background: conic-gradient(from 45deg, ",[130,655,148],{"class":147},[130,657,29],{"class":143},[130,659,153],{"class":147},[130,661,29],{"class":143},[130,663,148],{"class":147},[130,665,156],{"class":143},[210,667,669],{"id":668},"hard-edge-stops","Hard-Edge Stops",[15,671,672],{},"When two color stops share the same position, the transition becomes a hard edge — no smooth blend. This is the key technique for pie charts and color wheels.",[121,674,676],{"className":123,"code":675,"language":125,"meta":126,"style":126},"background: conic-gradient(\n  #3B82F6 0deg 90deg,\n  #10B981 90deg 180deg,\n  #F59E0B 180deg 270deg,\n  #EF4444 270deg 360deg\n);\n",[22,677,678,683,691,699,707,715],{"__ignoreMap":126},[130,679,680],{"class":132,"line":133},[130,681,682],{"class":143},"background: conic-gradient(\n",[130,684,685,688],{"class":132,"line":140},[130,686,687],{"class":147},"  #3B82F6",[130,689,690],{"class":143}," 0deg 90deg,\n",[130,692,693,696],{"class":132,"line":159},[130,694,695],{"class":147},"  #10B981",[130,697,698],{"class":143}," 90deg 180deg,\n",[130,700,701,704],{"class":132,"line":166},[130,702,703],{"class":308},"  #F59E0B",[130,705,706],{"class":143}," 180deg 270deg,\n",[130,708,709,712],{"class":132,"line":172},[130,710,711],{"class":308},"  #EF4444",[130,713,714],{"class":143}," 270deg 360deg\n",[130,716,717],{"class":132,"line":186},[130,718,156],{"class":143},[10,720,722],{"id":721},"color-stops-and-positions","Color Stops and Positions",[15,724,725],{},"Color stops define what colors appear and where. Every gradient function shares this syntax.",[210,727,729],{"id":728},"basic-rules","Basic Rules",[731,732,733,737,740,743],"ul",{},[734,735,736],"li",{},"Stops are listed in order from start to end",[734,738,739],{},"Each stop has a color and an optional position",[734,741,742],{},"Positions can overlap for hard transitions",[734,744,745],{},"You can mix units (px, %, em) but percentages are most common",[121,747,749],{"className":123,"code":748,"language":125,"meta":126,"style":126},"\u002F* Two-color stop with hint *\u002F\nbackground: linear-gradient(to right, #3B82F6, 30%, #8B5CF6);\n\n\u002F* The 30% is a color hint — it shifts the midpoint of the transition *\u002F\n",[22,750,751,756,769,773],{"__ignoreMap":126},[130,752,753],{"class":132,"line":133},[130,754,755],{"class":136},"\u002F* Two-color stop with hint *\u002F\n",[130,757,758,760,762,765,767],{"class":132,"line":140},[130,759,144],{"class":143},[130,761,148],{"class":147},[130,763,764],{"class":143},", 30%, ",[130,766,153],{"class":147},[130,768,156],{"class":143},[130,770,771],{"class":132,"line":159},[130,772,163],{"emptyLinePlaceholder":162},[130,774,775],{"class":132,"line":166},[130,776,777],{"class":136},"\u002F* The 30% is a color hint — it shifts the midpoint of the transition *\u002F\n",[210,779,781],{"id":780},"transparency-gradients","Transparency Gradients",[15,783,522,784,787],{},[22,785,786],{},"transparent"," or RGBA\u002FHSLA values to create fade effects:",[121,789,791],{"className":123,"code":790,"language":125,"meta":126,"style":126},"\u002F* Fade to transparent *\u002F\nbackground: linear-gradient(to bottom, rgba(59, 130, 246, 0.8), transparent);\n",[22,792,793,798],{"__ignoreMap":126},[130,794,795],{"class":132,"line":133},[130,796,797],{"class":136},"\u002F* Fade to transparent *\u002F\n",[130,799,800,803,806],{"class":132,"line":140},[130,801,802],{"class":143},"background: linear-gradient(to bottom, rgba(59, 130, 246, 0",[130,804,805],{"class":308},".8",[130,807,808],{"class":143},"), transparent);\n",[15,810,811],{},"This technique is perfect for overlay gradients on hero sections — you darken the bottom without hiding the background image underneath.",[10,813,815],{"id":814},"repeating-gradients","Repeating Gradients",[15,817,818,819,822],{},"Each gradient type has a ",[22,820,821],{},"repeating-"," variant that tiles the pattern. The last color stop's position sets the tile size.",[121,824,826],{"className":123,"code":825,"language":125,"meta":126,"style":126},"\u002F* Vertical stripes *\u002F\nbackground: repeating-linear-gradient(\n  45deg,\n  #3B82F6 0px,\n  #3B82F6 10px,\n  #8B5CF6 10px,\n  #8B5CF6 20px\n);\n\n\u002F* Radial rings *\u002F\nbackground: repeating-radial-gradient(\n  circle,\n  #3B82F6 0px,\n  #3B82F6 10px,\n  #1E3A5F 10px,\n  #1E3A5F 20px\n);\n\n\u002F* Conic color wheel *\u002F\nbackground: repeating-conic-gradient(\n  #3B82F6 0deg 30deg,\n  #8B5CF6 30deg 60deg\n);\n",[22,827,828,833,838,843,850,857,864,871,875,880,886,892,901,908,915,923,930,935,940,946,952,960,968],{"__ignoreMap":126},[130,829,830],{"class":132,"line":133},[130,831,832],{"class":136},"\u002F* Vertical stripes *\u002F\n",[130,834,835],{"class":132,"line":140},[130,836,837],{"class":143},"background: repeating-linear-gradient(\n",[130,839,840],{"class":132,"line":159},[130,841,842],{"class":143},"  45deg,\n",[130,844,845,847],{"class":132,"line":166},[130,846,687],{"class":147},[130,848,849],{"class":143}," 0px,\n",[130,851,852,854],{"class":132,"line":172},[130,853,687],{"class":147},[130,855,856],{"class":143}," 10px,\n",[130,858,859,862],{"class":132,"line":186},[130,860,861],{"class":147},"  #8B5CF6",[130,863,856],{"class":143},[130,865,866,868],{"class":132,"line":191},[130,867,861],{"class":147},[130,869,870],{"class":143}," 20px\n",[130,872,873],{"class":132,"line":197},[130,874,156],{"class":143},[130,876,878],{"class":132,"line":877},9,[130,879,163],{"emptyLinePlaceholder":162},[130,881,883],{"class":132,"line":882},10,[130,884,885],{"class":136},"\u002F* Radial rings *\u002F\n",[130,887,889],{"class":132,"line":888},11,[130,890,891],{"class":143},"background: repeating-radial-gradient(\n",[130,893,895,898],{"class":132,"line":894},12,[130,896,897],{"class":404},"  circle",[130,899,900],{"class":143},",\n",[130,902,904,906],{"class":132,"line":903},13,[130,905,687],{"class":147},[130,907,849],{"class":143},[130,909,911,913],{"class":132,"line":910},14,[130,912,687],{"class":147},[130,914,856],{"class":143},[130,916,918,921],{"class":132,"line":917},15,[130,919,920],{"class":147},"  #1E3A5F",[130,922,856],{"class":143},[130,924,926,928],{"class":132,"line":925},16,[130,927,920],{"class":147},[130,929,870],{"class":143},[130,931,933],{"class":132,"line":932},17,[130,934,156],{"class":143},[130,936,938],{"class":132,"line":937},18,[130,939,163],{"emptyLinePlaceholder":162},[130,941,943],{"class":132,"line":942},19,[130,944,945],{"class":136},"\u002F* Conic color wheel *\u002F\n",[130,947,949],{"class":132,"line":948},20,[130,950,951],{"class":143},"background: repeating-conic-gradient(\n",[130,953,955,957],{"class":132,"line":954},21,[130,956,687],{"class":147},[130,958,959],{"class":143}," 0deg 30deg,\n",[130,961,963,965],{"class":132,"line":962},22,[130,964,861],{"class":147},[130,966,967],{"class":143}," 30deg 60deg\n",[130,969,971],{"class":132,"line":970},23,[130,972,156],{"class":143},[15,974,975],{},"Repeating gradients are valuable for creating texture patterns — stripes, checkerboards, and rings — without any image assets.",[10,977,979],{"id":978},"practical-design-patterns","Practical Design Patterns",[210,981,983],{"id":982},"glossy-buttons","Glossy Buttons",[121,985,987],{"className":123,"code":986,"language":125,"meta":126,"style":126},".glossy-btn {\n  background: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, 0.25) 0%,\n    rgba(255, 255, 255, 0) 50%,\n    rgba(0, 0, 0, 0.1) 100%\n  ),\n  #3B82F6;\n}\n",[22,988,989,997,1012,1023,1058,1087,1116,1121,1128],{"__ignoreMap":126},[130,990,991,994],{"class":132,"line":133},[130,992,993],{"class":308},".glossy-btn",[130,995,996],{"class":143}," {\n",[130,998,999,1003,1006,1009],{"class":132,"line":140},[130,1000,1002],{"class":1001},"sj4cs","  background",[130,1004,1005],{"class":143},": ",[130,1007,1008],{"class":1001},"linear-gradient",[130,1010,1011],{"class":143},"(\n",[130,1013,1014,1018,1021],{"class":132,"line":159},[130,1015,1017],{"class":1016},"szBVR","    to",[130,1019,1020],{"class":1001}," bottom",[130,1022,900],{"class":143},[130,1024,1025,1028,1031,1034,1036,1038,1040,1042,1044,1047,1050,1053,1056],{"class":132,"line":166},[130,1026,1027],{"class":1001},"    rgba",[130,1029,1030],{"class":143},"(",[130,1032,1033],{"class":1001},"255",[130,1035,29],{"class":143},[130,1037,1033],{"class":1001},[130,1039,29],{"class":143},[130,1041,1033],{"class":1001},[130,1043,29],{"class":143},[130,1045,1046],{"class":1001},"0.25",[130,1048,1049],{"class":143},") ",[130,1051,1052],{"class":1001},"0",[130,1054,1055],{"class":1016},"%",[130,1057,900],{"class":143},[130,1059,1060,1062,1064,1066,1068,1070,1072,1074,1076,1078,1080,1083,1085],{"class":132,"line":172},[130,1061,1027],{"class":1001},[130,1063,1030],{"class":143},[130,1065,1033],{"class":1001},[130,1067,29],{"class":143},[130,1069,1033],{"class":1001},[130,1071,29],{"class":143},[130,1073,1033],{"class":1001},[130,1075,29],{"class":143},[130,1077,1052],{"class":1001},[130,1079,1049],{"class":143},[130,1081,1082],{"class":1001},"50",[130,1084,1055],{"class":1016},[130,1086,900],{"class":143},[130,1088,1089,1091,1093,1095,1097,1099,1101,1103,1105,1108,1110,1113],{"class":132,"line":186},[130,1090,1027],{"class":1001},[130,1092,1030],{"class":143},[130,1094,1052],{"class":1001},[130,1096,29],{"class":143},[130,1098,1052],{"class":1001},[130,1100,29],{"class":143},[130,1102,1052],{"class":1001},[130,1104,29],{"class":143},[130,1106,1107],{"class":1001},"0.1",[130,1109,1049],{"class":143},[130,1111,1112],{"class":1001},"100",[130,1114,1115],{"class":1016},"%\n",[130,1117,1118],{"class":132,"line":191},[130,1119,1120],{"class":143},"  ),\n",[130,1122,1123,1125],{"class":132,"line":197},[130,1124,687],{"class":1001},[130,1126,1127],{"class":143},";\n",[130,1129,1130],{"class":132,"line":877},[130,1131,1132],{"class":143},"}\n",[210,1134,1136],{"id":1135},"elevated-cards","Elevated Cards",[121,1138,1140],{"className":123,"code":1139,"language":125,"meta":126,"style":126},".card {\n  background: linear-gradient(135deg, #1E293B, #334155);\n  border-radius: 12px;\n}\n",[22,1141,1142,1149,1177,1192],{"__ignoreMap":126},[130,1143,1144,1147],{"class":132,"line":133},[130,1145,1146],{"class":308},".card",[130,1148,996],{"class":143},[130,1150,1151,1153,1155,1157,1159,1162,1165,1167,1170,1172,1175],{"class":132,"line":140},[130,1152,1002],{"class":1001},[130,1154,1005],{"class":143},[130,1156,1008],{"class":1001},[130,1158,1030],{"class":143},[130,1160,1161],{"class":1001},"135",[130,1163,1164],{"class":1016},"deg",[130,1166,29],{"class":143},[130,1168,1169],{"class":1001},"#1E293B",[130,1171,29],{"class":143},[130,1173,1174],{"class":1001},"#334155",[130,1176,156],{"class":143},[130,1178,1179,1182,1184,1187,1190],{"class":132,"line":159},[130,1180,1181],{"class":1001},"  border-radius",[130,1183,1005],{"class":143},[130,1185,1186],{"class":1001},"12",[130,1188,1189],{"class":1016},"px",[130,1191,1127],{"class":143},[130,1193,1194],{"class":132,"line":166},[130,1195,1132],{"class":143},[210,1197,1199],{"id":1198},"hero-overlays","Hero Overlays",[121,1201,1203],{"className":123,"code":1202,"language":125,"meta":126,"style":126},".hero {\n  background: linear-gradient(\n    to bottom,\n    transparent 40%,\n    rgba(0, 0, 0, 0.7) 100%\n  );\n}\n",[22,1204,1205,1212,1222,1230,1242,1269,1274],{"__ignoreMap":126},[130,1206,1207,1210],{"class":132,"line":133},[130,1208,1209],{"class":308},".hero",[130,1211,996],{"class":143},[130,1213,1214,1216,1218,1220],{"class":132,"line":140},[130,1215,1002],{"class":1001},[130,1217,1005],{"class":143},[130,1219,1008],{"class":1001},[130,1221,1011],{"class":143},[130,1223,1224,1226,1228],{"class":132,"line":159},[130,1225,1017],{"class":1016},[130,1227,1020],{"class":1001},[130,1229,900],{"class":143},[130,1231,1232,1235,1238,1240],{"class":132,"line":166},[130,1233,1234],{"class":1001},"    transparent",[130,1236,1237],{"class":1001}," 40",[130,1239,1055],{"class":1016},[130,1241,900],{"class":143},[130,1243,1244,1246,1248,1250,1252,1254,1256,1258,1260,1263,1265,1267],{"class":132,"line":172},[130,1245,1027],{"class":1001},[130,1247,1030],{"class":143},[130,1249,1052],{"class":1001},[130,1251,29],{"class":143},[130,1253,1052],{"class":1001},[130,1255,29],{"class":143},[130,1257,1052],{"class":1001},[130,1259,29],{"class":143},[130,1261,1262],{"class":1001},"0.7",[130,1264,1049],{"class":143},[130,1266,1112],{"class":1001},[130,1268,1115],{"class":1016},[130,1270,1271],{"class":132,"line":186},[130,1272,1273],{"class":143},"  );\n",[130,1275,1276],{"class":132,"line":191},[130,1277,1132],{"class":143},[210,1279,1281],{"id":1280},"subtle-texture-with-repeating-gradient","Subtle Texture with Repeating Gradient",[121,1283,1285],{"className":123,"code":1284,"language":125,"meta":126,"style":126},".texture-bg {\n  background: repeating-linear-gradient(\n    0deg,\n    transparent,\n    transparent 2px,\n    rgba(255, 255, 255, 0.03) 2px,\n    rgba(255, 255, 255, 0.03) 4px\n  );\n}\n",[22,1286,1287,1294,1305,1314,1320,1331,1361,1389,1393],{"__ignoreMap":126},[130,1288,1289,1292],{"class":132,"line":133},[130,1290,1291],{"class":308},".texture-bg",[130,1293,996],{"class":143},[130,1295,1296,1298,1300,1303],{"class":132,"line":140},[130,1297,1002],{"class":1001},[130,1299,1005],{"class":143},[130,1301,1302],{"class":1001},"repeating-linear-gradient",[130,1304,1011],{"class":143},[130,1306,1307,1310,1312],{"class":132,"line":159},[130,1308,1309],{"class":1001},"    0",[130,1311,1164],{"class":1016},[130,1313,900],{"class":143},[130,1315,1316,1318],{"class":132,"line":166},[130,1317,1234],{"class":1001},[130,1319,900],{"class":143},[130,1321,1322,1324,1327,1329],{"class":132,"line":172},[130,1323,1234],{"class":1001},[130,1325,1326],{"class":1001}," 2",[130,1328,1189],{"class":1016},[130,1330,900],{"class":143},[130,1332,1333,1335,1337,1339,1341,1343,1345,1347,1349,1352,1354,1357,1359],{"class":132,"line":186},[130,1334,1027],{"class":1001},[130,1336,1030],{"class":143},[130,1338,1033],{"class":1001},[130,1340,29],{"class":143},[130,1342,1033],{"class":1001},[130,1344,29],{"class":143},[130,1346,1033],{"class":1001},[130,1348,29],{"class":143},[130,1350,1351],{"class":1001},"0.03",[130,1353,1049],{"class":143},[130,1355,1356],{"class":1001},"2",[130,1358,1189],{"class":1016},[130,1360,900],{"class":143},[130,1362,1363,1365,1367,1369,1371,1373,1375,1377,1379,1381,1383,1386],{"class":132,"line":191},[130,1364,1027],{"class":1001},[130,1366,1030],{"class":143},[130,1368,1033],{"class":1001},[130,1370,29],{"class":143},[130,1372,1033],{"class":1001},[130,1374,29],{"class":143},[130,1376,1033],{"class":1001},[130,1378,29],{"class":143},[130,1380,1351],{"class":1001},[130,1382,1049],{"class":143},[130,1384,1385],{"class":1001},"4",[130,1387,1388],{"class":1016},"px\n",[130,1390,1391],{"class":132,"line":197},[130,1392,1273],{"class":143},[130,1394,1395],{"class":132,"line":877},[130,1396,1132],{"class":143},[10,1398,1400],{"id":1399},"key-takeaways","Key Takeaways",[731,1402,1403,1406,1419,1422,1425,1431],{},[734,1404,1405],{},"CSS gradients replace image files with Resolution-independent, instantly-loading visuals",[734,1407,522,1408,1410,1411,1414,1415,1418],{},[22,1409,1008],{}," for directional flows, ",[22,1412,1413],{},"radial-gradient"," for spotlights and focal points, ",[22,1416,1417],{},"conic-gradient"," for pie charts and color wheels",[734,1420,1421],{},"Color stop positions give you precise control over where each color appears",[734,1423,1424],{},"Overlapping stops create hard edges for patterns and geometric effects",[734,1426,1427,1430],{},[22,1428,1429],{},"repeating-*"," variants tile the pattern for textures like stripes and rings",[734,1432,1433,1434,1436],{},"Always include a ",[22,1435,786],{}," stop or low-alpha color for overlay effects",[10,1438,1440],{"id":1439},"try-it-yourself","Try It Yourself",[15,1442,1443,1444,1449],{},"Build and preview CSS gradients interactively with our ",[1445,1446,1448],"a",{"href":1447},"\u002Ftools\u002Fcss-gradient","CSS Gradient Generator",". Adjust angles, add color stops, and copy the generated code directly into your project.",[10,1451,1453],{"id":1452},"related-guides","Related Guides",[731,1455,1456,1463],{},[734,1457,1458,1462],{},[1445,1459,1461],{"href":1460},"\u002Fguides\u002Fcss-linear-gradient-tutorial","CSS Linear Gradient Tutorial"," — Deep dive into angles, directions, and advanced multi-stop techniques",[734,1464,1465,1469],{},[1445,1466,1468],{"href":1467},"\u002Fguides\u002Fcss-design-tips","CSS Design Tips"," — Combine gradients with shadows and color for polished UIs",[1471,1472,1473],"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 .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 .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}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":126,"searchDepth":140,"depth":140,"links":1475},[1476,1477,1478,1482,1486,1489,1493,1494,1500,1501,1502],{"id":12,"depth":140,"text":13},{"id":43,"depth":140,"text":44},{"id":115,"depth":140,"text":116,"children":1479},[1480,1481],{"id":212,"depth":159,"text":213},{"id":287,"depth":159,"text":288},{"id":360,"depth":140,"text":361,"children":1483},[1484,1485],{"id":446,"depth":159,"text":447},{"id":531,"depth":159,"text":532},{"id":575,"depth":140,"text":576,"children":1487},[1488],{"id":668,"depth":159,"text":669},{"id":721,"depth":140,"text":722,"children":1490},[1491,1492],{"id":728,"depth":159,"text":729},{"id":780,"depth":159,"text":781},{"id":814,"depth":140,"text":815},{"id":978,"depth":140,"text":979,"children":1495},[1496,1497,1498,1499],{"id":982,"depth":159,"text":983},{"id":1135,"depth":159,"text":1136},{"id":1198,"depth":159,"text":1199},{"id":1280,"depth":159,"text":1281},{"id":1399,"depth":140,"text":1400},{"id":1439,"depth":140,"text":1440},{"id":1452,"depth":140,"text":1453},"2026-05-28","Learn how to create CSS gradients — linear, radial, and conic — with syntax examples, color stops, and practical design tips.","md",{"immutable":162},"\u002Fguides\u002Fcss-gradient-guide",{"title":5,"description":1504},"guides\u002Fcss-gradient-guide","-0s0vEvS5htz6gM18n3NtD5AlYIDB83a4AaUf6dcFUI",1780401326379]