[{"data":1,"prerenderedAt":1137},["ShallowReactive",2],{"guide-css-linear-gradient-tutorial":3},{"id":4,"title":5,"body":6,"date":1129,"description":1130,"extension":1131,"meta":1132,"navigation":88,"path":1133,"readingTime":381,"seo":1134,"stem":1135,"__hash__":1136},"guides\u002Fguides\u002Fcss-linear-gradient-tutorial.md","CSS Linear Gradient Tutorial: Angles, Directions, and Color Stops",{"type":7,"value":8,"toc":1103},"minimark",[9,14,23,29,33,50,53,110,114,117,122,202,205,209,212,240,263,270,274,328,332,335,426,430,454,478,481,485,493,537,544,547,551,558,597,600,604,611,727,734,738,744,748,791,795,840,844,941,944,948,951,1028,1032,1035,1039,1061,1065,1079,1083,1099],[10,11,13],"h2",{"id":12},"linear-gradients-are-the-workhorse","Linear Gradients Are the Workhorse",[15,16,17,18,22],"p",{},"Of all CSS gradient types, ",[19,20,21],"code",{},"linear-gradient"," is the one you will reach for most often. Buttons, hero sections, card backgrounds, overlays — linear gradients handle them all with a single line of CSS.",[15,24,25,26,28],{},"This tutorial focuses exclusively on ",[19,27,21],{}," syntax so you can master every angle, stop, and pattern it supports.",[10,30,32],{"id":31},"basic-syntax","Basic Syntax",[34,35,40],"pre",{"className":36,"code":37,"language":38,"meta":39,"style":39},"language-css shiki shiki-themes github-light github-dark","background: linear-gradient(direction, color1, color2, ...);\n","css","",[19,41,42],{"__ignoreMap":39},[43,44,47],"span",{"class":45,"line":46},"line",1,[43,48,37],{"class":49},"sVt8B",[15,51,52],{},"The direction tells the browser which way the gradient flows. The colors define what appears along that axis.",[34,54,56],{"className":36,"code":55,"language":38,"meta":39,"style":39},"\u002F* Default: top to bottom *\u002F\nbackground: linear-gradient(#3B82F6, #8B5CF6);\n\n\u002F* Explicit direction *\u002F\nbackground: linear-gradient(to right, #3B82F6, #8B5CF6);\n",[19,57,58,64,83,90,96],{"__ignoreMap":39},[43,59,60],{"class":45,"line":46},[43,61,63],{"class":62},"sJ8bj","\u002F* Default: top to bottom *\u002F\n",[43,65,67,70,74,77,80],{"class":45,"line":66},2,[43,68,69],{"class":49},"background: linear-gradient(",[43,71,73],{"class":72},"s7hpK","#3B82F6",[43,75,76],{"class":49},", ",[43,78,79],{"class":72},"#8B5CF6",[43,81,82],{"class":49},");\n",[43,84,86],{"class":45,"line":85},3,[43,87,89],{"emptyLinePlaceholder":88},true,"\n",[43,91,93],{"class":45,"line":92},4,[43,94,95],{"class":62},"\u002F* Explicit direction *\u002F\n",[43,97,99,102,104,106,108],{"class":45,"line":98},5,[43,100,101],{"class":49},"background: linear-gradient(to right, ",[43,103,73],{"class":72},[43,105,76],{"class":49},[43,107,79],{"class":72},[43,109,82],{"class":49},[10,111,113],{"id":112},"angles-vs-direction-keywords","Angles vs. Direction Keywords",[15,115,116],{},"You can specify direction in two ways — keyword or angle.",[118,119,121],"h3",{"id":120},"direction-keywords","Direction Keywords",[123,124,125,138],"table",{},[126,127,128],"thead",{},[129,130,131,135],"tr",{},[132,133,134],"th",{},"Keyword",[132,136,137],{},"Gradient Flows",[139,140,141,152,162,172,182,192],"tbody",{},[129,142,143,149],{},[144,145,146],"td",{},[19,147,148],{},"to top",[144,150,151],{},"Bottom → Top",[129,153,154,159],{},[144,155,156],{},[19,157,158],{},"to right",[144,160,161],{},"Left → Right",[129,163,164,169],{},[144,165,166],{},[19,167,168],{},"to bottom",[144,170,171],{},"Top → Bottom (default)",[129,173,174,179],{},[144,175,176],{},[19,177,178],{},"to left",[144,180,181],{},"Right → Left",[129,183,184,189],{},[144,185,186],{},[19,187,188],{},"to top right",[144,190,191],{},"Bottom-left → Top-right",[129,193,194,199],{},[144,195,196],{},[19,197,198],{},"to bottom left",[144,200,201],{},"Top-right → Bottom-left",[15,203,204],{},"Keywords are readable and cover the basics. But they limit you to 45-degree increments.",[118,206,208],{"id":207},"degree-angles","Degree Angles",[15,210,211],{},"Angles give you full 360-degree control. Think of the gradient line as a compass:",[213,214,215,222,228,234],"ul",{},[216,217,218,221],"li",{},[19,219,220],{},"0deg"," — bottom to top",[216,223,224,227],{},[19,225,226],{},"90deg"," — left to right",[216,229,230,233],{},[19,231,232],{},"180deg"," — top to bottom",[216,235,236,239],{},[19,237,238],{},"270deg"," — right to left",[34,241,243],{"className":36,"code":242,"language":38,"meta":39,"style":39},"\u002F* Diagonal — precise control *\u002F\nbackground: linear-gradient(137deg, #3B82F6, #8B5CF6);\n",[19,244,245,250],{"__ignoreMap":39},[43,246,247],{"class":45,"line":46},[43,248,249],{"class":62},"\u002F* Diagonal — precise control *\u002F\n",[43,251,252,255,257,259,261],{"class":45,"line":66},[43,253,254],{"class":49},"background: linear-gradient(137deg, ",[43,256,73],{"class":72},[43,258,76],{"class":49},[43,260,79],{"class":72},[43,262,82],{"class":49},[15,264,265,266,269],{},"The angle rotates the gradient line clockwise. When you need a direction between keyword increments — like ",[19,267,268],{},"137deg"," — only the angle syntax works.",[118,271,273],{"id":272},"which-should-you-use","Which Should You Use?",[123,275,276,286],{},[126,277,278],{},[129,279,280,283],{},[132,281,282],{},"Scenario",[132,284,285],{},"Best Choice",[139,287,288,301,310,320],{},[129,289,290,293],{},[144,291,292],{},"Vertical or horizontal gradients",[144,294,295,296,76,298,300],{},"Keywords (",[19,297,158],{},[19,299,168],{},")",[129,302,303,306],{},[144,304,305],{},"Diagonal gradients along cardinals",[144,307,295,308,300],{},[19,309,188],{},[129,311,312,315],{},[144,313,314],{},"Fine-tuned diagonal angles",[144,316,317,318,300],{},"Degrees (",[19,319,268],{},[129,321,322,325],{},[144,323,324],{},"Animated gradient rotation",[144,326,327],{},"Degrees (easier with CSS custom properties)",[10,329,331],{"id":330},"multi-stop-gradients","Multi-Stop Gradients",[15,333,334],{},"Add more than two colors to create rich, layered backgrounds.",[34,336,338],{"className":36,"code":337,"language":38,"meta":39,"style":39},"\u002F* Three stops — evenly spaced *\u002F\nbackground: linear-gradient(to right, #EF4444, #F59E0B, #10B981);\n\n\u002F* Four stops with positions *\u002F\nbackground: linear-gradient(\n  to right,\n  #3B82F6 0%,\n  #8B5CF6 33%,\n  #EC4899 66%,\n  #F43F5E 100%\n);\n",[19,339,340,345,365,369,374,379,385,394,403,412,421],{"__ignoreMap":39},[43,341,342],{"class":45,"line":46},[43,343,344],{"class":62},"\u002F* Three stops — evenly spaced *\u002F\n",[43,346,347,349,353,355,358,360,363],{"class":45,"line":66},[43,348,101],{"class":49},[43,350,352],{"class":351},"sScJk","#EF4444",[43,354,76],{"class":49},[43,356,357],{"class":351},"#F59E0B",[43,359,76],{"class":49},[43,361,362],{"class":72},"#10B981",[43,364,82],{"class":49},[43,366,367],{"class":45,"line":85},[43,368,89],{"emptyLinePlaceholder":88},[43,370,371],{"class":45,"line":92},[43,372,373],{"class":62},"\u002F* Four stops with positions *\u002F\n",[43,375,376],{"class":45,"line":98},[43,377,378],{"class":49},"background: linear-gradient(\n",[43,380,382],{"class":45,"line":381},6,[43,383,384],{"class":49},"  to right,\n",[43,386,388,391],{"class":45,"line":387},7,[43,389,390],{"class":72},"  #3B82F6",[43,392,393],{"class":49}," 0%,\n",[43,395,397,400],{"class":45,"line":396},8,[43,398,399],{"class":72},"  #8B5CF6",[43,401,402],{"class":49}," 33%,\n",[43,404,406,409],{"class":45,"line":405},9,[43,407,408],{"class":351},"  #EC4899",[43,410,411],{"class":49}," 66%,\n",[43,413,415,418],{"class":45,"line":414},10,[43,416,417],{"class":351},"  #F43F5E",[43,419,420],{"class":49}," 100%\n",[43,422,424],{"class":45,"line":423},11,[43,425,82],{"class":49},[118,427,429],{"id":428},"position-rules","Position Rules",[213,431,432,435,448,451],{},[216,433,434],{},"If you skip positions, the browser distributes stops evenly",[216,436,437,438,76,441,76,444,447],{},"You can use ",[19,439,440],{},"%",[19,442,443],{},"px",[19,445,446],{},"em",", or any CSS length unit",[216,449,450],{},"Positions can go in any order — the browser sorts them",[216,452,453],{},"Two stops at the same position create a hard edge",[34,455,457],{"className":36,"code":456,"language":38,"meta":39,"style":39},"\u002F* Hard edge transition *\u002F\nbackground: linear-gradient(to right, #3B82F6 50%, #8B5CF6 50%);\n",[19,458,459,464],{"__ignoreMap":39},[43,460,461],{"class":45,"line":46},[43,462,463],{"class":62},"\u002F* Hard edge transition *\u002F\n",[43,465,466,468,470,473,475],{"class":45,"line":66},[43,467,101],{"class":49},[43,469,73],{"class":72},[43,471,472],{"class":49}," 50%, ",[43,474,79],{"class":72},[43,476,477],{"class":49}," 50%);\n",[15,479,480],{},"Hard-edge stops are the building block for stripe and checkerboard patterns.",[10,482,484],{"id":483},"color-hints-midpoints","Color Hints (Midpoints)",[15,486,487,488,492],{},"By default, the browser places the midpoint of a transition exactly halfway between two stops. A ",[489,490,491],"strong",{},"color hint"," lets you shift that midpoint.",[34,494,496],{"className":36,"code":495,"language":38,"meta":39,"style":39},"\u002F* Normal — midpoint at 50% *\u002F\nbackground: linear-gradient(to right, #3B82F6, #8B5CF6);\n\n\u002F* Shifted midpoint — transition happens sooner *\u002F\nbackground: linear-gradient(to right, #3B82F6, 25%, #8B5CF6);\n",[19,497,498,503,515,519,524],{"__ignoreMap":39},[43,499,500],{"class":45,"line":46},[43,501,502],{"class":62},"\u002F* Normal — midpoint at 50% *\u002F\n",[43,504,505,507,509,511,513],{"class":45,"line":66},[43,506,101],{"class":49},[43,508,73],{"class":72},[43,510,76],{"class":49},[43,512,79],{"class":72},[43,514,82],{"class":49},[43,516,517],{"class":45,"line":85},[43,518,89],{"emptyLinePlaceholder":88},[43,520,521],{"class":45,"line":92},[43,522,523],{"class":62},"\u002F* Shifted midpoint — transition happens sooner *\u002F\n",[43,525,526,528,530,533,535],{"class":45,"line":98},[43,527,101],{"class":49},[43,529,73],{"class":72},[43,531,532],{"class":49},", 25%, ",[43,534,79],{"class":72},[43,536,82],{"class":49},[15,538,539,540,543],{},"The ",[19,541,542],{},"25%"," is the color hint. It tells the browser \"the 50% blend of these two colors should appear at 25% of the gradient.\" This creates a faster initial transition and a slower tail.",[15,545,546],{},"Color hints are subtle but powerful. They let you control the perceived weight of each color in the gradient.",[10,548,550],{"id":549},"transparency-gradients","Transparency Gradients",[15,552,553,554,557],{},"Combine solid colors with ",[19,555,556],{},"transparent"," or alpha-channel colors for fade effects.",[34,559,561],{"className":36,"code":560,"language":38,"meta":39,"style":39},"\u002F* Fade out at the bottom *\u002F\nbackground: linear-gradient(to bottom, rgba(59, 130, 246, 0.9), transparent);\n\n\u002F* Modern syntax with slash alpha *\u002F\nbackground: linear-gradient(to bottom, rgb(59 130 246 \u002F 0.9), transparent);\n",[19,562,563,568,579,583,588],{"__ignoreMap":39},[43,564,565],{"class":45,"line":46},[43,566,567],{"class":62},"\u002F* Fade out at the bottom *\u002F\n",[43,569,570,573,576],{"class":45,"line":66},[43,571,572],{"class":49},"background: linear-gradient(to bottom, rgba(59, 130, 246, 0",[43,574,575],{"class":351},".9",[43,577,578],{"class":49},"), transparent);\n",[43,580,581],{"class":45,"line":85},[43,582,89],{"emptyLinePlaceholder":88},[43,584,585],{"class":45,"line":92},[43,586,587],{"class":62},"\u002F* Modern syntax with slash alpha *\u002F\n",[43,589,590,593,595],{"class":45,"line":98},[43,591,592],{"class":49},"background: linear-gradient(to bottom, rgb(59 130 246 \u002F 0",[43,594,575],{"class":351},[43,596,578],{"class":49},[15,598,599],{},"Use transparency gradients when you need an overlay that gradually reveals or hides content — hero images, image captions, or loading shimmer effects.",[10,601,603],{"id":602},"gradient-over-background-images","Gradient Over Background Images",[15,605,606,607,610],{},"You can layer a gradient on top of a background image using multiple ",[19,608,609],{},"background"," values.",[34,612,614],{"className":36,"code":613,"language":38,"meta":39,"style":39},".hero {\n  background:\n    linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.7)),\n    url('\u002Fimages\u002Fhero.jpg');\n  background-size: cover;\n  background-position: center;\n}\n",[19,615,616,624,633,683,696,710,722],{"__ignoreMap":39},[43,617,618,621],{"class":45,"line":46},[43,619,620],{"class":351},".hero",[43,622,623],{"class":49}," {\n",[43,625,626,630],{"class":45,"line":66},[43,627,629],{"class":628},"sj4cs","  background",[43,631,632],{"class":49},":\n",[43,634,635,638,641,645,648,650,652,655,657,659,662,664,667,669,671,673,675,677,680],{"class":45,"line":85},[43,636,637],{"class":628},"    linear-gradient",[43,639,640],{"class":49},"(",[43,642,644],{"class":643},"szBVR","to",[43,646,647],{"class":628}," bottom",[43,649,76],{"class":49},[43,651,556],{"class":628},[43,653,654],{"class":628}," 40",[43,656,440],{"class":643},[43,658,76],{"class":49},[43,660,661],{"class":628},"rgba",[43,663,640],{"class":49},[43,665,666],{"class":628},"0",[43,668,76],{"class":49},[43,670,666],{"class":628},[43,672,76],{"class":49},[43,674,666],{"class":628},[43,676,76],{"class":49},[43,678,679],{"class":628},"0.7",[43,681,682],{"class":49},")),\n",[43,684,685,688,690,694],{"class":45,"line":92},[43,686,687],{"class":628},"    url",[43,689,640],{"class":49},[43,691,693],{"class":692},"sZZnC","'\u002Fimages\u002Fhero.jpg'",[43,695,82],{"class":49},[43,697,698,701,704,707],{"class":45,"line":98},[43,699,700],{"class":628},"  background-size",[43,702,703],{"class":49},": ",[43,705,706],{"class":628},"cover",[43,708,709],{"class":49},";\n",[43,711,712,715,717,720],{"class":45,"line":381},[43,713,714],{"class":628},"  background-position",[43,716,703],{"class":49},[43,718,719],{"class":628},"center",[43,721,709],{"class":49},[43,723,724],{"class":45,"line":387},[43,725,726],{"class":49},"}\n",[15,728,729,730,733],{},"The gradient sits on top because it comes first in the comma-separated list. This technique keeps text readable over complex images without a separate overlay ",[19,731,732],{},"\u003Cdiv>",".",[10,735,737],{"id":736},"stripe-patterns-with-repeating-gradients","Stripe Patterns with Repeating Gradients",[15,739,740,743],{},[19,741,742],{},"repeating-linear-gradient"," tiles the gradient infinitely. Combined with hard-edge stops, it creates stripe and pattern backgrounds.",[118,745,747],{"id":746},"horizontal-stripes","Horizontal Stripes",[34,749,751],{"className":36,"code":750,"language":38,"meta":39,"style":39},"background: repeating-linear-gradient(\n  0deg,\n  #3B82F6 0px,\n  #3B82F6 4px,\n  transparent 4px,\n  transparent 8px\n);\n",[19,752,753,758,763,770,777,782,787],{"__ignoreMap":39},[43,754,755],{"class":45,"line":46},[43,756,757],{"class":49},"background: repeating-linear-gradient(\n",[43,759,760],{"class":45,"line":66},[43,761,762],{"class":49},"  0deg,\n",[43,764,765,767],{"class":45,"line":85},[43,766,390],{"class":72},[43,768,769],{"class":49}," 0px,\n",[43,771,772,774],{"class":45,"line":92},[43,773,390],{"class":72},[43,775,776],{"class":49}," 4px,\n",[43,778,779],{"class":45,"line":98},[43,780,781],{"class":49},"  transparent 4px,\n",[43,783,784],{"class":45,"line":381},[43,785,786],{"class":49},"  transparent 8px\n",[43,788,789],{"class":45,"line":387},[43,790,82],{"class":49},[118,792,794],{"id":793},"diagonal-stripes","Diagonal Stripes",[34,796,798],{"className":36,"code":797,"language":38,"meta":39,"style":39},"background: repeating-linear-gradient(\n  45deg,\n  #3B82F6 0px,\n  #3B82F6 10px,\n  #1E3A5F 10px,\n  #1E3A5F 20px\n);\n",[19,799,800,804,809,815,822,829,836],{"__ignoreMap":39},[43,801,802],{"class":45,"line":46},[43,803,757],{"class":49},[43,805,806],{"class":45,"line":66},[43,807,808],{"class":49},"  45deg,\n",[43,810,811,813],{"class":45,"line":85},[43,812,390],{"class":72},[43,814,769],{"class":49},[43,816,817,819],{"class":45,"line":92},[43,818,390],{"class":72},[43,820,821],{"class":49}," 10px,\n",[43,823,824,827],{"class":45,"line":98},[43,825,826],{"class":72},"  #1E3A5F",[43,828,821],{"class":49},[43,830,831,833],{"class":45,"line":381},[43,832,826],{"class":72},[43,834,835],{"class":49}," 20px\n",[43,837,838],{"class":45,"line":387},[43,839,82],{"class":49},[118,841,843],{"id":842},"checkerboard","Checkerboard",[34,845,847],{"className":36,"code":846,"language":38,"meta":39,"style":39},"background:\n  repeating-linear-gradient(\n    45deg,\n    rgba(0, 0, 0, 0.1) 0px,\n    rgba(0, 0, 0, 0.1) 2px,\n    transparent 2px,\n    transparent 8px\n  ),\n  repeating-linear-gradient(\n    -45deg,\n    rgba(0, 0, 0, 0.1) 0px,\n    rgba(0, 0, 0, 0.1) 2px,\n    transparent 2px,\n    transparent 8px\n  );\n",[19,848,849,854,859,864,875,884,889,894,899,903,908,916,925,930,935],{"__ignoreMap":39},[43,850,851],{"class":45,"line":46},[43,852,853],{"class":49},"background:\n",[43,855,856],{"class":45,"line":66},[43,857,858],{"class":49},"  repeating-linear-gradient(\n",[43,860,861],{"class":45,"line":85},[43,862,863],{"class":49},"    45deg,\n",[43,865,866,869,872],{"class":45,"line":92},[43,867,868],{"class":49},"    rgba(0, 0, 0, 0",[43,870,871],{"class":351},".1",[43,873,874],{"class":49},") 0px,\n",[43,876,877,879,881],{"class":45,"line":98},[43,878,868],{"class":49},[43,880,871],{"class":351},[43,882,883],{"class":49},") 2px,\n",[43,885,886],{"class":45,"line":381},[43,887,888],{"class":49},"    transparent 2px,\n",[43,890,891],{"class":45,"line":387},[43,892,893],{"class":49},"    transparent 8px\n",[43,895,896],{"class":45,"line":396},[43,897,898],{"class":49},"  ),\n",[43,900,901],{"class":45,"line":405},[43,902,858],{"class":49},[43,904,905],{"class":45,"line":414},[43,906,907],{"class":49},"    -45deg,\n",[43,909,910,912,914],{"class":45,"line":423},[43,911,868],{"class":49},[43,913,871],{"class":351},[43,915,874],{"class":49},[43,917,919,921,923],{"class":45,"line":918},12,[43,920,868],{"class":49},[43,922,871],{"class":351},[43,924,883],{"class":49},[43,926,928],{"class":45,"line":927},13,[43,929,888],{"class":49},[43,931,933],{"class":45,"line":932},14,[43,934,893],{"class":49},[43,936,938],{"class":45,"line":937},15,[43,939,940],{"class":49},"  );\n",[15,942,943],{},"Layer two repeating gradients at opposite angles to build a checkerboard. Each gradient contributes one set of diagonal stripes — together they form a grid.",[10,945,947],{"id":946},"debugging-tips","Debugging Tips",[15,949,950],{},"Gradients can look wrong for subtle reasons. Here is a quick checklist:",[123,952,953,963],{},[126,954,955],{},[129,956,957,960],{},[132,958,959],{},"Problem",[132,961,962],{},"Fix",[139,964,965,973,981,992,1005],{},[129,966,967,970],{},[144,968,969],{},"Colors look muddy in the middle",[144,971,972],{},"Use color hints or add an extra stop at the midpoint",[129,974,975,978],{},[144,976,977],{},"Gradient appears banded on large areas",[144,979,980],{},"Add a tiny amount of noise via a pseudo-element, or use more stops",[129,982,983,986],{},[144,984,985],{},"Angle seems off",[144,987,988,989,991],{},"Remember: ",[19,990,220],{}," is bottom-to-top, not top-to-bottom",[129,993,994,997],{},[144,995,996],{},"Gradient repeats unexpectedly",[144,998,999,1000,1002,1003],{},"You used ",[19,1001,742],{}," instead of ",[19,1004,21],{},[129,1006,1007,1010],{},[144,1008,1009],{},"Transparent stop looks gray",[144,1011,1012,1013,1016,1017,1020,1021,1023,1024,1027],{},"Use ",[19,1014,1015],{},"rgba()"," or ",[19,1018,1019],{},"rgb(\u002Falpha)"," syntax — ",[19,1022,556],{}," equals ",[19,1025,1026],{},"rgba(0,0,0,0)"," and may darken intermediate stops",[118,1029,1031],{"id":1030},"browser-devtools","Browser DevTools",[15,1033,1034],{},"Chrome and Firefox DevTools let you edit gradients visually. Click the gradient swatch next to the CSS value to open a picker where you adjust angles and stops in real time.",[10,1036,1038],{"id":1037},"key-takeaways","Key Takeaways",[213,1040,1041,1044,1047,1050,1053,1058],{},[216,1042,1043],{},"Use degree angles when keywords are not precise enough",[216,1045,1046],{},"Multi-stop gradients with explicit positions give you full layout control",[216,1048,1049],{},"Color hints shift the midpoint of a transition for weighted color distribution",[216,1051,1052],{},"Transparency gradients create overlays and fade effects without extra markup",[216,1054,1055,1057],{},[19,1056,742],{}," with hard-edge stops produces stripes and patterns",[216,1059,1060],{},"Always test gradients against both light and dark backgrounds",[10,1062,1064],{"id":1063},"try-it-yourself","Try It Yourself",[15,1066,1067,1068,1073,1074,1078],{},"Experiment with angles, directions, and color stops in our ",[1069,1070,1072],"a",{"href":1071},"\u002Ftools\u002Fcss-gradient","CSS Gradient Generator",". Need to convert colors for your stops? Use the ",[1069,1075,1077],{"href":1076},"\u002Ftools\u002Fcolor-converter","Color Converter"," to switch between HEX, RGB, and HSL.",[10,1080,1082],{"id":1081},"related-guides","Related Guides",[213,1084,1085,1092],{},[216,1086,1087,1091],{},[1069,1088,1090],{"href":1089},"\u002Fguides\u002Fcss-gradient-guide","CSS Gradient Guide"," — Overview of all gradient types including radial and conic",[216,1093,1094,1098],{},[1069,1095,1097],{"href":1096},"\u002Fguides\u002Fcss-design-tips","CSS Design Tips"," — Combine gradients with shadows and color theory for polished interfaces",[1100,1101,1102],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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 .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}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":39,"searchDepth":66,"depth":66,"links":1104},[1105,1106,1107,1112,1115,1116,1117,1118,1123,1126,1127,1128],{"id":12,"depth":66,"text":13},{"id":31,"depth":66,"text":32},{"id":112,"depth":66,"text":113,"children":1108},[1109,1110,1111],{"id":120,"depth":85,"text":121},{"id":207,"depth":85,"text":208},{"id":272,"depth":85,"text":273},{"id":330,"depth":66,"text":331,"children":1113},[1114],{"id":428,"depth":85,"text":429},{"id":483,"depth":66,"text":484},{"id":549,"depth":66,"text":550},{"id":602,"depth":66,"text":603},{"id":736,"depth":66,"text":737,"children":1119},[1120,1121,1122],{"id":746,"depth":85,"text":747},{"id":793,"depth":85,"text":794},{"id":842,"depth":85,"text":843},{"id":946,"depth":66,"text":947,"children":1124},[1125],{"id":1030,"depth":85,"text":1031},{"id":1037,"depth":66,"text":1038},{"id":1063,"depth":66,"text":1064},{"id":1081,"depth":66,"text":1082},"2026-05-28","Deep dive into CSS linear gradients — control angles, directions, multi-stop gradients, and create polished UI backgrounds.","md",{"immutable":88},"\u002Fguides\u002Fcss-linear-gradient-tutorial",{"title":5,"description":1130},"guides\u002Fcss-linear-gradient-tutorial","E2r3vNQCj_F9pOOsPQ2ddO65cw65vqisKYGNWQLF-UA",1780401326426]