[{"data":1,"prerenderedAt":1220},["ShallowReactive",2],{"guide-smooth-gradient-transitions":3},{"id":4,"title":5,"body":6,"date":1212,"description":1213,"extension":1214,"meta":1215,"navigation":82,"path":1216,"readingTime":95,"seo":1217,"stem":1218,"__hash__":1219},"guides\u002Fguides\u002Fsmooth-gradient-transitions.md","Creating Smooth CSS Gradient Transitions: Tips and Techniques",{"type":7,"value":8,"toc":1201},"minimark",[9,14,23,26,30,33,343,346,353,357,368,513,516,521,525,532,783,786,794,798,807,975,982,1023,1027,1108,1113,1132,1136,1160,1164,1185,1189,1197],[10,11,13],"h2",{"id":12},"the-gradient-transition-problem","The Gradient Transition Problem",[15,16,17,18,22],"p",{},"CSS gradients don't animate natively. If you try to transition between two gradient values with ",[19,20,21],"code",{},"transition: background 0.3s",", nothing happens — the gradient snaps instantly. This is because gradients are not interpolatable values in the CSS specification.",[15,24,25],{},"Fortunately, several patterns achieve smooth gradient transitions without JavaScript.",[10,27,29],{"id":28},"technique-1-opacity-cross-fade","Technique 1: Opacity Cross-Fade",[15,31,32],{},"The simplest approach uses two overlapping elements and transitions their opacity:",[34,35,40],"pre",{"className":36,"code":37,"language":38,"meta":39,"style":39},"language-css shiki shiki-themes github-light github-dark",".gradient-bg {\n  position: relative;\n}\n\n.gradient-bg::before,\n.gradient-bg::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  transition: opacity 0.4s ease;\n}\n\n.gradient-bg::before {\n  background: linear-gradient(135deg, #3B82F6, #8B5CF6);\n  opacity: 1;\n}\n\n.gradient-bg::after {\n  background: linear-gradient(135deg, #EC4899, #F59E0B);\n  opacity: 0;\n}\n\n.gradient-bg:hover::before {\n  opacity: 0;\n}\n\n.gradient-bg:hover::after {\n  opacity: 1;\n}\n","css","",[19,41,42,55,71,77,84,93,101,115,127,140,161,166,171,178,212,225,230,235,242,269,280,285,290,298,309,314,319,327,338],{"__ignoreMap":39},[43,44,47,51],"span",{"class":45,"line":46},"line",1,[43,48,50],{"class":49},"sScJk",".gradient-bg",[43,52,54],{"class":53},"sVt8B"," {\n",[43,56,58,62,65,68],{"class":45,"line":57},2,[43,59,61],{"class":60},"sj4cs","  position",[43,63,64],{"class":53},": ",[43,66,67],{"class":60},"relative",[43,69,70],{"class":53},";\n",[43,72,74],{"class":45,"line":73},3,[43,75,76],{"class":53},"}\n",[43,78,80],{"class":45,"line":79},4,[43,81,83],{"emptyLinePlaceholder":82},true,"\n",[43,85,87,90],{"class":45,"line":86},5,[43,88,89],{"class":49},".gradient-bg::before",[43,91,92],{"class":53},",\n",[43,94,96,99],{"class":45,"line":95},6,[43,97,98],{"class":49},".gradient-bg::after",[43,100,54],{"class":53},[43,102,104,107,109,113],{"class":45,"line":103},7,[43,105,106],{"class":60},"  content",[43,108,64],{"class":53},[43,110,112],{"class":111},"sZZnC","''",[43,114,70],{"class":53},[43,116,118,120,122,125],{"class":45,"line":117},8,[43,119,61],{"class":60},[43,121,64],{"class":53},[43,123,124],{"class":60},"absolute",[43,126,70],{"class":53},[43,128,130,133,135,138],{"class":45,"line":129},9,[43,131,132],{"class":60},"  inset",[43,134,64],{"class":53},[43,136,137],{"class":60},"0",[43,139,70],{"class":53},[43,141,143,146,149,152,156,159],{"class":45,"line":142},10,[43,144,145],{"class":60},"  transition",[43,147,148],{"class":53},": opacity ",[43,150,151],{"class":60},"0.4",[43,153,155],{"class":154},"szBVR","s",[43,157,158],{"class":60}," ease",[43,160,70],{"class":53},[43,162,164],{"class":45,"line":163},11,[43,165,76],{"class":53},[43,167,169],{"class":45,"line":168},12,[43,170,83],{"emptyLinePlaceholder":82},[43,172,174,176],{"class":45,"line":173},13,[43,175,89],{"class":49},[43,177,54],{"class":53},[43,179,181,184,186,189,192,195,198,201,204,206,209],{"class":45,"line":180},14,[43,182,183],{"class":60},"  background",[43,185,64],{"class":53},[43,187,188],{"class":60},"linear-gradient",[43,190,191],{"class":53},"(",[43,193,194],{"class":60},"135",[43,196,197],{"class":154},"deg",[43,199,200],{"class":53},", ",[43,202,203],{"class":60},"#3B82F6",[43,205,200],{"class":53},[43,207,208],{"class":60},"#8B5CF6",[43,210,211],{"class":53},");\n",[43,213,215,218,220,223],{"class":45,"line":214},15,[43,216,217],{"class":60},"  opacity",[43,219,64],{"class":53},[43,221,222],{"class":60},"1",[43,224,70],{"class":53},[43,226,228],{"class":45,"line":227},16,[43,229,76],{"class":53},[43,231,233],{"class":45,"line":232},17,[43,234,83],{"emptyLinePlaceholder":82},[43,236,238,240],{"class":45,"line":237},18,[43,239,98],{"class":49},[43,241,54],{"class":53},[43,243,245,247,249,251,253,255,257,259,262,264,267],{"class":45,"line":244},19,[43,246,183],{"class":60},[43,248,64],{"class":53},[43,250,188],{"class":60},[43,252,191],{"class":53},[43,254,194],{"class":60},[43,256,197],{"class":154},[43,258,200],{"class":53},[43,260,261],{"class":60},"#EC4899",[43,263,200],{"class":53},[43,265,266],{"class":60},"#F59E0B",[43,268,211],{"class":53},[43,270,272,274,276,278],{"class":45,"line":271},20,[43,273,217],{"class":60},[43,275,64],{"class":53},[43,277,137],{"class":60},[43,279,70],{"class":53},[43,281,283],{"class":45,"line":282},21,[43,284,76],{"class":53},[43,286,288],{"class":45,"line":287},22,[43,289,83],{"emptyLinePlaceholder":82},[43,291,293,296],{"class":45,"line":292},23,[43,294,295],{"class":49},".gradient-bg:hover::before",[43,297,54],{"class":53},[43,299,301,303,305,307],{"class":45,"line":300},24,[43,302,217],{"class":60},[43,304,64],{"class":53},[43,306,137],{"class":60},[43,308,70],{"class":53},[43,310,312],{"class":45,"line":311},25,[43,313,76],{"class":53},[43,315,317],{"class":45,"line":316},26,[43,318,83],{"emptyLinePlaceholder":82},[43,320,322,325],{"class":45,"line":321},27,[43,323,324],{"class":49},".gradient-bg:hover::after",[43,326,54],{"class":53},[43,328,330,332,334,336],{"class":45,"line":329},28,[43,331,217],{"class":60},[43,333,64],{"class":53},[43,335,222],{"class":60},[43,337,70],{"class":53},[43,339,341],{"class":45,"line":340},29,[43,342,76],{"class":53},[15,344,345],{},"This creates a smooth cross-fade between two gradients. The browser interpolates opacity values, which it handles well.",[15,347,348,352],{},[349,350,351],"strong",{},"Trade-off",": The intermediate states show both gradients blended together, which can produce muddy colors at the midpoint. Keep both gradient palettes harmonious to minimize this.",[10,354,356],{"id":355},"technique-2-background-position-shift","Technique 2: Background-Position Shift",[15,358,359,360,363,364,367],{},"You can animate ",[19,361,362],{},"background-position"," or ",[19,365,366],{},"background-size"," on an oversized gradient:",[34,369,371],{"className":36,"code":370,"language":38,"meta":39,"style":39},".shift-gradient {\n  background: linear-gradient(\n    90deg,\n    #3B82F6, #8B5CF6, #EC4899, #3B82F6\n  );\n  background-size: 300% 100%;\n  background-position: 0% 50%;\n  transition: background-position 0.6s ease;\n}\n\n.shift-gradient:hover {\n  background-position: 100% 50%;\n}\n",[19,372,373,380,391,400,418,423,443,461,477,481,485,492,509],{"__ignoreMap":39},[43,374,375,378],{"class":45,"line":46},[43,376,377],{"class":49},".shift-gradient",[43,379,54],{"class":53},[43,381,382,384,386,388],{"class":45,"line":57},[43,383,183],{"class":60},[43,385,64],{"class":53},[43,387,188],{"class":60},[43,389,390],{"class":53},"(\n",[43,392,393,396,398],{"class":45,"line":73},[43,394,395],{"class":60},"    90",[43,397,197],{"class":154},[43,399,92],{"class":53},[43,401,402,405,407,409,411,413,415],{"class":45,"line":79},[43,403,404],{"class":60},"    #3B82F6",[43,406,200],{"class":53},[43,408,208],{"class":60},[43,410,200],{"class":53},[43,412,261],{"class":60},[43,414,200],{"class":53},[43,416,417],{"class":60},"#3B82F6\n",[43,419,420],{"class":45,"line":86},[43,421,422],{"class":53},"  );\n",[43,424,425,428,430,433,436,439,441],{"class":45,"line":95},[43,426,427],{"class":60},"  background-size",[43,429,64],{"class":53},[43,431,432],{"class":60},"300",[43,434,435],{"class":154},"%",[43,437,438],{"class":60}," 100",[43,440,435],{"class":154},[43,442,70],{"class":53},[43,444,445,448,450,452,454,457,459],{"class":45,"line":103},[43,446,447],{"class":60},"  background-position",[43,449,64],{"class":53},[43,451,137],{"class":60},[43,453,435],{"class":154},[43,455,456],{"class":60}," 50",[43,458,435],{"class":154},[43,460,70],{"class":53},[43,462,463,465,468,471,473,475],{"class":45,"line":117},[43,464,145],{"class":60},[43,466,467],{"class":53},": background-position ",[43,469,470],{"class":60},"0.6",[43,472,155],{"class":154},[43,474,158],{"class":60},[43,476,70],{"class":53},[43,478,479],{"class":45,"line":129},[43,480,76],{"class":53},[43,482,483],{"class":45,"line":142},[43,484,83],{"emptyLinePlaceholder":82},[43,486,487,490],{"class":45,"line":163},[43,488,489],{"class":49},".shift-gradient:hover",[43,491,54],{"class":53},[43,493,494,496,498,501,503,505,507],{"class":45,"line":168},[43,495,447],{"class":60},[43,497,64],{"class":53},[43,499,500],{"class":60},"100",[43,502,435],{"class":154},[43,504,456],{"class":60},[43,506,435],{"class":154},[43,508,70],{"class":53},[43,510,511],{"class":45,"line":173},[43,512,76],{"class":53},[15,514,515],{},"By making the gradient three times wider than the element and shifting the visible window, you get a smooth transition between different color sections of the same gradient.",[15,517,518,520],{},[349,519,351],{},": The gradient must contain both the starting and ending color schemes in a single linear flow. This works best when both states share a color at the transition point.",[10,522,524],{"id":523},"technique-3-css-custom-properties-with-property","Technique 3: CSS Custom Properties with @property",[15,526,527,528,531],{},"Modern CSS supports animating custom properties when their type is declared with ",[19,529,530],{},"@property",":",[34,533,535],{"className":36,"code":534,"language":38,"meta":39,"style":39},"@property --angle {\n  syntax: '\u003Cangle>';\n  initial-value: 0deg;\n  inherits: false;\n}\n\n@property --color-start {\n  syntax: '\u003Ccolor>';\n  initial-value: #3B82F6;\n  inherits: false;\n}\n\n@property --color-end {\n  syntax: '\u003Ccolor>';\n  initial-value: #8B5CF6;\n  inherits: false;\n}\n\n.animated-gradient {\n  background: linear-gradient(var(--angle), var(--color-start), var(--color-end));\n  transition: --angle 0.6s, --color-start 0.4s, --color-end 0.4s;\n}\n\n.animated-gradient:hover {\n  --angle: 90deg;\n  --color-start: #EC4899;\n  --color-end: #F59E0B;\n}\n",[19,536,537,544,555,564,569,573,577,584,593,604,608,612,616,623,631,641,645,649,653,660,701,728,732,736,743,757,768,779],{"__ignoreMap":39},[43,538,539,541],{"class":45,"line":46},[43,540,530],{"class":154},[43,542,543],{"class":53}," --angle {\n",[43,545,546,549,552],{"class":45,"line":57},[43,547,548],{"class":53},"  syntax: '\u003Cangle",[43,550,551],{"class":154},">",[43,553,554],{"class":53},"';\n",[43,556,557,561],{"class":45,"line":73},[43,558,560],{"class":559},"s9eBZ","  initial-value",[43,562,563],{"class":53},": 0deg;\n",[43,565,566],{"class":45,"line":79},[43,567,568],{"class":53},"  inherits: false;\n",[43,570,571],{"class":45,"line":86},[43,572,76],{"class":53},[43,574,575],{"class":45,"line":95},[43,576,83],{"emptyLinePlaceholder":82},[43,578,579,581],{"class":45,"line":103},[43,580,530],{"class":154},[43,582,583],{"class":53}," --color-start {\n",[43,585,586,589,591],{"class":45,"line":117},[43,587,588],{"class":53},"  syntax: '\u003Ccolor",[43,590,551],{"class":154},[43,592,554],{"class":53},[43,594,595,597,599,602],{"class":45,"line":129},[43,596,560],{"class":559},[43,598,64],{"class":53},[43,600,203],{"class":601},"s7hpK",[43,603,70],{"class":53},[43,605,606],{"class":45,"line":142},[43,607,568],{"class":53},[43,609,610],{"class":45,"line":163},[43,611,76],{"class":53},[43,613,614],{"class":45,"line":168},[43,615,83],{"emptyLinePlaceholder":82},[43,617,618,620],{"class":45,"line":173},[43,619,530],{"class":154},[43,621,622],{"class":53}," --color-end {\n",[43,624,625,627,629],{"class":45,"line":180},[43,626,588],{"class":53},[43,628,551],{"class":154},[43,630,554],{"class":53},[43,632,633,635,637,639],{"class":45,"line":214},[43,634,560],{"class":559},[43,636,64],{"class":53},[43,638,208],{"class":601},[43,640,70],{"class":53},[43,642,643],{"class":45,"line":227},[43,644,568],{"class":53},[43,646,647],{"class":45,"line":232},[43,648,76],{"class":53},[43,650,651],{"class":45,"line":237},[43,652,83],{"emptyLinePlaceholder":82},[43,654,655,658],{"class":45,"line":244},[43,656,657],{"class":49},".animated-gradient",[43,659,54],{"class":53},[43,661,662,664,666,668,670,673,675,679,682,684,686,689,691,693,695,698],{"class":45,"line":271},[43,663,183],{"class":60},[43,665,64],{"class":53},[43,667,188],{"class":60},[43,669,191],{"class":53},[43,671,672],{"class":60},"var",[43,674,191],{"class":53},[43,676,678],{"class":677},"s4XuR","--angle",[43,680,681],{"class":53},"), ",[43,683,672],{"class":60},[43,685,191],{"class":53},[43,687,688],{"class":677},"--color-start",[43,690,681],{"class":53},[43,692,672],{"class":60},[43,694,191],{"class":53},[43,696,697],{"class":677},"--color-end",[43,699,700],{"class":53},"));\n",[43,702,703,705,708,710,712,715,717,719,722,724,726],{"class":45,"line":282},[43,704,145],{"class":60},[43,706,707],{"class":53},": --angle ",[43,709,470],{"class":60},[43,711,155],{"class":154},[43,713,714],{"class":53},", --color-start ",[43,716,151],{"class":60},[43,718,155],{"class":154},[43,720,721],{"class":53},", --color-end ",[43,723,151],{"class":60},[43,725,155],{"class":154},[43,727,70],{"class":53},[43,729,730],{"class":45,"line":287},[43,731,76],{"class":53},[43,733,734],{"class":45,"line":292},[43,735,83],{"emptyLinePlaceholder":82},[43,737,738,741],{"class":45,"line":300},[43,739,740],{"class":49},".animated-gradient:hover",[43,742,54],{"class":53},[43,744,745,748,750,753,755],{"class":45,"line":311},[43,746,747],{"class":677},"  --angle",[43,749,64],{"class":53},[43,751,752],{"class":60},"90",[43,754,197],{"class":154},[43,756,70],{"class":53},[43,758,759,762,764,766],{"class":45,"line":316},[43,760,761],{"class":677},"  --color-start",[43,763,64],{"class":53},[43,765,261],{"class":60},[43,767,70],{"class":53},[43,769,770,773,775,777],{"class":45,"line":321},[43,771,772],{"class":677},"  --color-end",[43,774,64],{"class":53},[43,776,266],{"class":60},[43,778,70],{"class":53},[43,780,781],{"class":45,"line":329},[43,782,76],{"class":53},[15,784,785],{},"This is the most elegant solution because the browser interpolates each custom property independently, yielding clean transitions.",[15,787,788,64,791,793],{},[349,789,790],{},"Browser support",[19,792,530],{}," works in Chromium browsers (Chrome, Edge, Safari 15.4+). Firefox added support in version 128. Always verify your target browsers.",[10,795,797],{"id":796},"technique-4-continuous-gradient-animation","Technique 4: Continuous Gradient Animation",[15,799,800,801,804,805,531],{},"For loading spinners and ambient backgrounds, use ",[19,802,803],{},"@keyframes"," with ",[19,806,362],{},[34,808,810],{"className":36,"code":809,"language":38,"meta":39,"style":39},"@keyframes gradient-flow {\n  0% { background-position: 0% 50%; }\n  50% { background-position: 100% 50%; }\n  100% { background-position: 0% 50%; }\n}\n\n.flow-gradient {\n  background: linear-gradient(270deg, #3B82F6, #8B5CF6, #EC4899, #3B82F6);\n  background-size: 400% 100%;\n  animation: gradient-flow 8s ease infinite;\n}\n",[19,811,812,821,844,865,886,890,894,901,934,951,971],{"__ignoreMap":39},[43,813,814,816,819],{"class":45,"line":46},[43,815,803],{"class":154},[43,817,818],{"class":677}," gradient-flow",[43,820,54],{"class":53},[43,822,823,826,829,831,833,835,837,839,841],{"class":45,"line":57},[43,824,825],{"class":49},"  0%",[43,827,828],{"class":53}," { ",[43,830,362],{"class":60},[43,832,64],{"class":53},[43,834,137],{"class":60},[43,836,435],{"class":154},[43,838,456],{"class":60},[43,840,435],{"class":154},[43,842,843],{"class":53},"; }\n",[43,845,846,849,851,853,855,857,859,861,863],{"class":45,"line":73},[43,847,848],{"class":49},"  50%",[43,850,828],{"class":53},[43,852,362],{"class":60},[43,854,64],{"class":53},[43,856,500],{"class":60},[43,858,435],{"class":154},[43,860,456],{"class":60},[43,862,435],{"class":154},[43,864,843],{"class":53},[43,866,867,870,872,874,876,878,880,882,884],{"class":45,"line":79},[43,868,869],{"class":49},"  100%",[43,871,828],{"class":53},[43,873,362],{"class":60},[43,875,64],{"class":53},[43,877,137],{"class":60},[43,879,435],{"class":154},[43,881,456],{"class":60},[43,883,435],{"class":154},[43,885,843],{"class":53},[43,887,888],{"class":45,"line":86},[43,889,76],{"class":53},[43,891,892],{"class":45,"line":95},[43,893,83],{"emptyLinePlaceholder":82},[43,895,896,899],{"class":45,"line":103},[43,897,898],{"class":49},".flow-gradient",[43,900,54],{"class":53},[43,902,903,905,907,909,911,914,916,918,920,922,924,926,928,930,932],{"class":45,"line":117},[43,904,183],{"class":60},[43,906,64],{"class":53},[43,908,188],{"class":60},[43,910,191],{"class":53},[43,912,913],{"class":60},"270",[43,915,197],{"class":154},[43,917,200],{"class":53},[43,919,203],{"class":60},[43,921,200],{"class":53},[43,923,208],{"class":60},[43,925,200],{"class":53},[43,927,261],{"class":60},[43,929,200],{"class":53},[43,931,203],{"class":60},[43,933,211],{"class":53},[43,935,936,938,940,943,945,947,949],{"class":45,"line":129},[43,937,427],{"class":60},[43,939,64],{"class":53},[43,941,942],{"class":60},"400",[43,944,435],{"class":154},[43,946,438],{"class":60},[43,948,435],{"class":154},[43,950,70],{"class":53},[43,952,953,956,959,962,964,966,969],{"class":45,"line":142},[43,954,955],{"class":60},"  animation",[43,957,958],{"class":53},": gradient-flow ",[43,960,961],{"class":60},"8",[43,963,155],{"class":154},[43,965,158],{"class":60},[43,967,968],{"class":60}," infinite",[43,970,70],{"class":53},[43,972,973],{"class":45,"line":163},[43,974,76],{"class":53},[15,976,977,978,981],{},"This creates a continuously shifting gradient effect. Use ",[19,979,980],{},"prefers-reduced-motion"," to disable it for users who request reduced motion:",[34,983,985],{"className":36,"code":984,"language":38,"meta":39,"style":39},"@media (prefers-reduced-motion: reduce) {\n  .flow-gradient {\n    animation: none;\n  }\n}\n",[19,986,987,995,1002,1014,1019],{"__ignoreMap":39},[43,988,989,992],{"class":45,"line":46},[43,990,991],{"class":154},"@media",[43,993,994],{"class":53}," (prefers-reduced-motion: reduce) {\n",[43,996,997,1000],{"class":45,"line":57},[43,998,999],{"class":49},"  .flow-gradient",[43,1001,54],{"class":53},[43,1003,1004,1007,1009,1012],{"class":45,"line":73},[43,1005,1006],{"class":60},"    animation",[43,1008,64],{"class":53},[43,1010,1011],{"class":60},"none",[43,1013,70],{"class":53},[43,1015,1016],{"class":45,"line":79},[43,1017,1018],{"class":53},"  }\n",[43,1020,1021],{"class":45,"line":86},[43,1022,76],{"class":53},[10,1024,1026],{"id":1025},"performance-considerations","Performance Considerations",[1028,1029,1030,1049],"table",{},[1031,1032,1033],"thead",{},[1034,1035,1036,1040,1043,1046],"tr",{},[1037,1038,1039],"th",{},"Technique",[1037,1041,1042],{},"GPU-friendly",[1037,1044,1045],{},"Paint cost",[1037,1047,1048],{},"Best For",[1050,1051,1052,1067,1081,1094],"tbody",{},[1034,1053,1054,1058,1061,1064],{},[1055,1056,1057],"td",{},"Opacity cross-fade",[1055,1059,1060],{},"Yes — compositor layer",[1055,1062,1063],{},"Low",[1055,1065,1066],{},"Hover effects",[1034,1068,1069,1072,1075,1078],{},[1055,1070,1071],{},"Background-position shift",[1055,1073,1074],{},"Partial — repaints",[1055,1076,1077],{},"Medium",[1055,1079,1080],{},"Subtle shifts",[1034,1082,1083,1086,1089,1091],{},[1055,1084,1085],{},"@property animation",[1055,1087,1088],{},"Yes — interpolates values",[1055,1090,1063],{},[1055,1092,1093],{},"Precise transitions",[1034,1095,1096,1099,1102,1105],{},[1055,1097,1098],{},"Continuous animation",[1055,1100,1101],{},"No — constant repaint",[1055,1103,1104],{},"High",[1055,1106,1107],{},"Loading states only",[15,1109,1110,531],{},[349,1111,1112],{},"Rules of thumb",[1114,1115,1116,1120,1123,1129],"ul",{},[1117,1118,1119],"li",{},"Use opacity transitions wherever possible — they're cheapest",[1117,1121,1122],{},"Limit continuous gradient animations to loading indicators and small areas",[1117,1124,1125,1126,1128],{},"Always wrap continuous animations in ",[19,1127,980],{}," checks",[1117,1130,1131],{},"Avoid animating gradients on elements that scroll — the combined repaint cost is noticeable",[10,1133,1135],{"id":1134},"key-takeaways","Key Takeaways",[1114,1137,1138,1141,1144,1147,1152,1157],{},[1117,1139,1140],{},"CSS gradients don't transition natively — use workaround patterns",[1117,1142,1143],{},"Opacity cross-fade is the simplest and most performant approach",[1117,1145,1146],{},"Background-position shift works well for linear gradient color changes",[1117,1148,1149,1151],{},[19,1150,530],{}," enables true gradient interpolation in modern browsers",[1117,1153,1154,1155],{},"Continuous gradient animations should respect ",[19,1156,980],{},[1117,1158,1159],{},"Prefer opacity-based transitions for best GPU performance",[10,1161,1163],{"id":1162},"related-guides","Related Guides",[1114,1165,1166,1173,1179],{},[1117,1167,1168],{},[1169,1170,1172],"a",{"href":1171},"\u002Fguides\u002Fcss-gradient-guide","CSS Gradient Guide",[1117,1174,1175],{},[1169,1176,1178],{"href":1177},"\u002Fguides\u002Fcss-linear-gradient-tutorial","CSS Linear Gradient Tutorial",[1117,1180,1181],{},[1169,1182,1184],{"href":1183},"\u002Fguides\u002Fcss-radial-gradients-tutorial","CSS Radial Gradients Tutorial",[10,1186,1188],{"id":1187},"try-it-yourself","Try It Yourself",[15,1190,1191,1192,1196],{},"Experiment with gradient transitions interactively using our ",[1169,1193,1195],{"href":1194},"\u002Ftools\u002Fcss-gradient","CSS Gradient Generator",". Build your gradients, test hover states, and copy the code directly.",[1198,1199,1200],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":39,"searchDepth":57,"depth":57,"links":1202},[1203,1204,1205,1206,1207,1208,1209,1210,1211],{"id":12,"depth":57,"text":13},{"id":28,"depth":57,"text":29},{"id":355,"depth":57,"text":356},{"id":523,"depth":57,"text":524},{"id":796,"depth":57,"text":797},{"id":1025,"depth":57,"text":1026},{"id":1134,"depth":57,"text":1135},{"id":1162,"depth":57,"text":1163},{"id":1187,"depth":57,"text":1188},"2026-05-28","Learn techniques for smooth gradient transitions in CSS — hover effects, animated gradients, and workaround patterns for gradient animation limits.","md",{"immutable":82},"\u002Fguides\u002Fsmooth-gradient-transitions",{"title":5,"description":1213},"guides\u002Fsmooth-gradient-transitions","GHNpSTHjPNIbK8SZO0cCxLI0PRMp5mDtpe26n_m82eM",1780401336886]