[{"data":1,"prerenderedAt":1784},["ShallowReactive",2],{"guide-box-shadow-animation-techniques":3},{"id":4,"title":5,"body":6,"date":1773,"description":1774,"extension":1775,"meta":1776,"navigation":137,"path":1780,"readingTime":141,"seo":1781,"stem":1782,"__hash__":1783},"guides\u002Fguides\u002Fbox-shadow-animation-techniques.md","Box Shadow Animation Techniques: Smooth Elevation and Hover Effects",{"type":7,"value":8,"toc":1755},"minimark",[9,14,18,26,30,33,192,195,200,244,247,251,258,569,576,580,583,940,944,949,953,960,1231,1234,1242,1248,1376,1380,1387,1545,1548,1552,1555,1683,1687,1718,1722,1731,1735,1751],[10,11,13],"h2",{"id":12},"why-animate-box-shadows","Why Animate Box Shadows?",[15,16,17],"p",{},"Subtle shadow animations communicate interactivity without words. A button that lifts on hover, a card that gains depth on focus, or a dropdown that slides into view — these micro-interactions make interfaces feel responsive and polished.",[15,19,20,21,25],{},"But animating ",[22,23,24],"code",{},"box-shadow"," the wrong way causes jank. This guide covers both the visual techniques and the performance patterns that keep animations smooth.",[10,27,29],{"id":28},"the-basic-transition","The Basic Transition",[15,31,32],{},"The simplest approach: transition between two box-shadow states.",[34,35,40],"pre",{"className":36,"code":37,"language":38,"meta":39,"style":39},"language-css shiki shiki-themes github-light github-dark",".card {\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n  transition: box-shadow 0.3s ease;\n}\n\n.card:hover {\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);\n}\n","css","",[22,41,42,55,105,126,132,139,147,187],{"__ignoreMap":39},[43,44,47,51],"span",{"class":45,"line":46},"line",1,[43,48,50],{"class":49},"sScJk",".card",[43,52,54],{"class":53},"sVt8B"," {\n",[43,56,58,62,65,68,71,75,78,80,83,86,88,91,93,95,97,99,102],{"class":45,"line":57},2,[43,59,61],{"class":60},"sj4cs","  box-shadow",[43,63,64],{"class":53},": ",[43,66,67],{"class":60},"0",[43,69,70],{"class":60}," 2",[43,72,74],{"class":73},"szBVR","px",[43,76,77],{"class":60}," 4",[43,79,74],{"class":73},[43,81,82],{"class":60}," rgba",[43,84,85],{"class":53},"(",[43,87,67],{"class":60},[43,89,90],{"class":53},", ",[43,92,67],{"class":60},[43,94,90],{"class":53},[43,96,67],{"class":60},[43,98,90],{"class":53},[43,100,101],{"class":60},"0.08",[43,103,104],{"class":53},");\n",[43,106,108,111,114,117,120,123],{"class":45,"line":107},3,[43,109,110],{"class":60},"  transition",[43,112,113],{"class":53},": box-shadow ",[43,115,116],{"class":60},"0.3",[43,118,119],{"class":73},"s",[43,121,122],{"class":60}," ease",[43,124,125],{"class":53},";\n",[43,127,129],{"class":45,"line":128},4,[43,130,131],{"class":53},"}\n",[43,133,135],{"class":45,"line":134},5,[43,136,138],{"emptyLinePlaceholder":137},true,"\n",[43,140,142,145],{"class":45,"line":141},6,[43,143,144],{"class":49},".card:hover",[43,146,54],{"class":53},[43,148,150,152,154,156,159,161,164,166,168,170,172,174,176,178,180,182,185],{"class":45,"line":149},7,[43,151,61],{"class":60},[43,153,64],{"class":53},[43,155,67],{"class":60},[43,157,158],{"class":60}," 8",[43,160,74],{"class":73},[43,162,163],{"class":60}," 24",[43,165,74],{"class":73},[43,167,82],{"class":60},[43,169,85],{"class":53},[43,171,67],{"class":60},[43,173,90],{"class":53},[43,175,67],{"class":60},[43,177,90],{"class":53},[43,179,67],{"class":60},[43,181,90],{"class":53},[43,183,184],{"class":60},"0.12",[43,186,104],{"class":53},[43,188,190],{"class":45,"line":189},8,[43,191,131],{"class":53},[15,193,194],{},"This works well for simple two-state animations. The browser interpolates each shadow value (offset, blur, spread, color) independently.",[196,197,199],"h3",{"id":198},"transition-timing","Transition Timing",[201,202,203,216],"table",{},[204,205,206],"thead",{},[207,208,209,213],"tr",{},[210,211,212],"th",{},"Duration",[210,214,215],{},"Use Case",[217,218,219,228,236],"tbody",{},[207,220,221,225],{},[222,223,224],"td",{},"100–200ms",[222,226,227],{},"Small interactive elements (buttons, toggles)",[207,229,230,233],{},[222,231,232],{},"200–300ms",[222,234,235],{},"Cards, list items",[207,237,238,241],{},[222,239,240],{},"300–500ms",[222,242,243],{},"Modals, panels",[15,245,246],{},"Faster than 100ms feels instant (no animation perceived). Slower than 500ms feels laggy.",[10,248,250],{"id":249},"elevation-on-hover","Elevation on Hover",[15,252,253,254,257],{},"Simulating an element lifting off the page is one of the most common shadow animations. Combine a shadow change with a slight ",[22,255,256],{},"translateY"," shift for the most convincing effect:",[34,259,261],{"className":36,"code":260,"language":38,"meta":39,"style":39},".button {\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);\n  transform: translateY(0);\n  transition: box-shadow 0.2s ease, transform 0.2s ease;\n}\n\n.button:hover {\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.10), 0 8px 16px rgba(0, 0, 0, 0.08);\n  transform: translateY(-1px);\n}\n\n.button:active {\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);\n  transform: translateY(0);\n  transition-duration: 0.05s;\n}\n",[22,262,263,270,339,354,378,382,386,393,461,479,484,489,497,534,549,564],{"__ignoreMap":39},[43,264,265,268],{"class":45,"line":46},[43,266,267],{"class":49},".button",[43,269,54],{"class":53},[43,271,272,274,276,278,281,283,285,287,289,291,293,295,297,299,301,303,305,308,310,312,314,316,318,320,322,324,326,328,330,332,334,337],{"class":45,"line":57},[43,273,61],{"class":60},[43,275,64],{"class":53},[43,277,67],{"class":60},[43,279,280],{"class":60}," 1",[43,282,74],{"class":73},[43,284,70],{"class":60},[43,286,74],{"class":73},[43,288,82],{"class":60},[43,290,85],{"class":53},[43,292,67],{"class":60},[43,294,90],{"class":53},[43,296,67],{"class":60},[43,298,90],{"class":53},[43,300,67],{"class":60},[43,302,90],{"class":53},[43,304,101],{"class":60},[43,306,307],{"class":53},"), ",[43,309,67],{"class":60},[43,311,70],{"class":60},[43,313,74],{"class":73},[43,315,77],{"class":60},[43,317,74],{"class":73},[43,319,82],{"class":60},[43,321,85],{"class":53},[43,323,67],{"class":60},[43,325,90],{"class":53},[43,327,67],{"class":60},[43,329,90],{"class":53},[43,331,67],{"class":60},[43,333,90],{"class":53},[43,335,336],{"class":60},"0.06",[43,338,104],{"class":53},[43,340,341,344,346,348,350,352],{"class":45,"line":107},[43,342,343],{"class":60},"  transform",[43,345,64],{"class":53},[43,347,256],{"class":60},[43,349,85],{"class":53},[43,351,67],{"class":60},[43,353,104],{"class":53},[43,355,356,358,360,363,365,367,370,372,374,376],{"class":45,"line":128},[43,357,110],{"class":60},[43,359,113],{"class":53},[43,361,362],{"class":60},"0.2",[43,364,119],{"class":73},[43,366,122],{"class":60},[43,368,369],{"class":53},", transform ",[43,371,362],{"class":60},[43,373,119],{"class":73},[43,375,122],{"class":60},[43,377,125],{"class":53},[43,379,380],{"class":45,"line":134},[43,381,131],{"class":53},[43,383,384],{"class":45,"line":141},[43,385,138],{"emptyLinePlaceholder":137},[43,387,388,391],{"class":45,"line":149},[43,389,390],{"class":49},".button:hover",[43,392,54],{"class":53},[43,394,395,397,399,401,403,405,407,409,411,413,415,417,419,421,423,425,428,430,432,434,436,439,441,443,445,447,449,451,453,455,457,459],{"class":45,"line":189},[43,396,61],{"class":60},[43,398,64],{"class":53},[43,400,67],{"class":60},[43,402,77],{"class":60},[43,404,74],{"class":73},[43,406,158],{"class":60},[43,408,74],{"class":73},[43,410,82],{"class":60},[43,412,85],{"class":53},[43,414,67],{"class":60},[43,416,90],{"class":53},[43,418,67],{"class":60},[43,420,90],{"class":53},[43,422,67],{"class":60},[43,424,90],{"class":53},[43,426,427],{"class":60},"0.10",[43,429,307],{"class":53},[43,431,67],{"class":60},[43,433,158],{"class":60},[43,435,74],{"class":73},[43,437,438],{"class":60}," 16",[43,440,74],{"class":73},[43,442,82],{"class":60},[43,444,85],{"class":53},[43,446,67],{"class":60},[43,448,90],{"class":53},[43,450,67],{"class":60},[43,452,90],{"class":53},[43,454,67],{"class":60},[43,456,90],{"class":53},[43,458,101],{"class":60},[43,460,104],{"class":53},[43,462,464,466,468,470,472,475,477],{"class":45,"line":463},9,[43,465,343],{"class":60},[43,467,64],{"class":53},[43,469,256],{"class":60},[43,471,85],{"class":53},[43,473,474],{"class":60},"-1",[43,476,74],{"class":73},[43,478,104],{"class":53},[43,480,482],{"class":45,"line":481},10,[43,483,131],{"class":53},[43,485,487],{"class":45,"line":486},11,[43,488,138],{"emptyLinePlaceholder":137},[43,490,492,495],{"class":45,"line":491},12,[43,493,494],{"class":49},".button:active",[43,496,54],{"class":53},[43,498,500,502,504,506,508,510,512,514,516,518,520,522,524,526,528,530,532],{"class":45,"line":499},13,[43,501,61],{"class":60},[43,503,64],{"class":53},[43,505,67],{"class":60},[43,507,280],{"class":60},[43,509,74],{"class":73},[43,511,70],{"class":60},[43,513,74],{"class":73},[43,515,82],{"class":60},[43,517,85],{"class":53},[43,519,67],{"class":60},[43,521,90],{"class":53},[43,523,67],{"class":60},[43,525,90],{"class":53},[43,527,67],{"class":60},[43,529,90],{"class":53},[43,531,101],{"class":60},[43,533,104],{"class":53},[43,535,537,539,541,543,545,547],{"class":45,"line":536},14,[43,538,343],{"class":60},[43,540,64],{"class":53},[43,542,256],{"class":60},[43,544,85],{"class":53},[43,546,67],{"class":60},[43,548,104],{"class":53},[43,550,552,555,557,560,562],{"class":45,"line":551},15,[43,553,554],{"class":60},"  transition-duration",[43,556,64],{"class":53},[43,558,559],{"class":60},"0.05",[43,561,119],{"class":73},[43,563,125],{"class":53},[43,565,567],{"class":45,"line":566},16,[43,568,131],{"class":53},[15,570,571,572,575],{},"The ",[22,573,574],{},":active"," state reverses the elevation quickly, creating a \"press-down\" feel.",[10,577,579],{"id":578},"animating-layered-shadows","Animating Layered Shadows",[15,581,582],{},"When transitioning between layered shadow states, keep the same number of layers in both states. The browser interpolates corresponding layers positionally.",[34,584,586],{"className":36,"code":585,"language":38,"meta":39,"style":39},"\u002F* ✅ Same layer count — smooth interpolation *\u002F\n.card {\n  box-shadow:\n    0 1px 2px rgba(0, 0, 0, 0.05),\n    0 4px 8px rgba(0, 0, 0, 0.05);\n  transition: box-shadow 0.3s ease;\n}\n\n.card:hover {\n  box-shadow:\n    0 2px 4px rgba(0, 0, 0, 0.08),\n    0 12px 24px rgba(0, 0, 0, 0.10);\n}\n\n\u002F* ❌ Different layer count — first layer animates, second pops in *\u002F\n.bad-card {\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n  transition: box-shadow 0.3s ease;\n}\n\n.bad-card:hover {\n  box-shadow:\n    0 2px 4px rgba(0, 0, 0, 0.08),\n    0 12px 24px rgba(0, 0, 0, 0.10);\n}\n",[22,587,588,594,600,607,641,673,687,691,695,701,707,739,772,776,780,785,792,829,844,849,854,862,869,902,935],{"__ignoreMap":39},[43,589,590],{"class":45,"line":46},[43,591,593],{"class":592},"sJ8bj","\u002F* ✅ Same layer count — smooth interpolation *\u002F\n",[43,595,596,598],{"class":45,"line":57},[43,597,50],{"class":49},[43,599,54],{"class":53},[43,601,602,604],{"class":45,"line":107},[43,603,61],{"class":60},[43,605,606],{"class":53},":\n",[43,608,609,612,614,616,618,620,622,624,626,628,630,632,634,636,638],{"class":45,"line":128},[43,610,611],{"class":60},"    0",[43,613,280],{"class":60},[43,615,74],{"class":73},[43,617,70],{"class":60},[43,619,74],{"class":73},[43,621,82],{"class":60},[43,623,85],{"class":53},[43,625,67],{"class":60},[43,627,90],{"class":53},[43,629,67],{"class":60},[43,631,90],{"class":53},[43,633,67],{"class":60},[43,635,90],{"class":53},[43,637,559],{"class":60},[43,639,640],{"class":53},"),\n",[43,642,643,645,647,649,651,653,655,657,659,661,663,665,667,669,671],{"class":45,"line":134},[43,644,611],{"class":60},[43,646,77],{"class":60},[43,648,74],{"class":73},[43,650,158],{"class":60},[43,652,74],{"class":73},[43,654,82],{"class":60},[43,656,85],{"class":53},[43,658,67],{"class":60},[43,660,90],{"class":53},[43,662,67],{"class":60},[43,664,90],{"class":53},[43,666,67],{"class":60},[43,668,90],{"class":53},[43,670,559],{"class":60},[43,672,104],{"class":53},[43,674,675,677,679,681,683,685],{"class":45,"line":141},[43,676,110],{"class":60},[43,678,113],{"class":53},[43,680,116],{"class":60},[43,682,119],{"class":73},[43,684,122],{"class":60},[43,686,125],{"class":53},[43,688,689],{"class":45,"line":149},[43,690,131],{"class":53},[43,692,693],{"class":45,"line":189},[43,694,138],{"emptyLinePlaceholder":137},[43,696,697,699],{"class":45,"line":463},[43,698,144],{"class":49},[43,700,54],{"class":53},[43,702,703,705],{"class":45,"line":481},[43,704,61],{"class":60},[43,706,606],{"class":53},[43,708,709,711,713,715,717,719,721,723,725,727,729,731,733,735,737],{"class":45,"line":486},[43,710,611],{"class":60},[43,712,70],{"class":60},[43,714,74],{"class":73},[43,716,77],{"class":60},[43,718,74],{"class":73},[43,720,82],{"class":60},[43,722,85],{"class":53},[43,724,67],{"class":60},[43,726,90],{"class":53},[43,728,67],{"class":60},[43,730,90],{"class":53},[43,732,67],{"class":60},[43,734,90],{"class":53},[43,736,101],{"class":60},[43,738,640],{"class":53},[43,740,741,743,746,748,750,752,754,756,758,760,762,764,766,768,770],{"class":45,"line":491},[43,742,611],{"class":60},[43,744,745],{"class":60}," 12",[43,747,74],{"class":73},[43,749,163],{"class":60},[43,751,74],{"class":73},[43,753,82],{"class":60},[43,755,85],{"class":53},[43,757,67],{"class":60},[43,759,90],{"class":53},[43,761,67],{"class":60},[43,763,90],{"class":53},[43,765,67],{"class":60},[43,767,90],{"class":53},[43,769,427],{"class":60},[43,771,104],{"class":53},[43,773,774],{"class":45,"line":499},[43,775,131],{"class":53},[43,777,778],{"class":45,"line":536},[43,779,138],{"emptyLinePlaceholder":137},[43,781,782],{"class":45,"line":551},[43,783,784],{"class":592},"\u002F* ❌ Different layer count — first layer animates, second pops in *\u002F\n",[43,786,787,790],{"class":45,"line":566},[43,788,789],{"class":49},".bad-card",[43,791,54],{"class":53},[43,793,795,797,799,801,803,805,807,809,811,813,815,817,819,821,823,825,827],{"class":45,"line":794},17,[43,796,61],{"class":60},[43,798,64],{"class":53},[43,800,67],{"class":60},[43,802,70],{"class":60},[43,804,74],{"class":73},[43,806,77],{"class":60},[43,808,74],{"class":73},[43,810,82],{"class":60},[43,812,85],{"class":53},[43,814,67],{"class":60},[43,816,90],{"class":53},[43,818,67],{"class":60},[43,820,90],{"class":53},[43,822,67],{"class":60},[43,824,90],{"class":53},[43,826,101],{"class":60},[43,828,104],{"class":53},[43,830,832,834,836,838,840,842],{"class":45,"line":831},18,[43,833,110],{"class":60},[43,835,113],{"class":53},[43,837,116],{"class":60},[43,839,119],{"class":73},[43,841,122],{"class":60},[43,843,125],{"class":53},[43,845,847],{"class":45,"line":846},19,[43,848,131],{"class":53},[43,850,852],{"class":45,"line":851},20,[43,853,138],{"emptyLinePlaceholder":137},[43,855,857,860],{"class":45,"line":856},21,[43,858,859],{"class":49},".bad-card:hover",[43,861,54],{"class":53},[43,863,865,867],{"class":45,"line":864},22,[43,866,61],{"class":60},[43,868,606],{"class":53},[43,870,872,874,876,878,880,882,884,886,888,890,892,894,896,898,900],{"class":45,"line":871},23,[43,873,611],{"class":60},[43,875,70],{"class":60},[43,877,74],{"class":73},[43,879,77],{"class":60},[43,881,74],{"class":73},[43,883,82],{"class":60},[43,885,85],{"class":53},[43,887,67],{"class":60},[43,889,90],{"class":53},[43,891,67],{"class":60},[43,893,90],{"class":53},[43,895,67],{"class":60},[43,897,90],{"class":53},[43,899,101],{"class":60},[43,901,640],{"class":53},[43,903,905,907,909,911,913,915,917,919,921,923,925,927,929,931,933],{"class":45,"line":904},24,[43,906,611],{"class":60},[43,908,745],{"class":60},[43,910,74],{"class":73},[43,912,163],{"class":60},[43,914,74],{"class":73},[43,916,82],{"class":60},[43,918,85],{"class":53},[43,920,67],{"class":60},[43,922,90],{"class":53},[43,924,67],{"class":60},[43,926,90],{"class":53},[43,928,67],{"class":60},[43,930,90],{"class":53},[43,932,427],{"class":60},[43,934,104],{"class":53},[43,936,938],{"class":45,"line":937},25,[43,939,131],{"class":53},[10,941,943],{"id":942},"performance-the-repaint-problem","Performance: The Repaint Problem",[15,945,946,948],{},[22,947,24],{}," animations trigger repaints because the shadow pixels must be recomputed each frame. On complex pages with many animated elements, this causes visible jank.",[196,950,952],{"id":951},"solution-1-pseudo-element-opacity","Solution 1: Pseudo-Element Opacity",[15,954,955,956,959],{},"Use a pseudo-element with the hover shadow, and animate only ",[22,957,958],{},"opacity"," — which the GPU composites without repaints.",[34,961,963],{"className":36,"code":962,"language":38,"meta":39,"style":39},".card {\n  position: relative;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n  transition: transform 0.2s ease;\n}\n\n.card::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  z-index: -1;\n}\n\n.card:hover {\n  transform: translateY(-2px);\n}\n\n.card:hover::after {\n  opacity: 1;\n}\n",[22,964,965,971,983,1019,1034,1038,1042,1049,1062,1073,1084,1096,1133,1144,1159,1170,1174,1178,1184,1201,1205,1209,1216,1227],{"__ignoreMap":39},[43,966,967,969],{"class":45,"line":46},[43,968,50],{"class":49},[43,970,54],{"class":53},[43,972,973,976,978,981],{"class":45,"line":57},[43,974,975],{"class":60},"  position",[43,977,64],{"class":53},[43,979,980],{"class":60},"relative",[43,982,125],{"class":53},[43,984,985,987,989,991,993,995,997,999,1001,1003,1005,1007,1009,1011,1013,1015,1017],{"class":45,"line":107},[43,986,61],{"class":60},[43,988,64],{"class":53},[43,990,67],{"class":60},[43,992,70],{"class":60},[43,994,74],{"class":73},[43,996,77],{"class":60},[43,998,74],{"class":73},[43,1000,82],{"class":60},[43,1002,85],{"class":53},[43,1004,67],{"class":60},[43,1006,90],{"class":53},[43,1008,67],{"class":60},[43,1010,90],{"class":53},[43,1012,67],{"class":60},[43,1014,90],{"class":53},[43,1016,101],{"class":60},[43,1018,104],{"class":53},[43,1020,1021,1023,1026,1028,1030,1032],{"class":45,"line":128},[43,1022,110],{"class":60},[43,1024,1025],{"class":53},": transform ",[43,1027,362],{"class":60},[43,1029,119],{"class":73},[43,1031,122],{"class":60},[43,1033,125],{"class":53},[43,1035,1036],{"class":45,"line":134},[43,1037,131],{"class":53},[43,1039,1040],{"class":45,"line":141},[43,1041,138],{"emptyLinePlaceholder":137},[43,1043,1044,1047],{"class":45,"line":149},[43,1045,1046],{"class":49},".card::after",[43,1048,54],{"class":53},[43,1050,1051,1054,1056,1060],{"class":45,"line":189},[43,1052,1053],{"class":60},"  content",[43,1055,64],{"class":53},[43,1057,1059],{"class":1058},"sZZnC","''",[43,1061,125],{"class":53},[43,1063,1064,1066,1068,1071],{"class":45,"line":463},[43,1065,975],{"class":60},[43,1067,64],{"class":53},[43,1069,1070],{"class":60},"absolute",[43,1072,125],{"class":53},[43,1074,1075,1078,1080,1082],{"class":45,"line":481},[43,1076,1077],{"class":60},"  inset",[43,1079,64],{"class":53},[43,1081,67],{"class":60},[43,1083,125],{"class":53},[43,1085,1086,1089,1091,1094],{"class":45,"line":486},[43,1087,1088],{"class":60},"  border-radius",[43,1090,64],{"class":53},[43,1092,1093],{"class":60},"inherit",[43,1095,125],{"class":53},[43,1097,1098,1100,1102,1104,1106,1108,1110,1112,1114,1116,1118,1120,1122,1124,1126,1128,1131],{"class":45,"line":491},[43,1099,61],{"class":60},[43,1101,64],{"class":53},[43,1103,67],{"class":60},[43,1105,158],{"class":60},[43,1107,74],{"class":73},[43,1109,163],{"class":60},[43,1111,74],{"class":73},[43,1113,82],{"class":60},[43,1115,85],{"class":53},[43,1117,67],{"class":60},[43,1119,90],{"class":53},[43,1121,67],{"class":60},[43,1123,90],{"class":53},[43,1125,67],{"class":60},[43,1127,90],{"class":53},[43,1129,1130],{"class":60},"0.15",[43,1132,104],{"class":53},[43,1134,1135,1138,1140,1142],{"class":45,"line":499},[43,1136,1137],{"class":60},"  opacity",[43,1139,64],{"class":53},[43,1141,67],{"class":60},[43,1143,125],{"class":53},[43,1145,1146,1148,1151,1153,1155,1157],{"class":45,"line":536},[43,1147,110],{"class":60},[43,1149,1150],{"class":53},": opacity ",[43,1152,116],{"class":60},[43,1154,119],{"class":73},[43,1156,122],{"class":60},[43,1158,125],{"class":53},[43,1160,1161,1164,1166,1168],{"class":45,"line":551},[43,1162,1163],{"class":60},"  z-index",[43,1165,64],{"class":53},[43,1167,474],{"class":60},[43,1169,125],{"class":53},[43,1171,1172],{"class":45,"line":566},[43,1173,131],{"class":53},[43,1175,1176],{"class":45,"line":794},[43,1177,138],{"emptyLinePlaceholder":137},[43,1179,1180,1182],{"class":45,"line":831},[43,1181,144],{"class":49},[43,1183,54],{"class":53},[43,1185,1186,1188,1190,1192,1194,1197,1199],{"class":45,"line":846},[43,1187,343],{"class":60},[43,1189,64],{"class":53},[43,1191,256],{"class":60},[43,1193,85],{"class":53},[43,1195,1196],{"class":60},"-2",[43,1198,74],{"class":73},[43,1200,104],{"class":53},[43,1202,1203],{"class":45,"line":851},[43,1204,131],{"class":53},[43,1206,1207],{"class":45,"line":856},[43,1208,138],{"emptyLinePlaceholder":137},[43,1210,1211,1214],{"class":45,"line":864},[43,1212,1213],{"class":49},".card:hover::after",[43,1215,54],{"class":53},[43,1217,1218,1220,1222,1225],{"class":45,"line":871},[43,1219,1137],{"class":60},[43,1221,64],{"class":53},[43,1223,1224],{"class":60},"1",[43,1226,125],{"class":53},[43,1228,1229],{"class":45,"line":904},[43,1230,131],{"class":53},[15,1232,1233],{},"This technique is significantly smoother on low-powered devices.",[196,1235,1237,1238,1241],{"id":1236},"solution-2-css-starting-style-2026","Solution 2: CSS ",[22,1239,1240],{},"@starting-style"," (2026)",[15,1243,1244,1245,1247],{},"Modern browsers support ",[22,1246,1240],{}," for entry animations, allowing you to animate from a shadow state without the \"flash of no shadow\" problem:",[34,1249,1251],{"className":36,"code":1250,"language":38,"meta":39,"style":39},".card {\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);\n  transition: box-shadow 0.3s ease;\n}\n\n@starting-style {\n  .card {\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n  }\n}\n",[22,1252,1253,1259,1295,1309,1313,1317,1323,1330,1367,1372],{"__ignoreMap":39},[43,1254,1255,1257],{"class":45,"line":46},[43,1256,50],{"class":49},[43,1258,54],{"class":53},[43,1260,1261,1263,1265,1267,1269,1271,1273,1275,1277,1279,1281,1283,1285,1287,1289,1291,1293],{"class":45,"line":57},[43,1262,61],{"class":60},[43,1264,64],{"class":53},[43,1266,67],{"class":60},[43,1268,158],{"class":60},[43,1270,74],{"class":73},[43,1272,163],{"class":60},[43,1274,74],{"class":73},[43,1276,82],{"class":60},[43,1278,85],{"class":53},[43,1280,67],{"class":60},[43,1282,90],{"class":53},[43,1284,67],{"class":60},[43,1286,90],{"class":53},[43,1288,67],{"class":60},[43,1290,90],{"class":53},[43,1292,1130],{"class":60},[43,1294,104],{"class":53},[43,1296,1297,1299,1301,1303,1305,1307],{"class":45,"line":107},[43,1298,110],{"class":60},[43,1300,113],{"class":53},[43,1302,116],{"class":60},[43,1304,119],{"class":73},[43,1306,122],{"class":60},[43,1308,125],{"class":53},[43,1310,1311],{"class":45,"line":128},[43,1312,131],{"class":53},[43,1314,1315],{"class":45,"line":134},[43,1316,138],{"emptyLinePlaceholder":137},[43,1318,1319,1321],{"class":45,"line":141},[43,1320,1240],{"class":73},[43,1322,54],{"class":53},[43,1324,1325,1328],{"class":45,"line":149},[43,1326,1327],{"class":49},"  .card",[43,1329,54],{"class":53},[43,1331,1332,1335,1337,1339,1341,1343,1345,1347,1349,1351,1353,1355,1357,1359,1361,1363,1365],{"class":45,"line":189},[43,1333,1334],{"class":60},"    box-shadow",[43,1336,64],{"class":53},[43,1338,67],{"class":60},[43,1340,70],{"class":60},[43,1342,74],{"class":73},[43,1344,77],{"class":60},[43,1346,74],{"class":73},[43,1348,82],{"class":60},[43,1350,85],{"class":53},[43,1352,67],{"class":60},[43,1354,90],{"class":53},[43,1356,67],{"class":60},[43,1358,90],{"class":53},[43,1360,67],{"class":60},[43,1362,90],{"class":53},[43,1364,101],{"class":60},[43,1366,104],{"class":53},[43,1368,1369],{"class":45,"line":463},[43,1370,1371],{"class":53},"  }\n",[43,1373,1374],{"class":45,"line":481},[43,1375,131],{"class":53},[10,1377,1379],{"id":1378},"keyframe-animations","Keyframe Animations",[15,1381,1382,1383,1386],{},"For cyclic or multi-step shadow animations, use ",[22,1384,1385],{},"@keyframes",":",[34,1388,1390],{"className":36,"code":1389,"language":38,"meta":39,"style":39},"@keyframes pulse-shadow {\n  0%, 100% {\n    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.10);\n  }\n  50% {\n    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);\n  }\n}\n\n.notification {\n  animation: pulse-shadow 2s ease-in-out infinite;\n}\n",[22,1391,1392,1402,1414,1453,1457,1464,1501,1505,1509,1513,1520,1541],{"__ignoreMap":39},[43,1393,1394,1396,1400],{"class":45,"line":46},[43,1395,1385],{"class":73},[43,1397,1399],{"class":1398},"s4XuR"," pulse-shadow",[43,1401,54],{"class":53},[43,1403,1404,1407,1409,1412],{"class":45,"line":57},[43,1405,1406],{"class":49},"  0%",[43,1408,90],{"class":53},[43,1410,1411],{"class":49},"100%",[43,1413,54],{"class":53},[43,1415,1416,1418,1420,1422,1424,1426,1428,1430,1432,1434,1437,1439,1442,1444,1447,1449,1451],{"class":45,"line":107},[43,1417,1334],{"class":60},[43,1419,64],{"class":53},[43,1421,67],{"class":60},[43,1423,70],{"class":60},[43,1425,74],{"class":73},[43,1427,77],{"class":60},[43,1429,74],{"class":73},[43,1431,82],{"class":60},[43,1433,85],{"class":53},[43,1435,1436],{"class":60},"59",[43,1438,90],{"class":53},[43,1440,1441],{"class":60},"130",[43,1443,90],{"class":53},[43,1445,1446],{"class":60},"246",[43,1448,90],{"class":53},[43,1450,427],{"class":60},[43,1452,104],{"class":53},[43,1454,1455],{"class":45,"line":128},[43,1456,1371],{"class":53},[43,1458,1459,1462],{"class":45,"line":134},[43,1460,1461],{"class":49},"  50%",[43,1463,54],{"class":53},[43,1465,1466,1468,1470,1472,1474,1476,1478,1480,1482,1484,1486,1488,1490,1492,1494,1496,1499],{"class":45,"line":141},[43,1467,1334],{"class":60},[43,1469,64],{"class":53},[43,1471,67],{"class":60},[43,1473,77],{"class":60},[43,1475,74],{"class":73},[43,1477,438],{"class":60},[43,1479,74],{"class":73},[43,1481,82],{"class":60},[43,1483,85],{"class":53},[43,1485,1436],{"class":60},[43,1487,90],{"class":53},[43,1489,1441],{"class":60},[43,1491,90],{"class":53},[43,1493,1446],{"class":60},[43,1495,90],{"class":53},[43,1497,1498],{"class":60},"0.25",[43,1500,104],{"class":53},[43,1502,1503],{"class":45,"line":149},[43,1504,1371],{"class":53},[43,1506,1507],{"class":45,"line":189},[43,1508,131],{"class":53},[43,1510,1511],{"class":45,"line":463},[43,1512,138],{"emptyLinePlaceholder":137},[43,1514,1515,1518],{"class":45,"line":481},[43,1516,1517],{"class":49},".notification",[43,1519,54],{"class":53},[43,1521,1522,1525,1528,1531,1533,1536,1539],{"class":45,"line":486},[43,1523,1524],{"class":60},"  animation",[43,1526,1527],{"class":53},": pulse-shadow ",[43,1529,1530],{"class":60},"2",[43,1532,119],{"class":73},[43,1534,1535],{"class":60}," ease-in-out",[43,1537,1538],{"class":60}," infinite",[43,1540,125],{"class":53},[43,1542,1543],{"class":45,"line":491},[43,1544,131],{"class":53},[15,1546,1547],{},"Use this sparingly — pulsing shadows draw attention but become distracting if overused.",[10,1549,1551],{"id":1550},"dark-mode-shadow-animations","Dark Mode Shadow Animations",[15,1553,1554],{},"In dark mode, animated shadows can expose color shifts as opacity changes. Use consistent shadow coloring within each mode:",[34,1556,1558],{"className":36,"code":1557,"language":38,"meta":39,"style":39},".card {\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n  transition: box-shadow 0.3s ease;\n}\n\n@media (prefers-color-scheme: dark) {\n  .card {\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.30);\n  }\n}\n",[22,1559,1560,1566,1602,1616,1620,1624,1632,1638,1675,1679],{"__ignoreMap":39},[43,1561,1562,1564],{"class":45,"line":46},[43,1563,50],{"class":49},[43,1565,54],{"class":53},[43,1567,1568,1570,1572,1574,1576,1578,1580,1582,1584,1586,1588,1590,1592,1594,1596,1598,1600],{"class":45,"line":57},[43,1569,61],{"class":60},[43,1571,64],{"class":53},[43,1573,67],{"class":60},[43,1575,70],{"class":60},[43,1577,74],{"class":73},[43,1579,77],{"class":60},[43,1581,74],{"class":73},[43,1583,82],{"class":60},[43,1585,85],{"class":53},[43,1587,67],{"class":60},[43,1589,90],{"class":53},[43,1591,67],{"class":60},[43,1593,90],{"class":53},[43,1595,67],{"class":60},[43,1597,90],{"class":53},[43,1599,1130],{"class":60},[43,1601,104],{"class":53},[43,1603,1604,1606,1608,1610,1612,1614],{"class":45,"line":107},[43,1605,110],{"class":60},[43,1607,113],{"class":53},[43,1609,116],{"class":60},[43,1611,119],{"class":73},[43,1613,122],{"class":60},[43,1615,125],{"class":53},[43,1617,1618],{"class":45,"line":128},[43,1619,131],{"class":53},[43,1621,1622],{"class":45,"line":134},[43,1623,138],{"emptyLinePlaceholder":137},[43,1625,1626,1629],{"class":45,"line":141},[43,1627,1628],{"class":73},"@media",[43,1630,1631],{"class":53}," (prefers-color-scheme: dark) {\n",[43,1633,1634,1636],{"class":45,"line":149},[43,1635,1327],{"class":49},[43,1637,54],{"class":53},[43,1639,1640,1642,1644,1646,1648,1650,1652,1654,1656,1658,1660,1662,1664,1666,1668,1670,1673],{"class":45,"line":189},[43,1641,1334],{"class":60},[43,1643,64],{"class":53},[43,1645,67],{"class":60},[43,1647,70],{"class":60},[43,1649,74],{"class":73},[43,1651,77],{"class":60},[43,1653,74],{"class":73},[43,1655,82],{"class":60},[43,1657,85],{"class":53},[43,1659,67],{"class":60},[43,1661,90],{"class":53},[43,1663,67],{"class":60},[43,1665,90],{"class":53},[43,1667,67],{"class":60},[43,1669,90],{"class":53},[43,1671,1672],{"class":60},"0.30",[43,1674,104],{"class":53},[43,1676,1677],{"class":45,"line":463},[43,1678,1371],{"class":53},[43,1680,1681],{"class":45,"line":481},[43,1682,131],{"class":53},[10,1684,1686],{"id":1685},"key-takeaways","Key Takeaways",[1688,1689,1690,1700,1703,1706,1709,1715],"ul",{},[1691,1692,1693,1694,1696,1697,1699],"li",{},"Combine ",[22,1695,24],{}," transitions with ",[22,1698,256],{}," for convincing lift effects",[1691,1701,1702],{},"Always match layer counts between shadow states for smooth interpolation",[1691,1704,1705],{},"Use pseudo-element opacity for performance-critical shadow animations",[1691,1707,1708],{},"Keep durations between 100–300ms for perceived responsiveness",[1691,1710,1711,1712,1714],{},"Animate ",[22,1713,574],{}," state with fast transitions (50ms) for press feedback",[1691,1716,1717],{},"Use keyframe animations for attention-drawing pulses — but sparingly",[10,1719,1721],{"id":1720},"try-it-yourself","Try It Yourself",[15,1723,1724,1725,1730],{},"Build and animate box shadows visually with our ",[1726,1727,1729],"a",{"href":1728},"\u002Ftools\u002Fcss-box-shadow","CSS Box Shadow Generator",". Adjust shadows interactively, preview hover transitions, and copy production-ready CSS.",[10,1732,1734],{"id":1733},"related-guides","Related Guides",[1688,1736,1737,1744],{},[1691,1738,1739,1743],{},[1726,1740,1742],{"href":1741},"\u002Fguides\u002Fcss-box-shadow-guide","CSS Box Shadow Guide"," — complete syntax and parameter reference",[1691,1745,1746,1750],{},[1726,1747,1749],{"href":1748},"\u002Fguides\u002Flayered-box-shadows-depth","Layered Box Shadows for Depth"," — creating realistic elevation with multiple shadow layers",[1752,1753,1754],"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 .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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":39,"searchDepth":57,"depth":57,"links":1756},[1757,1758,1761,1762,1763,1768,1769,1770,1771,1772],{"id":12,"depth":57,"text":13},{"id":28,"depth":57,"text":29,"children":1759},[1760],{"id":198,"depth":107,"text":199},{"id":249,"depth":57,"text":250},{"id":578,"depth":57,"text":579},{"id":942,"depth":57,"text":943,"children":1764},[1765,1766],{"id":951,"depth":107,"text":952},{"id":1236,"depth":107,"text":1767},"Solution 2: CSS @starting-style (2026)",{"id":1378,"depth":57,"text":1379},{"id":1550,"depth":57,"text":1551},{"id":1685,"depth":57,"text":1686},{"id":1720,"depth":57,"text":1721},{"id":1733,"depth":57,"text":1734},"2026-05-28","Master CSS box-shadow animations for elevation changes, hover states, and interactive feedback. Learn performance-friendly transition and keyframe methods.","md",{"keywords":1777,"immutable":137},[1778,1779],"css-box-shadow","box-shadow-animation-techniques","\u002Fguides\u002Fbox-shadow-animation-techniques",{"title":5,"description":1774},"guides\u002Fbox-shadow-animation-techniques","HCca1njebKPlkQsRUMpC4ahneH1P_AOPaouZDOkrPZg",1780401331882]