[{"data":1,"prerenderedAt":1471},["ShallowReactive",2],{"guide-layered-box-shadows-depth":3},{"id":4,"title":5,"body":6,"date":1460,"description":1461,"extension":1462,"meta":1463,"navigation":116,"path":1467,"readingTime":120,"seo":1468,"stem":1469,"__hash__":1470},"guides\u002Fguides\u002Flayered-box-shadows-depth.md","Layered Box Shadows for Depth: Creating Realistic Elevation in CSS",{"type":7,"value":8,"toc":1445},"minimark",[9,14,23,26,251,254,267,271,274,290,293,301,305,308,313,402,406,527,531,683,687,807,811,814,1064,1067,1156,1160,1163,1173,1384,1388,1408,1412,1421,1425,1441],[10,11,13],"h2",{"id":12},"single-shadows-vs-layered-shadows","Single Shadows vs. Layered Shadows",[15,16,17,18,22],"p",{},"A single ",[19,20,21],"code",{},"box-shadow"," creates a uniform dark region behind an element. It works, but it looks artificial because real shadows are not uniform — they transition sharply near the object and soften as they spread outward.",[15,24,25],{},"Layered shadows approximate this physical behavior by stacking multiple shadow declarations with increasing blur and offset values.",[27,28,33],"pre",{"className":29,"code":30,"language":31,"meta":32,"style":32},"language-css shiki shiki-themes github-light github-dark","\u002F* Single shadow — flat and artificial *\u002F\n.card {\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n\u002F* Layered shadows — natural depth *\u002F\n.card {\n  box-shadow:\n    0 1px 2px rgba(0, 0, 0, 0.07),\n    0 4px 8px rgba(0, 0, 0, 0.07),\n    0 16px 32px rgba(0, 0, 0, 0.07);\n}\n","css","",[19,34,35,44,55,105,111,118,124,131,139,177,211,246],{"__ignoreMap":32},[36,37,40],"span",{"class":38,"line":39},"line",1,[36,41,43],{"class":42},"sJ8bj","\u002F* Single shadow — flat and artificial *\u002F\n",[36,45,47,51],{"class":38,"line":46},2,[36,48,50],{"class":49},"sScJk",".card",[36,52,54],{"class":53},"sVt8B"," {\n",[36,56,58,62,65,68,71,75,78,80,83,86,88,91,93,95,97,99,102],{"class":38,"line":57},3,[36,59,61],{"class":60},"sj4cs","  box-shadow",[36,63,64],{"class":53},": ",[36,66,67],{"class":60},"0",[36,69,70],{"class":60}," 4",[36,72,74],{"class":73},"szBVR","px",[36,76,77],{"class":60}," 12",[36,79,74],{"class":73},[36,81,82],{"class":60}," rgba",[36,84,85],{"class":53},"(",[36,87,67],{"class":60},[36,89,90],{"class":53},", ",[36,92,67],{"class":60},[36,94,90],{"class":53},[36,96,67],{"class":60},[36,98,90],{"class":53},[36,100,101],{"class":60},"0.15",[36,103,104],{"class":53},");\n",[36,106,108],{"class":38,"line":107},4,[36,109,110],{"class":53},"}\n",[36,112,114],{"class":38,"line":113},5,[36,115,117],{"emptyLinePlaceholder":116},true,"\n",[36,119,121],{"class":38,"line":120},6,[36,122,123],{"class":42},"\u002F* Layered shadows — natural depth *\u002F\n",[36,125,127,129],{"class":38,"line":126},7,[36,128,50],{"class":49},[36,130,54],{"class":53},[36,132,134,136],{"class":38,"line":133},8,[36,135,61],{"class":60},[36,137,138],{"class":53},":\n",[36,140,142,145,148,150,153,155,157,159,161,163,165,167,169,171,174],{"class":38,"line":141},9,[36,143,144],{"class":60},"    0",[36,146,147],{"class":60}," 1",[36,149,74],{"class":73},[36,151,152],{"class":60}," 2",[36,154,74],{"class":73},[36,156,82],{"class":60},[36,158,85],{"class":53},[36,160,67],{"class":60},[36,162,90],{"class":53},[36,164,67],{"class":60},[36,166,90],{"class":53},[36,168,67],{"class":60},[36,170,90],{"class":53},[36,172,173],{"class":60},"0.07",[36,175,176],{"class":53},"),\n",[36,178,180,182,184,186,189,191,193,195,197,199,201,203,205,207,209],{"class":38,"line":179},10,[36,181,144],{"class":60},[36,183,70],{"class":60},[36,185,74],{"class":73},[36,187,188],{"class":60}," 8",[36,190,74],{"class":73},[36,192,82],{"class":60},[36,194,85],{"class":53},[36,196,67],{"class":60},[36,198,90],{"class":53},[36,200,67],{"class":60},[36,202,90],{"class":53},[36,204,67],{"class":60},[36,206,90],{"class":53},[36,208,173],{"class":60},[36,210,176],{"class":53},[36,212,214,216,219,221,224,226,228,230,232,234,236,238,240,242,244],{"class":38,"line":213},11,[36,215,144],{"class":60},[36,217,218],{"class":60}," 16",[36,220,74],{"class":73},[36,222,223],{"class":60}," 32",[36,225,74],{"class":73},[36,227,82],{"class":60},[36,229,85],{"class":53},[36,231,67],{"class":60},[36,233,90],{"class":53},[36,235,67],{"class":60},[36,237,90],{"class":53},[36,239,67],{"class":60},[36,241,90],{"class":53},[36,243,173],{"class":60},[36,245,104],{"class":53},[36,247,249],{"class":38,"line":248},12,[36,250,110],{"class":53},[15,252,253],{},"Notice three things about the layered version:",[255,256,257,261,264],"ol",{},[258,259,260],"li",{},"Each layer uses the same low opacity — the darkness accumulates naturally",[258,262,263],{},"Each successive layer has larger offset and blur values",[258,265,266],{},"The result looks softer and more dimensional than a single shadow",[10,268,270],{"id":269},"the-physics-of-shadows","The Physics of Shadows",[15,272,273],{},"In the real world, a light source casts two shadow components:",[275,276,277,284],"ul",{},[258,278,279,283],{},[280,281,282],"strong",{},"Umbra",": The darkest area, close to the object, where light is fully blocked",[258,285,286,289],{},[280,287,288],{},"Penumbra",": The softer outer area where light is partly blocked",[15,291,292],{},"Layered shadows simulate this by using a tight, darker shadow for the umbra and progressively softer shadows for the penumbra.",[27,294,299],{"className":295,"code":297,"language":298},[296],"language-text","Object\n  │\n  ├─ Umbra (sharp, close)\n  │    └─ Shadow #1: 0 1px 2px rgba(0,0,0,0.10)\n  │\n  ├─ Penumbra (soft, medium)\n  │    └─ Shadow #2: 0 4px 8px rgba(0,0,0,0.07)\n  │\n  └─ Penumbra (very soft, far)\n       └─ Shadow #3: 0 16px 32px rgba(0,0,0,0.05)\n","text",[19,300,297],{"__ignoreMap":32},[10,302,304],{"id":303},"shadow-recipes-by-elevation-level","Shadow Recipes by Elevation Level",[15,306,307],{},"Design systems like Material Design define elevation levels with specific shadow values. Here is a practical set:",[309,310,312],"h3",{"id":311},"level-1-subtle-lift-buttons-chips","Level 1 — Subtle Lift (buttons, chips)",[27,314,316],{"className":29,"code":315,"language":31,"meta":32,"style":32},".elevation-1 {\n  box-shadow:\n    0 1px 2px rgba(0, 0, 0, 0.05),\n    0 1px 3px rgba(0, 0, 0, 0.10);\n}\n",[19,317,318,325,331,364,398],{"__ignoreMap":32},[36,319,320,323],{"class":38,"line":39},[36,321,322],{"class":49},".elevation-1",[36,324,54],{"class":53},[36,326,327,329],{"class":38,"line":46},[36,328,61],{"class":60},[36,330,138],{"class":53},[36,332,333,335,337,339,341,343,345,347,349,351,353,355,357,359,362],{"class":38,"line":57},[36,334,144],{"class":60},[36,336,147],{"class":60},[36,338,74],{"class":73},[36,340,152],{"class":60},[36,342,74],{"class":73},[36,344,82],{"class":60},[36,346,85],{"class":53},[36,348,67],{"class":60},[36,350,90],{"class":53},[36,352,67],{"class":60},[36,354,90],{"class":53},[36,356,67],{"class":60},[36,358,90],{"class":53},[36,360,361],{"class":60},"0.05",[36,363,176],{"class":53},[36,365,366,368,370,372,375,377,379,381,383,385,387,389,391,393,396],{"class":38,"line":107},[36,367,144],{"class":60},[36,369,147],{"class":60},[36,371,74],{"class":73},[36,373,374],{"class":60}," 3",[36,376,74],{"class":73},[36,378,82],{"class":60},[36,380,85],{"class":53},[36,382,67],{"class":60},[36,384,90],{"class":53},[36,386,67],{"class":60},[36,388,90],{"class":53},[36,390,67],{"class":60},[36,392,90],{"class":53},[36,394,395],{"class":60},"0.10",[36,397,104],{"class":53},[36,399,400],{"class":38,"line":113},[36,401,110],{"class":53},[309,403,405],{"id":404},"level-2-card-cards-dialogs","Level 2 — Card (cards, dialogs)",[27,407,409],{"className":29,"code":408,"language":31,"meta":32,"style":32},".elevation-2 {\n  box-shadow:\n    0 1px 2px rgba(0, 0, 0, 0.05),\n    0 4px 6px rgba(0, 0, 0, 0.07),\n    0 10px 15px rgba(0, 0, 0, 0.10);\n}\n",[19,410,411,418,424,456,489,523],{"__ignoreMap":32},[36,412,413,416],{"class":38,"line":39},[36,414,415],{"class":49},".elevation-2",[36,417,54],{"class":53},[36,419,420,422],{"class":38,"line":46},[36,421,61],{"class":60},[36,423,138],{"class":53},[36,425,426,428,430,432,434,436,438,440,442,444,446,448,450,452,454],{"class":38,"line":57},[36,427,144],{"class":60},[36,429,147],{"class":60},[36,431,74],{"class":73},[36,433,152],{"class":60},[36,435,74],{"class":73},[36,437,82],{"class":60},[36,439,85],{"class":53},[36,441,67],{"class":60},[36,443,90],{"class":53},[36,445,67],{"class":60},[36,447,90],{"class":53},[36,449,67],{"class":60},[36,451,90],{"class":53},[36,453,361],{"class":60},[36,455,176],{"class":53},[36,457,458,460,462,464,467,469,471,473,475,477,479,481,483,485,487],{"class":38,"line":107},[36,459,144],{"class":60},[36,461,70],{"class":60},[36,463,74],{"class":73},[36,465,466],{"class":60}," 6",[36,468,74],{"class":73},[36,470,82],{"class":60},[36,472,85],{"class":53},[36,474,67],{"class":60},[36,476,90],{"class":53},[36,478,67],{"class":60},[36,480,90],{"class":53},[36,482,67],{"class":60},[36,484,90],{"class":53},[36,486,173],{"class":60},[36,488,176],{"class":53},[36,490,491,493,496,498,501,503,505,507,509,511,513,515,517,519,521],{"class":38,"line":113},[36,492,144],{"class":60},[36,494,495],{"class":60}," 10",[36,497,74],{"class":73},[36,499,500],{"class":60}," 15",[36,502,74],{"class":73},[36,504,82],{"class":60},[36,506,85],{"class":53},[36,508,67],{"class":60},[36,510,90],{"class":53},[36,512,67],{"class":60},[36,514,90],{"class":53},[36,516,67],{"class":60},[36,518,90],{"class":53},[36,520,395],{"class":60},[36,522,104],{"class":53},[36,524,525],{"class":38,"line":120},[36,526,110],{"class":53},[309,528,530],{"id":529},"level-3-floating-dropdown-menus-popovers","Level 3 — Floating (dropdown menus, popovers)",[27,532,534],{"className":29,"code":533,"language":31,"meta":32,"style":32},".elevation-3 {\n  box-shadow:\n    0 1px 2px rgba(0, 0, 0, 0.05),\n    0 4px 6px rgba(0, 0, 0, 0.05),\n    0 10px 15px rgba(0, 0, 0, 0.07),\n    0 20px 25px rgba(0, 0, 0, 0.10);\n}\n",[19,535,536,543,549,581,613,645,679],{"__ignoreMap":32},[36,537,538,541],{"class":38,"line":39},[36,539,540],{"class":49},".elevation-3",[36,542,54],{"class":53},[36,544,545,547],{"class":38,"line":46},[36,546,61],{"class":60},[36,548,138],{"class":53},[36,550,551,553,555,557,559,561,563,565,567,569,571,573,575,577,579],{"class":38,"line":57},[36,552,144],{"class":60},[36,554,147],{"class":60},[36,556,74],{"class":73},[36,558,152],{"class":60},[36,560,74],{"class":73},[36,562,82],{"class":60},[36,564,85],{"class":53},[36,566,67],{"class":60},[36,568,90],{"class":53},[36,570,67],{"class":60},[36,572,90],{"class":53},[36,574,67],{"class":60},[36,576,90],{"class":53},[36,578,361],{"class":60},[36,580,176],{"class":53},[36,582,583,585,587,589,591,593,595,597,599,601,603,605,607,609,611],{"class":38,"line":107},[36,584,144],{"class":60},[36,586,70],{"class":60},[36,588,74],{"class":73},[36,590,466],{"class":60},[36,592,74],{"class":73},[36,594,82],{"class":60},[36,596,85],{"class":53},[36,598,67],{"class":60},[36,600,90],{"class":53},[36,602,67],{"class":60},[36,604,90],{"class":53},[36,606,67],{"class":60},[36,608,90],{"class":53},[36,610,361],{"class":60},[36,612,176],{"class":53},[36,614,615,617,619,621,623,625,627,629,631,633,635,637,639,641,643],{"class":38,"line":113},[36,616,144],{"class":60},[36,618,495],{"class":60},[36,620,74],{"class":73},[36,622,500],{"class":60},[36,624,74],{"class":73},[36,626,82],{"class":60},[36,628,85],{"class":53},[36,630,67],{"class":60},[36,632,90],{"class":53},[36,634,67],{"class":60},[36,636,90],{"class":53},[36,638,67],{"class":60},[36,640,90],{"class":53},[36,642,173],{"class":60},[36,644,176],{"class":53},[36,646,647,649,652,654,657,659,661,663,665,667,669,671,673,675,677],{"class":38,"line":120},[36,648,144],{"class":60},[36,650,651],{"class":60}," 20",[36,653,74],{"class":73},[36,655,656],{"class":60}," 25",[36,658,74],{"class":73},[36,660,82],{"class":60},[36,662,85],{"class":53},[36,664,67],{"class":60},[36,666,90],{"class":53},[36,668,67],{"class":60},[36,670,90],{"class":53},[36,672,67],{"class":60},[36,674,90],{"class":53},[36,676,395],{"class":60},[36,678,104],{"class":53},[36,680,681],{"class":38,"line":126},[36,682,110],{"class":53},[309,684,686],{"id":685},"level-4-modal-modals-overlays","Level 4 — Modal (modals, overlays)",[27,688,690],{"className":29,"code":689,"language":31,"meta":32,"style":32},".elevation-4 {\n  box-shadow:\n    0 2px 4px rgba(0, 0, 0, 0.05),\n    0 8px 16px rgba(0, 0, 0, 0.05),\n    0 24px 48px rgba(0, 0, 0, 0.10);\n}\n",[19,691,692,699,705,737,769,803],{"__ignoreMap":32},[36,693,694,697],{"class":38,"line":39},[36,695,696],{"class":49},".elevation-4",[36,698,54],{"class":53},[36,700,701,703],{"class":38,"line":46},[36,702,61],{"class":60},[36,704,138],{"class":53},[36,706,707,709,711,713,715,717,719,721,723,725,727,729,731,733,735],{"class":38,"line":57},[36,708,144],{"class":60},[36,710,152],{"class":60},[36,712,74],{"class":73},[36,714,70],{"class":60},[36,716,74],{"class":73},[36,718,82],{"class":60},[36,720,85],{"class":53},[36,722,67],{"class":60},[36,724,90],{"class":53},[36,726,67],{"class":60},[36,728,90],{"class":53},[36,730,67],{"class":60},[36,732,90],{"class":53},[36,734,361],{"class":60},[36,736,176],{"class":53},[36,738,739,741,743,745,747,749,751,753,755,757,759,761,763,765,767],{"class":38,"line":107},[36,740,144],{"class":60},[36,742,188],{"class":60},[36,744,74],{"class":73},[36,746,218],{"class":60},[36,748,74],{"class":73},[36,750,82],{"class":60},[36,752,85],{"class":53},[36,754,67],{"class":60},[36,756,90],{"class":53},[36,758,67],{"class":60},[36,760,90],{"class":53},[36,762,67],{"class":60},[36,764,90],{"class":53},[36,766,361],{"class":60},[36,768,176],{"class":53},[36,770,771,773,776,778,781,783,785,787,789,791,793,795,797,799,801],{"class":38,"line":113},[36,772,144],{"class":60},[36,774,775],{"class":60}," 24",[36,777,74],{"class":73},[36,779,780],{"class":60}," 48",[36,782,74],{"class":73},[36,784,82],{"class":60},[36,786,85],{"class":53},[36,788,67],{"class":60},[36,790,90],{"class":53},[36,792,67],{"class":60},[36,794,90],{"class":53},[36,796,67],{"class":60},[36,798,90],{"class":53},[36,800,395],{"class":60},[36,802,104],{"class":53},[36,804,805],{"class":38,"line":120},[36,806,110],{"class":53},[10,808,810],{"id":809},"dark-mode-shadows","Dark Mode Shadows",[15,812,813],{},"On dark backgrounds, pure-black shadows look harsh and create visible halo effects. Use a tinted shadow color instead — a dark version of your background color works well:",[27,815,817],{"className":29,"code":816,"language":31,"meta":32,"style":32},"\u002F* Light mode *\u002F\n.card-light {\n  box-shadow:\n    0 1px 2px rgba(0, 0, 0, 0.07),\n    0 4px 8px rgba(0, 0, 0, 0.07),\n    0 16px 32px rgba(0, 0, 0, 0.07);\n}\n\n\u002F* Dark mode — use the background color as shadow base *\u002F\n.card-dark {\n  box-shadow:\n    0 1px 2px rgba(0, 0, 0, 0.30),\n    0 4px 8px rgba(0, 0, 0, 0.20),\n    0 16px 32px rgba(0, 0, 0, 0.15);\n}\n",[19,818,819,824,831,837,869,901,933,937,941,946,953,959,992,1026,1059],{"__ignoreMap":32},[36,820,821],{"class":38,"line":39},[36,822,823],{"class":42},"\u002F* Light mode *\u002F\n",[36,825,826,829],{"class":38,"line":46},[36,827,828],{"class":49},".card-light",[36,830,54],{"class":53},[36,832,833,835],{"class":38,"line":57},[36,834,61],{"class":60},[36,836,138],{"class":53},[36,838,839,841,843,845,847,849,851,853,855,857,859,861,863,865,867],{"class":38,"line":107},[36,840,144],{"class":60},[36,842,147],{"class":60},[36,844,74],{"class":73},[36,846,152],{"class":60},[36,848,74],{"class":73},[36,850,82],{"class":60},[36,852,85],{"class":53},[36,854,67],{"class":60},[36,856,90],{"class":53},[36,858,67],{"class":60},[36,860,90],{"class":53},[36,862,67],{"class":60},[36,864,90],{"class":53},[36,866,173],{"class":60},[36,868,176],{"class":53},[36,870,871,873,875,877,879,881,883,885,887,889,891,893,895,897,899],{"class":38,"line":113},[36,872,144],{"class":60},[36,874,70],{"class":60},[36,876,74],{"class":73},[36,878,188],{"class":60},[36,880,74],{"class":73},[36,882,82],{"class":60},[36,884,85],{"class":53},[36,886,67],{"class":60},[36,888,90],{"class":53},[36,890,67],{"class":60},[36,892,90],{"class":53},[36,894,67],{"class":60},[36,896,90],{"class":53},[36,898,173],{"class":60},[36,900,176],{"class":53},[36,902,903,905,907,909,911,913,915,917,919,921,923,925,927,929,931],{"class":38,"line":120},[36,904,144],{"class":60},[36,906,218],{"class":60},[36,908,74],{"class":73},[36,910,223],{"class":60},[36,912,74],{"class":73},[36,914,82],{"class":60},[36,916,85],{"class":53},[36,918,67],{"class":60},[36,920,90],{"class":53},[36,922,67],{"class":60},[36,924,90],{"class":53},[36,926,67],{"class":60},[36,928,90],{"class":53},[36,930,173],{"class":60},[36,932,104],{"class":53},[36,934,935],{"class":38,"line":126},[36,936,110],{"class":53},[36,938,939],{"class":38,"line":133},[36,940,117],{"emptyLinePlaceholder":116},[36,942,943],{"class":38,"line":141},[36,944,945],{"class":42},"\u002F* Dark mode — use the background color as shadow base *\u002F\n",[36,947,948,951],{"class":38,"line":179},[36,949,950],{"class":49},".card-dark",[36,952,54],{"class":53},[36,954,955,957],{"class":38,"line":213},[36,956,61],{"class":60},[36,958,138],{"class":53},[36,960,961,963,965,967,969,971,973,975,977,979,981,983,985,987,990],{"class":38,"line":248},[36,962,144],{"class":60},[36,964,147],{"class":60},[36,966,74],{"class":73},[36,968,152],{"class":60},[36,970,74],{"class":73},[36,972,82],{"class":60},[36,974,85],{"class":53},[36,976,67],{"class":60},[36,978,90],{"class":53},[36,980,67],{"class":60},[36,982,90],{"class":53},[36,984,67],{"class":60},[36,986,90],{"class":53},[36,988,989],{"class":60},"0.30",[36,991,176],{"class":53},[36,993,995,997,999,1001,1003,1005,1007,1009,1011,1013,1015,1017,1019,1021,1024],{"class":38,"line":994},13,[36,996,144],{"class":60},[36,998,70],{"class":60},[36,1000,74],{"class":73},[36,1002,188],{"class":60},[36,1004,74],{"class":73},[36,1006,82],{"class":60},[36,1008,85],{"class":53},[36,1010,67],{"class":60},[36,1012,90],{"class":53},[36,1014,67],{"class":60},[36,1016,90],{"class":53},[36,1018,67],{"class":60},[36,1020,90],{"class":53},[36,1022,1023],{"class":60},"0.20",[36,1025,176],{"class":53},[36,1027,1029,1031,1033,1035,1037,1039,1041,1043,1045,1047,1049,1051,1053,1055,1057],{"class":38,"line":1028},14,[36,1030,144],{"class":60},[36,1032,218],{"class":60},[36,1034,74],{"class":73},[36,1036,223],{"class":60},[36,1038,74],{"class":73},[36,1040,82],{"class":60},[36,1042,85],{"class":53},[36,1044,67],{"class":60},[36,1046,90],{"class":53},[36,1048,67],{"class":60},[36,1050,90],{"class":53},[36,1052,67],{"class":60},[36,1054,90],{"class":53},[36,1056,101],{"class":60},[36,1058,104],{"class":53},[36,1060,1062],{"class":38,"line":1061},15,[36,1063,110],{"class":53},[15,1065,1066],{},"Some teams prefer colored shadows that match the element's brand color at low opacity:",[27,1068,1070],{"className":29,"code":1069,"language":31,"meta":32,"style":32},".brand-shadow {\n  box-shadow:\n    0 4px 6px rgba(59, 130, 246, 0.10),\n    0 12px 24px rgba(59, 130, 246, 0.15);\n}\n",[19,1071,1072,1079,1085,1120,1152],{"__ignoreMap":32},[36,1073,1074,1077],{"class":38,"line":39},[36,1075,1076],{"class":49},".brand-shadow",[36,1078,54],{"class":53},[36,1080,1081,1083],{"class":38,"line":46},[36,1082,61],{"class":60},[36,1084,138],{"class":53},[36,1086,1087,1089,1091,1093,1095,1097,1099,1101,1104,1106,1109,1111,1114,1116,1118],{"class":38,"line":57},[36,1088,144],{"class":60},[36,1090,70],{"class":60},[36,1092,74],{"class":73},[36,1094,466],{"class":60},[36,1096,74],{"class":73},[36,1098,82],{"class":60},[36,1100,85],{"class":53},[36,1102,1103],{"class":60},"59",[36,1105,90],{"class":53},[36,1107,1108],{"class":60},"130",[36,1110,90],{"class":53},[36,1112,1113],{"class":60},"246",[36,1115,90],{"class":53},[36,1117,395],{"class":60},[36,1119,176],{"class":53},[36,1121,1122,1124,1126,1128,1130,1132,1134,1136,1138,1140,1142,1144,1146,1148,1150],{"class":38,"line":107},[36,1123,144],{"class":60},[36,1125,77],{"class":60},[36,1127,74],{"class":73},[36,1129,775],{"class":60},[36,1131,74],{"class":73},[36,1133,82],{"class":60},[36,1135,85],{"class":53},[36,1137,1103],{"class":60},[36,1139,90],{"class":53},[36,1141,1108],{"class":60},[36,1143,90],{"class":53},[36,1145,1113],{"class":60},[36,1147,90],{"class":53},[36,1149,101],{"class":60},[36,1151,104],{"class":53},[36,1153,1154],{"class":38,"line":113},[36,1155,110],{"class":53},[10,1157,1159],{"id":1158},"performance-considerations","Performance Considerations",[15,1161,1162],{},"Layered shadows are rendered by the browser's compositor and are GPU-accelerated in all modern browsers. Three shadow layers have negligible performance impact.",[15,1164,1165,1166,1168,1169,1172],{},"However, animating ",[19,1167,21],{}," triggers repaints on every frame. For smooth elevation transitions, animate ",[19,1170,1171],{},"transform"," instead and use a CSS transition between shadow states:",[27,1174,1176],{"className":29,"code":1175,"language":31,"meta":32,"style":32},".card {\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 4px 8px rgba(0, 0, 0, 0.07);\n  transition: box-shadow 0.3s ease, transform 0.3s ease;\n}\n\n.card:hover {\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.07), 0 16px 32px rgba(0, 0, 0, 0.10);\n  transform: translateY(-2px);\n}\n",[19,1177,1178,1184,1251,1280,1284,1288,1295,1361,1380],{"__ignoreMap":32},[36,1179,1180,1182],{"class":38,"line":39},[36,1181,50],{"class":49},[36,1183,54],{"class":53},[36,1185,1186,1188,1190,1192,1194,1196,1198,1200,1202,1204,1206,1208,1210,1212,1214,1216,1218,1221,1223,1225,1227,1229,1231,1233,1235,1237,1239,1241,1243,1245,1247,1249],{"class":38,"line":46},[36,1187,61],{"class":60},[36,1189,64],{"class":53},[36,1191,67],{"class":60},[36,1193,147],{"class":60},[36,1195,74],{"class":73},[36,1197,152],{"class":60},[36,1199,74],{"class":73},[36,1201,82],{"class":60},[36,1203,85],{"class":53},[36,1205,67],{"class":60},[36,1207,90],{"class":53},[36,1209,67],{"class":60},[36,1211,90],{"class":53},[36,1213,67],{"class":60},[36,1215,90],{"class":53},[36,1217,173],{"class":60},[36,1219,1220],{"class":53},"), ",[36,1222,67],{"class":60},[36,1224,70],{"class":60},[36,1226,74],{"class":73},[36,1228,188],{"class":60},[36,1230,74],{"class":73},[36,1232,82],{"class":60},[36,1234,85],{"class":53},[36,1236,67],{"class":60},[36,1238,90],{"class":53},[36,1240,67],{"class":60},[36,1242,90],{"class":53},[36,1244,67],{"class":60},[36,1246,90],{"class":53},[36,1248,173],{"class":60},[36,1250,104],{"class":53},[36,1252,1253,1256,1259,1262,1265,1268,1271,1273,1275,1277],{"class":38,"line":57},[36,1254,1255],{"class":60},"  transition",[36,1257,1258],{"class":53},": box-shadow ",[36,1260,1261],{"class":60},"0.3",[36,1263,1264],{"class":73},"s",[36,1266,1267],{"class":60}," ease",[36,1269,1270],{"class":53},", transform ",[36,1272,1261],{"class":60},[36,1274,1264],{"class":73},[36,1276,1267],{"class":60},[36,1278,1279],{"class":53},";\n",[36,1281,1282],{"class":38,"line":107},[36,1283,110],{"class":53},[36,1285,1286],{"class":38,"line":113},[36,1287,117],{"emptyLinePlaceholder":116},[36,1289,1290,1293],{"class":38,"line":120},[36,1291,1292],{"class":49},".card:hover",[36,1294,54],{"class":53},[36,1296,1297,1299,1301,1303,1305,1307,1309,1311,1313,1315,1317,1319,1321,1323,1325,1327,1329,1331,1333,1335,1337,1339,1341,1343,1345,1347,1349,1351,1353,1355,1357,1359],{"class":38,"line":126},[36,1298,61],{"class":60},[36,1300,64],{"class":53},[36,1302,67],{"class":60},[36,1304,70],{"class":60},[36,1306,74],{"class":73},[36,1308,188],{"class":60},[36,1310,74],{"class":73},[36,1312,82],{"class":60},[36,1314,85],{"class":53},[36,1316,67],{"class":60},[36,1318,90],{"class":53},[36,1320,67],{"class":60},[36,1322,90],{"class":53},[36,1324,67],{"class":60},[36,1326,90],{"class":53},[36,1328,173],{"class":60},[36,1330,1220],{"class":53},[36,1332,67],{"class":60},[36,1334,218],{"class":60},[36,1336,74],{"class":73},[36,1338,223],{"class":60},[36,1340,74],{"class":73},[36,1342,82],{"class":60},[36,1344,85],{"class":53},[36,1346,67],{"class":60},[36,1348,90],{"class":53},[36,1350,67],{"class":60},[36,1352,90],{"class":53},[36,1354,67],{"class":60},[36,1356,90],{"class":53},[36,1358,395],{"class":60},[36,1360,104],{"class":53},[36,1362,1363,1366,1368,1371,1373,1376,1378],{"class":38,"line":133},[36,1364,1365],{"class":60},"  transform",[36,1367,64],{"class":53},[36,1369,1370],{"class":60},"translateY",[36,1372,85],{"class":53},[36,1374,1375],{"class":60},"-2",[36,1377,74],{"class":73},[36,1379,104],{"class":53},[36,1381,1382],{"class":38,"line":141},[36,1383,110],{"class":53},[10,1385,1387],{"id":1386},"key-takeaways","Key Takeaways",[275,1389,1390,1393,1396,1399,1402,1405],{},[258,1391,1392],{},"Layered box shadows create natural depth by simulating umbra and penumbra",[258,1394,1395],{},"Stack 2–4 shadow layers with increasing offset, blur, and consistent low opacity",[258,1397,1398],{},"Use the same opacity per layer; darkness accumulates naturally",[258,1400,1401],{},"Dark mode requires adjusted shadow colors — avoid pure black halos",[258,1403,1404],{},"Colored shadows add polish when used sparingly",[258,1406,1407],{},"Animate shadows with CSS transitions for smooth hover effects",[10,1409,1411],{"id":1410},"try-it-yourself","Try It Yourself",[15,1413,1414,1415,1420],{},"Design layered box shadows interactively with our ",[1416,1417,1419],"a",{"href":1418},"\u002Ftools\u002Fcss-box-shadow","CSS Box Shadow Generator",". Add multiple shadow layers, adjust offsets and blur, then copy the CSS directly into your project.",[10,1422,1424],{"id":1423},"related-guides","Related Guides",[275,1426,1427,1434],{},[258,1428,1429,1433],{},[1416,1430,1432],{"href":1431},"\u002Fguides\u002Fcss-box-shadow-guide","CSS Box Shadow Guide"," — syntax, parameters, and all shadow types",[258,1435,1436,1440],{},[1416,1437,1439],{"href":1438},"\u002Fguides\u002Fbox-shadow-animation-techniques","Box Shadow Animation Techniques"," — smooth transitions and elevation effects",[1442,1443,1444],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}",{"title":32,"searchDepth":46,"depth":46,"links":1446},[1447,1448,1449,1455,1456,1457,1458,1459],{"id":12,"depth":46,"text":13},{"id":269,"depth":46,"text":270},{"id":303,"depth":46,"text":304,"children":1450},[1451,1452,1453,1454],{"id":311,"depth":57,"text":312},{"id":404,"depth":57,"text":405},{"id":529,"depth":57,"text":530},{"id":685,"depth":57,"text":686},{"id":809,"depth":46,"text":810},{"id":1158,"depth":46,"text":1159},{"id":1386,"depth":46,"text":1387},{"id":1410,"depth":46,"text":1411},{"id":1423,"depth":46,"text":1424},"2026-05-28","Learn how layered box shadows create realistic depth and elevation in CSS. Compare single vs. multiple shadows and get practical shadow recipes.","md",{"keywords":1464,"immutable":116},[1465,1466],"css-box-shadow","layered-box-shadows-depth","\u002Fguides\u002Flayered-box-shadows-depth",{"title":5,"description":1461},"guides\u002Flayered-box-shadows-depth","T51u8-OD2qV5_nlA6jm4NaRfJoj2SMC6GfFUrBVldjs",1780401334877]