[{"data":1,"prerenderedAt":2202},["ShallowReactive",2],{"guide-css-box-shadow-guide":3},{"id":4,"title":5,"body":6,"date":2191,"description":2192,"extension":2193,"meta":2194,"navigation":299,"path":2198,"readingTime":871,"seo":2199,"stem":2200,"__hash__":2201},"guides\u002Fguides\u002Fcss-box-shadow-guide.md","CSS Box Shadow Guide: Creating Depth and Dimension",{"type":7,"value":8,"toc":2172},"minimark",[9,14,23,29,33,63,218,232,236,246,258,263,268,320,324,327,331,395,399,402,502,505,509,512,593,596,944,948,951,1070,1073,1077,1080,1218,1221,1310,1314,1318,1533,1536,1540,1669,1676,1680,1811,1814,1818,1821,1899,1905,2084,2090,2094,2121,2125,2134,2138,2168],[10,11,13],"h2",{"id":12},"what-is-box-shadow","What Is Box Shadow?",[15,16,17,18,22],"p",{},"CSS ",[19,20,21],"code",{},"box-shadow"," draws a shadow around an element's bounding box. It simulates elevation and depth without any image assets — a single declaration replaces the drop-shadow PNGs of an earlier era.",[15,24,25,26,28],{},"Apply ",[19,27,21],{}," to cards, buttons, modals, inputs, tooltips, and any element that needs visual separation from the surface behind it.",[10,30,32],{"id":31},"syntax-breakdown","Syntax Breakdown",[34,35,40],"pre",{"className":36,"code":37,"language":38,"meta":39,"style":39},"language-css shiki shiki-themes github-light github-dark","box-shadow: h-offset v-offset blur spread color inset;\n","css","",[19,41,42],{"__ignoreMap":39},[43,44,47,50,54,57,60],"span",{"class":45,"line":46},"line",1,[43,48,21],{"class":49},"s9eBZ",[43,51,53],{"class":52},"sVt8B",": ",[43,55,56],{"class":49},"h-offset",[43,58,59],{"class":49}," v-offset",[43,61,62],{"class":52}," blur spread color inset;\n",[64,65,66,88],"table",{},[67,68,69],"thead",{},[70,71,72,76,79,82,85],"tr",{},[73,74,75],"th",{},"Value",[73,77,78],{},"Purpose",[73,80,81],{},"Required",[73,83,84],{},"Default",[73,86,87],{},"Example",[89,90,91,113,132,156,178,198],"tbody",{},[70,92,93,98,101,104,107],{},[94,95,96],"td",{},[19,97,56],{},[94,99,100],{},"Horizontal displacement",[94,102,103],{},"Yes",[94,105,106],{},"—",[94,108,109,112],{},[19,110,111],{},"4px"," shifts shadow right",[70,114,115,120,123,125,127],{},[94,116,117],{},[19,118,119],{},"v-offset",[94,121,122],{},"Vertical displacement",[94,124,103],{},[94,126,106],{},[94,128,129,131],{},[19,130,111],{}," shifts shadow down",[70,133,134,139,142,145,150],{},[94,135,136],{},[19,137,138],{},"blur",[94,140,141],{},"Edge softness",[94,143,144],{},"No",[94,146,147],{},[19,148,149],{},"0",[94,151,152,155],{},[19,153,154],{},"12px"," creates a soft edge",[70,157,158,163,166,168,172],{},[94,159,160],{},[19,161,162],{},"spread",[94,164,165],{},"Expand or contract shadow",[94,167,144],{},[94,169,170],{},[19,171,149],{},[94,173,174,177],{},[19,175,176],{},"-2px"," shrinks the shadow",[70,179,180,185,188,190,193],{},[94,181,182],{},[19,183,184],{},"color",[94,186,187],{},"Shadow color",[94,189,144],{},[94,191,192],{},"Browser default",[94,194,195],{},[19,196,197],{},"rgba(0,0,0,0.15)",[70,199,200,205,208,210,213],{},[94,201,202],{},[19,203,204],{},"inset",[94,206,207],{},"Shadow inside the box",[94,209,144],{},[94,211,212],{},"outset",[94,214,215,217],{},[19,216,204],{}," flips direction",[15,219,220,221,223,224,227,228,231],{},"Always specify ",[19,222,184],{}," with an alpha channel. Opaque black shadows look harsh on colored surfaces. Real shadows carry a tint of the surface underneath — ",[19,225,226],{},"rgba(15, 23, 42, 0.2)"," on a dark slate background looks far more natural than ",[19,229,230],{},"rgba(0, 0, 0, 0.2)",".",[10,233,235],{"id":234},"understanding-each-value","Understanding Each Value",[15,237,238,242,243,245],{},[239,240,241],"strong",{},"h-offset and v-offset"," control position. Positive values push the shadow right and down. Negative values pull it left and up. Set both to ",[19,244,149],{}," for a centered glow effect.",[15,247,248,250,251,253,254,257],{},[239,249,138],{}," controls softness. A value of ",[19,252,149],{}," produces a hard-edged shadow identical in shape to the element. A value of ",[19,255,256],{},"20px"," diffuses it into a soft pool.",[15,259,260,262],{},[239,261,162],{}," changes size. Positive spread enlarges the shadow beyond the element bounds. Negative spread contracts it — useful for preventing a shadow from extending past container edges.",[15,264,265,267],{},[239,266,204],{}," flips the shadow inward. Inset shadows simulate pressed or concave surfaces like active button states and recessed input fields.",[34,269,271],{"className":36,"code":270,"language":38,"meta":39,"style":39},"\u002F* Outset shadow — default *\u002F\nbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n\n\u002F* Inset shadow — pressed effect *\u002F\nbox-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);\n",[19,272,273,279,294,301,307],{"__ignoreMap":39},[43,274,275],{"class":45,"line":46},[43,276,278],{"class":277},"sJ8bj","\u002F* Outset shadow — default *\u002F\n",[43,280,282,284,287,291],{"class":45,"line":281},2,[43,283,21],{"class":49},[43,285,286],{"class":52},": 0 4px 12px rgba(0, 0, 0, 0",[43,288,290],{"class":289},"sScJk",".15",[43,292,293],{"class":52},");\n",[43,295,297],{"class":45,"line":296},3,[43,298,300],{"emptyLinePlaceholder":299},true,"\n",[43,302,304],{"class":45,"line":303},4,[43,305,306],{"class":277},"\u002F* Inset shadow — pressed effect *\u002F\n",[43,308,310,312,315,318],{"class":45,"line":309},5,[43,311,21],{"class":49},[43,313,314],{"class":52},": inset 0 2px 4px rgba(0, 0, 0, 0",[43,316,317],{"class":289},".25",[43,319,293],{"class":52},[10,321,323],{"id":322},"single-vs-multiple-shadows","Single vs. Multiple Shadows",[15,325,326],{},"A single shadow works for simple elevation. But it often looks artificial — real light produces two zones: a tighter shadow near the object and a softer, wider one farther away.",[10,328,330],{"id":329},"single-shadow","Single Shadow",[34,332,334],{"className":36,"code":333,"language":38,"meta":39,"style":39},".card {\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n",[19,335,336,344,390],{"__ignoreMap":39},[43,337,338,341],{"class":45,"line":46},[43,339,340],{"class":289},".card",[43,342,343],{"class":52}," {\n",[43,345,346,350,352,354,357,361,364,366,369,372,374,377,379,381,383,385,388],{"class":45,"line":281},[43,347,349],{"class":348},"sj4cs","  box-shadow",[43,351,53],{"class":52},[43,353,149],{"class":348},[43,355,356],{"class":348}," 4",[43,358,360],{"class":359},"szBVR","px",[43,362,363],{"class":348}," 6",[43,365,360],{"class":359},[43,367,368],{"class":348}," rgba",[43,370,371],{"class":52},"(",[43,373,149],{"class":348},[43,375,376],{"class":52},", ",[43,378,149],{"class":348},[43,380,376],{"class":52},[43,382,149],{"class":348},[43,384,376],{"class":52},[43,386,387],{"class":348},"0.1",[43,389,293],{"class":52},[43,391,392],{"class":45,"line":296},[43,393,394],{"class":52},"}\n",[10,396,398],{"id":397},"multiple-shadows-recommended","Multiple Shadows (Recommended)",[15,400,401],{},"Separate each shadow with a comma. The browser renders them in order — first shadow sits on top.",[34,403,405],{"className":36,"code":404,"language":38,"meta":39,"style":39},".card {\n  box-shadow:\n    0 1px 2px rgba(0, 0, 0, 0.08),   \u002F* tight contact shadow *\u002F\n    0 4px 12px rgba(0, 0, 0, 0.12);   \u002F* soft ambient shadow *\u002F\n}\n",[19,406,407,413,420,460,498],{"__ignoreMap":39},[43,408,409,411],{"class":45,"line":46},[43,410,340],{"class":289},[43,412,343],{"class":52},[43,414,415,417],{"class":45,"line":281},[43,416,349],{"class":348},[43,418,419],{"class":52},":\n",[43,421,422,425,428,430,433,435,437,439,441,443,445,447,449,451,454,457],{"class":45,"line":296},[43,423,424],{"class":348},"    0",[43,426,427],{"class":348}," 1",[43,429,360],{"class":359},[43,431,432],{"class":348}," 2",[43,434,360],{"class":359},[43,436,368],{"class":348},[43,438,371],{"class":52},[43,440,149],{"class":348},[43,442,376],{"class":52},[43,444,149],{"class":348},[43,446,376],{"class":52},[43,448,149],{"class":348},[43,450,376],{"class":52},[43,452,453],{"class":348},"0.08",[43,455,456],{"class":52},"),   ",[43,458,459],{"class":277},"\u002F* tight contact shadow *\u002F\n",[43,461,462,464,466,468,471,473,475,477,479,481,483,485,487,489,492,495],{"class":45,"line":303},[43,463,424],{"class":348},[43,465,356],{"class":348},[43,467,360],{"class":359},[43,469,470],{"class":348}," 12",[43,472,360],{"class":359},[43,474,368],{"class":348},[43,476,371],{"class":52},[43,478,149],{"class":348},[43,480,376],{"class":52},[43,482,149],{"class":348},[43,484,376],{"class":52},[43,486,149],{"class":348},[43,488,376],{"class":52},[43,490,491],{"class":348},"0.12",[43,493,494],{"class":52},");   ",[43,496,497],{"class":277},"\u002F* soft ambient shadow *\u002F\n",[43,499,500],{"class":45,"line":309},[43,501,394],{"class":52},[15,503,504],{},"Layering two shadows produces a convincing depth effect. The first defines the immediate contact zone. The second simulates ambient light diffusion.",[10,506,508],{"id":507},"realistic-layered-shadow-patterns","Realistic Layered Shadow Patterns",[15,510,511],{},"Material Design popularized the concept of elevation tiers — each level corresponds to a specific shadow configuration. You can build a similar system with five levels:",[64,513,514,527],{},[67,515,516],{},[70,517,518,521,524],{},[73,519,520],{},"Level",[73,522,523],{},"Shadow CSS",[73,525,526],{},"Use Case",[89,528,529,541,554,567,580],{},[70,530,531,533,538],{},[94,532,149],{},[94,534,535],{},[19,536,537],{},"none",[94,539,540],{},"Flat resting state",[70,542,543,546,551],{},[94,544,545],{},"1",[94,547,548],{},[19,549,550],{},"0 1px 2px rgba(0,0,0,0.05)",[94,552,553],{},"Subtle card lift",[70,555,556,559,564],{},[94,557,558],{},"2",[94,560,561],{},[19,562,563],{},"0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06)",[94,565,566],{},"Hovered cards",[70,568,569,572,577],{},[94,570,571],{},"3",[94,573,574],{},[19,575,576],{},"0 4px 8px rgba(0,0,0,0.1), 0 12px 32px rgba(0,0,0,0.08)",[94,578,579],{},"Modals, popovers",[70,581,582,585,590],{},[94,583,584],{},"4",[94,586,587],{},[19,588,589],{},"0 8px 16px rgba(0,0,0,0.15), 0 24px 64px rgba(0,0,0,0.1)",[94,591,592],{},"Full-screen overlays",[15,594,595],{},"Define these as CSS custom properties so every component references the same scale:",[34,597,599],{"className":36,"code":598,"language":38,"meta":39,"style":39},":root {\n  --shadow-0: none;\n  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05);\n  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);\n  --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.1), 0 12px 32px rgba(0, 0, 0, 0.08);\n  --shadow-4: 0 8px 16px rgba(0, 0, 0, 0.15), 0 24px 64px rgba(0, 0, 0, 0.1);\n}\n\n.card { box-shadow: var(--shadow-1); }\n.card:hover { box-shadow: var(--shadow-2); }\n.modal { box-shadow: var(--shadow-3); }\n",[19,600,601,608,621,659,728,797,869,874,879,902,923],{"__ignoreMap":39},[43,602,603,606],{"class":45,"line":46},[43,604,605],{"class":289},":root",[43,607,343],{"class":52},[43,609,610,614,616,618],{"class":45,"line":281},[43,611,613],{"class":612},"s4XuR","  --shadow-0",[43,615,53],{"class":52},[43,617,537],{"class":348},[43,619,620],{"class":52},";\n",[43,622,623,626,628,630,632,634,636,638,640,642,644,646,648,650,652,654,657],{"class":45,"line":296},[43,624,625],{"class":612},"  --shadow-1",[43,627,53],{"class":52},[43,629,149],{"class":348},[43,631,427],{"class":348},[43,633,360],{"class":359},[43,635,432],{"class":348},[43,637,360],{"class":359},[43,639,368],{"class":348},[43,641,371],{"class":52},[43,643,149],{"class":348},[43,645,376],{"class":52},[43,647,149],{"class":348},[43,649,376],{"class":52},[43,651,149],{"class":348},[43,653,376],{"class":52},[43,655,656],{"class":348},"0.05",[43,658,293],{"class":52},[43,660,661,664,666,668,670,672,674,676,678,680,682,684,686,688,690,692,694,697,699,701,703,705,707,709,711,713,715,717,719,721,723,726],{"class":45,"line":303},[43,662,663],{"class":612},"  --shadow-2",[43,665,53],{"class":52},[43,667,149],{"class":348},[43,669,432],{"class":348},[43,671,360],{"class":359},[43,673,356],{"class":348},[43,675,360],{"class":359},[43,677,368],{"class":348},[43,679,371],{"class":52},[43,681,149],{"class":348},[43,683,376],{"class":52},[43,685,149],{"class":348},[43,687,376],{"class":52},[43,689,149],{"class":348},[43,691,376],{"class":52},[43,693,453],{"class":348},[43,695,696],{"class":52},"), ",[43,698,149],{"class":348},[43,700,356],{"class":348},[43,702,360],{"class":359},[43,704,470],{"class":348},[43,706,360],{"class":359},[43,708,368],{"class":348},[43,710,371],{"class":52},[43,712,149],{"class":348},[43,714,376],{"class":52},[43,716,149],{"class":348},[43,718,376],{"class":52},[43,720,149],{"class":348},[43,722,376],{"class":52},[43,724,725],{"class":348},"0.06",[43,727,293],{"class":52},[43,729,730,733,735,737,739,741,744,746,748,750,752,754,756,758,760,762,764,766,768,770,772,775,777,779,781,783,785,787,789,791,793,795],{"class":45,"line":309},[43,731,732],{"class":612},"  --shadow-3",[43,734,53],{"class":52},[43,736,149],{"class":348},[43,738,356],{"class":348},[43,740,360],{"class":359},[43,742,743],{"class":348}," 8",[43,745,360],{"class":359},[43,747,368],{"class":348},[43,749,371],{"class":52},[43,751,149],{"class":348},[43,753,376],{"class":52},[43,755,149],{"class":348},[43,757,376],{"class":52},[43,759,149],{"class":348},[43,761,376],{"class":52},[43,763,387],{"class":348},[43,765,696],{"class":52},[43,767,149],{"class":348},[43,769,470],{"class":348},[43,771,360],{"class":359},[43,773,774],{"class":348}," 32",[43,776,360],{"class":359},[43,778,368],{"class":348},[43,780,371],{"class":52},[43,782,149],{"class":348},[43,784,376],{"class":52},[43,786,149],{"class":348},[43,788,376],{"class":52},[43,790,149],{"class":348},[43,792,376],{"class":52},[43,794,453],{"class":348},[43,796,293],{"class":52},[43,798,800,803,805,807,809,811,814,816,818,820,822,824,826,828,830,832,835,837,839,842,844,847,849,851,853,855,857,859,861,863,865,867],{"class":45,"line":799},6,[43,801,802],{"class":612},"  --shadow-4",[43,804,53],{"class":52},[43,806,149],{"class":348},[43,808,743],{"class":348},[43,810,360],{"class":359},[43,812,813],{"class":348}," 16",[43,815,360],{"class":359},[43,817,368],{"class":348},[43,819,371],{"class":52},[43,821,149],{"class":348},[43,823,376],{"class":52},[43,825,149],{"class":348},[43,827,376],{"class":52},[43,829,149],{"class":348},[43,831,376],{"class":52},[43,833,834],{"class":348},"0.15",[43,836,696],{"class":52},[43,838,149],{"class":348},[43,840,841],{"class":348}," 24",[43,843,360],{"class":359},[43,845,846],{"class":348}," 64",[43,848,360],{"class":359},[43,850,368],{"class":348},[43,852,371],{"class":52},[43,854,149],{"class":348},[43,856,376],{"class":52},[43,858,149],{"class":348},[43,860,376],{"class":52},[43,862,149],{"class":348},[43,864,376],{"class":52},[43,866,387],{"class":348},[43,868,293],{"class":52},[43,870,872],{"class":45,"line":871},7,[43,873,394],{"class":52},[43,875,877],{"class":45,"line":876},8,[43,878,300],{"emptyLinePlaceholder":299},[43,880,882,884,887,889,891,894,896,899],{"class":45,"line":881},9,[43,883,340],{"class":289},[43,885,886],{"class":52}," { ",[43,888,21],{"class":348},[43,890,53],{"class":52},[43,892,893],{"class":348},"var",[43,895,371],{"class":52},[43,897,898],{"class":612},"--shadow-1",[43,900,901],{"class":52},"); }\n",[43,903,905,908,910,912,914,916,918,921],{"class":45,"line":904},10,[43,906,907],{"class":289},".card:hover",[43,909,886],{"class":52},[43,911,21],{"class":348},[43,913,53],{"class":52},[43,915,893],{"class":348},[43,917,371],{"class":52},[43,919,920],{"class":612},"--shadow-2",[43,922,901],{"class":52},[43,924,926,929,931,933,935,937,939,942],{"class":45,"line":925},11,[43,927,928],{"class":289},".modal",[43,930,886],{"class":52},[43,932,21],{"class":348},[43,934,53],{"class":52},[43,936,893],{"class":348},[43,938,371],{"class":52},[43,940,941],{"class":612},"--shadow-3",[43,943,901],{"class":52},[10,945,947],{"id":946},"three-layer-realism","Three-Layer Realism",[15,949,950],{},"For maximum control over the sharp-to-soft transition, use three layers:",[34,952,954],{"className":36,"code":953,"language":38,"meta":39,"style":39},".card {\n  box-shadow:\n    0 1px 2px rgba(0, 0, 0, 0.06),\n    0 4px 8px rgba(0, 0, 0, 0.08),\n    0 12px 32px rgba(0, 0, 0, 0.10);\n}\n",[19,955,956,962,968,1001,1033,1066],{"__ignoreMap":39},[43,957,958,960],{"class":45,"line":46},[43,959,340],{"class":289},[43,961,343],{"class":52},[43,963,964,966],{"class":45,"line":281},[43,965,349],{"class":348},[43,967,419],{"class":52},[43,969,970,972,974,976,978,980,982,984,986,988,990,992,994,996,998],{"class":45,"line":296},[43,971,424],{"class":348},[43,973,427],{"class":348},[43,975,360],{"class":359},[43,977,432],{"class":348},[43,979,360],{"class":359},[43,981,368],{"class":348},[43,983,371],{"class":52},[43,985,149],{"class":348},[43,987,376],{"class":52},[43,989,149],{"class":348},[43,991,376],{"class":52},[43,993,149],{"class":348},[43,995,376],{"class":52},[43,997,725],{"class":348},[43,999,1000],{"class":52},"),\n",[43,1002,1003,1005,1007,1009,1011,1013,1015,1017,1019,1021,1023,1025,1027,1029,1031],{"class":45,"line":303},[43,1004,424],{"class":348},[43,1006,356],{"class":348},[43,1008,360],{"class":359},[43,1010,743],{"class":348},[43,1012,360],{"class":359},[43,1014,368],{"class":348},[43,1016,371],{"class":52},[43,1018,149],{"class":348},[43,1020,376],{"class":52},[43,1022,149],{"class":348},[43,1024,376],{"class":52},[43,1026,149],{"class":348},[43,1028,376],{"class":52},[43,1030,453],{"class":348},[43,1032,1000],{"class":52},[43,1034,1035,1037,1039,1041,1043,1045,1047,1049,1051,1053,1055,1057,1059,1061,1064],{"class":45,"line":309},[43,1036,424],{"class":348},[43,1038,470],{"class":348},[43,1040,360],{"class":359},[43,1042,774],{"class":348},[43,1044,360],{"class":359},[43,1046,368],{"class":348},[43,1048,371],{"class":52},[43,1050,149],{"class":348},[43,1052,376],{"class":52},[43,1054,149],{"class":348},[43,1056,376],{"class":52},[43,1058,149],{"class":348},[43,1060,376],{"class":52},[43,1062,1063],{"class":348},"0.10",[43,1065,293],{"class":52},[43,1067,1068],{"class":45,"line":799},[43,1069,394],{"class":52},[15,1071,1072],{},"The three-tier pattern mirrors physical observation: a crisp shadow directly beneath the object, a medium zone of partial occlusion, and a faint wash of ambient occlusion.",[10,1074,1076],{"id":1075},"inset-shadows","Inset Shadows",[15,1078,1079],{},"Inset shadows render inside the element border. They create the visual impression of a surface pushed inward — ideal for active buttons, recessed inputs, and carved-out containers.",[34,1081,1083],{"className":36,"code":1082,"language":38,"meta":39,"style":39},"\u002F* Pressed button *\u002F\n.button:active {\n  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);\n  transform: translateY(1px);\n}\n\n\u002F* Recessed input field *\u002F\n.input-field {\n  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n",[19,1084,1085,1090,1097,1137,1155,1159,1163,1168,1175,1214],{"__ignoreMap":39},[43,1086,1087],{"class":45,"line":46},[43,1088,1089],{"class":277},"\u002F* Pressed button *\u002F\n",[43,1091,1092,1095],{"class":45,"line":281},[43,1093,1094],{"class":289},".button:active",[43,1096,343],{"class":52},[43,1098,1099,1101,1103,1105,1108,1110,1112,1114,1116,1118,1120,1122,1124,1126,1128,1130,1132,1135],{"class":45,"line":296},[43,1100,349],{"class":348},[43,1102,53],{"class":52},[43,1104,204],{"class":348},[43,1106,1107],{"class":348}," 0",[43,1109,432],{"class":348},[43,1111,360],{"class":359},[43,1113,356],{"class":348},[43,1115,360],{"class":359},[43,1117,368],{"class":348},[43,1119,371],{"class":52},[43,1121,149],{"class":348},[43,1123,376],{"class":52},[43,1125,149],{"class":348},[43,1127,376],{"class":52},[43,1129,149],{"class":348},[43,1131,376],{"class":52},[43,1133,1134],{"class":348},"0.3",[43,1136,293],{"class":52},[43,1138,1139,1142,1144,1147,1149,1151,1153],{"class":45,"line":303},[43,1140,1141],{"class":348},"  transform",[43,1143,53],{"class":52},[43,1145,1146],{"class":348},"translateY",[43,1148,371],{"class":52},[43,1150,545],{"class":348},[43,1152,360],{"class":359},[43,1154,293],{"class":52},[43,1156,1157],{"class":45,"line":309},[43,1158,394],{"class":52},[43,1160,1161],{"class":45,"line":799},[43,1162,300],{"emptyLinePlaceholder":299},[43,1164,1165],{"class":45,"line":871},[43,1166,1167],{"class":277},"\u002F* Recessed input field *\u002F\n",[43,1169,1170,1173],{"class":45,"line":876},[43,1171,1172],{"class":289},".input-field",[43,1174,343],{"class":52},[43,1176,1177,1179,1181,1183,1185,1187,1189,1192,1194,1196,1198,1200,1202,1204,1206,1208,1210,1212],{"class":45,"line":881},[43,1178,349],{"class":348},[43,1180,53],{"class":52},[43,1182,204],{"class":348},[43,1184,1107],{"class":348},[43,1186,427],{"class":348},[43,1188,360],{"class":359},[43,1190,1191],{"class":348}," 3",[43,1193,360],{"class":359},[43,1195,368],{"class":348},[43,1197,371],{"class":52},[43,1199,149],{"class":348},[43,1201,376],{"class":52},[43,1203,149],{"class":348},[43,1205,376],{"class":52},[43,1207,149],{"class":348},[43,1209,376],{"class":52},[43,1211,491],{"class":348},[43,1213,293],{"class":52},[43,1215,1216],{"class":45,"line":904},[43,1217,394],{"class":52},[15,1219,1220],{},"Combine inset and outset shadows for elements that both sink into the surface and cast a subtle outer shadow:",[34,1222,1224],{"className":36,"code":1223,"language":38,"meta":39,"style":39},".input-group {\n  box-shadow:\n    inset 0 1px 3px rgba(0, 0, 0, 0.12),\n    0 1px 2px rgba(0, 0, 0, 0.05);\n}\n",[19,1225,1226,1233,1239,1274,1306],{"__ignoreMap":39},[43,1227,1228,1231],{"class":45,"line":46},[43,1229,1230],{"class":289},".input-group",[43,1232,343],{"class":52},[43,1234,1235,1237],{"class":45,"line":281},[43,1236,349],{"class":348},[43,1238,419],{"class":52},[43,1240,1241,1244,1246,1248,1250,1252,1254,1256,1258,1260,1262,1264,1266,1268,1270,1272],{"class":45,"line":296},[43,1242,1243],{"class":348},"    inset",[43,1245,1107],{"class":348},[43,1247,427],{"class":348},[43,1249,360],{"class":359},[43,1251,1191],{"class":348},[43,1253,360],{"class":359},[43,1255,368],{"class":348},[43,1257,371],{"class":52},[43,1259,149],{"class":348},[43,1261,376],{"class":52},[43,1263,149],{"class":348},[43,1265,376],{"class":52},[43,1267,149],{"class":348},[43,1269,376],{"class":52},[43,1271,491],{"class":348},[43,1273,1000],{"class":52},[43,1275,1276,1278,1280,1282,1284,1286,1288,1290,1292,1294,1296,1298,1300,1302,1304],{"class":45,"line":303},[43,1277,424],{"class":348},[43,1279,427],{"class":348},[43,1281,360],{"class":359},[43,1283,432],{"class":348},[43,1285,360],{"class":359},[43,1287,368],{"class":348},[43,1289,371],{"class":52},[43,1291,149],{"class":348},[43,1293,376],{"class":52},[43,1295,149],{"class":348},[43,1297,376],{"class":52},[43,1299,149],{"class":348},[43,1301,376],{"class":52},[43,1303,656],{"class":348},[43,1305,293],{"class":52},[43,1307,1308],{"class":45,"line":309},[43,1309,394],{"class":52},[10,1311,1313],{"id":1312},"common-shadow-designs","Common Shadow Designs",[10,1315,1317],{"id":1316},"card-lift-on-hover","Card Lift on Hover",[34,1319,1321],{"className":36,"code":1320,"language":38,"meta":39,"style":39},".card {\n  transition: box-shadow 0.3s ease, transform 0.3s ease;\n  box-shadow:\n    0 1px 3px rgba(0, 0, 0, 0.1),\n    0 4px 12px rgba(0, 0, 0, 0.08);\n}\n\n.card:hover {\n  transform: translateY(-2px);\n  box-shadow:\n    0 4px 8px rgba(0, 0, 0, 0.12),\n    0 12px 32px rgba(0, 0, 0, 0.12);\n}\n",[19,1322,1323,1329,1356,1362,1394,1426,1430,1434,1440,1457,1463,1495,1528],{"__ignoreMap":39},[43,1324,1325,1327],{"class":45,"line":46},[43,1326,340],{"class":289},[43,1328,343],{"class":52},[43,1330,1331,1334,1337,1339,1342,1345,1348,1350,1352,1354],{"class":45,"line":281},[43,1332,1333],{"class":348},"  transition",[43,1335,1336],{"class":52},": box-shadow ",[43,1338,1134],{"class":348},[43,1340,1341],{"class":359},"s",[43,1343,1344],{"class":348}," ease",[43,1346,1347],{"class":52},", transform ",[43,1349,1134],{"class":348},[43,1351,1341],{"class":359},[43,1353,1344],{"class":348},[43,1355,620],{"class":52},[43,1357,1358,1360],{"class":45,"line":296},[43,1359,349],{"class":348},[43,1361,419],{"class":52},[43,1363,1364,1366,1368,1370,1372,1374,1376,1378,1380,1382,1384,1386,1388,1390,1392],{"class":45,"line":303},[43,1365,424],{"class":348},[43,1367,427],{"class":348},[43,1369,360],{"class":359},[43,1371,1191],{"class":348},[43,1373,360],{"class":359},[43,1375,368],{"class":348},[43,1377,371],{"class":52},[43,1379,149],{"class":348},[43,1381,376],{"class":52},[43,1383,149],{"class":348},[43,1385,376],{"class":52},[43,1387,149],{"class":348},[43,1389,376],{"class":52},[43,1391,387],{"class":348},[43,1393,1000],{"class":52},[43,1395,1396,1398,1400,1402,1404,1406,1408,1410,1412,1414,1416,1418,1420,1422,1424],{"class":45,"line":309},[43,1397,424],{"class":348},[43,1399,356],{"class":348},[43,1401,360],{"class":359},[43,1403,470],{"class":348},[43,1405,360],{"class":359},[43,1407,368],{"class":348},[43,1409,371],{"class":52},[43,1411,149],{"class":348},[43,1413,376],{"class":52},[43,1415,149],{"class":348},[43,1417,376],{"class":52},[43,1419,149],{"class":348},[43,1421,376],{"class":52},[43,1423,453],{"class":348},[43,1425,293],{"class":52},[43,1427,1428],{"class":45,"line":799},[43,1429,394],{"class":52},[43,1431,1432],{"class":45,"line":871},[43,1433,300],{"emptyLinePlaceholder":299},[43,1435,1436,1438],{"class":45,"line":876},[43,1437,907],{"class":289},[43,1439,343],{"class":52},[43,1441,1442,1444,1446,1448,1450,1453,1455],{"class":45,"line":881},[43,1443,1141],{"class":348},[43,1445,53],{"class":52},[43,1447,1146],{"class":348},[43,1449,371],{"class":52},[43,1451,1452],{"class":348},"-2",[43,1454,360],{"class":359},[43,1456,293],{"class":52},[43,1458,1459,1461],{"class":45,"line":904},[43,1460,349],{"class":348},[43,1462,419],{"class":52},[43,1464,1465,1467,1469,1471,1473,1475,1477,1479,1481,1483,1485,1487,1489,1491,1493],{"class":45,"line":925},[43,1466,424],{"class":348},[43,1468,356],{"class":348},[43,1470,360],{"class":359},[43,1472,743],{"class":348},[43,1474,360],{"class":359},[43,1476,368],{"class":348},[43,1478,371],{"class":52},[43,1480,149],{"class":348},[43,1482,376],{"class":52},[43,1484,149],{"class":348},[43,1486,376],{"class":52},[43,1488,149],{"class":348},[43,1490,376],{"class":52},[43,1492,491],{"class":348},[43,1494,1000],{"class":52},[43,1496,1498,1500,1502,1504,1506,1508,1510,1512,1514,1516,1518,1520,1522,1524,1526],{"class":45,"line":1497},12,[43,1499,424],{"class":348},[43,1501,470],{"class":348},[43,1503,360],{"class":359},[43,1505,774],{"class":348},[43,1507,360],{"class":359},[43,1509,368],{"class":348},[43,1511,371],{"class":52},[43,1513,149],{"class":348},[43,1515,376],{"class":52},[43,1517,149],{"class":348},[43,1519,376],{"class":52},[43,1521,149],{"class":348},[43,1523,376],{"class":52},[43,1525,491],{"class":348},[43,1527,293],{"class":52},[43,1529,1531],{"class":45,"line":1530},13,[43,1532,394],{"class":52},[15,1534,1535],{},"Keep the transition duration between 200ms and 300ms for a snappy feel.",[10,1537,1539],{"id":1538},"neon-glow","Neon Glow",[34,1541,1543],{"className":36,"code":1542,"language":38,"meta":39,"style":39},".neon {\n  background: #10B981;\n  box-shadow:\n    0 0 8px rgba(16, 185, 129, 0.6),\n    0 0 24px rgba(16, 185, 129, 0.3),\n    0 0 48px rgba(16, 185, 129, 0.15);\n}\n",[19,1544,1545,1552,1564,1570,1604,1634,1665],{"__ignoreMap":39},[43,1546,1547,1550],{"class":45,"line":46},[43,1548,1549],{"class":289},".neon",[43,1551,343],{"class":52},[43,1553,1554,1557,1559,1562],{"class":45,"line":281},[43,1555,1556],{"class":348},"  background",[43,1558,53],{"class":52},[43,1560,1561],{"class":348},"#10B981",[43,1563,620],{"class":52},[43,1565,1566,1568],{"class":45,"line":296},[43,1567,349],{"class":348},[43,1569,419],{"class":52},[43,1571,1572,1574,1576,1578,1580,1582,1584,1587,1589,1592,1594,1597,1599,1602],{"class":45,"line":303},[43,1573,424],{"class":348},[43,1575,1107],{"class":348},[43,1577,743],{"class":348},[43,1579,360],{"class":359},[43,1581,368],{"class":348},[43,1583,371],{"class":52},[43,1585,1586],{"class":348},"16",[43,1588,376],{"class":52},[43,1590,1591],{"class":348},"185",[43,1593,376],{"class":52},[43,1595,1596],{"class":348},"129",[43,1598,376],{"class":52},[43,1600,1601],{"class":348},"0.6",[43,1603,1000],{"class":52},[43,1605,1606,1608,1610,1612,1614,1616,1618,1620,1622,1624,1626,1628,1630,1632],{"class":45,"line":309},[43,1607,424],{"class":348},[43,1609,1107],{"class":348},[43,1611,841],{"class":348},[43,1613,360],{"class":359},[43,1615,368],{"class":348},[43,1617,371],{"class":52},[43,1619,1586],{"class":348},[43,1621,376],{"class":52},[43,1623,1591],{"class":348},[43,1625,376],{"class":52},[43,1627,1596],{"class":348},[43,1629,376],{"class":52},[43,1631,1134],{"class":348},[43,1633,1000],{"class":52},[43,1635,1636,1638,1640,1643,1645,1647,1649,1651,1653,1655,1657,1659,1661,1663],{"class":45,"line":799},[43,1637,424],{"class":348},[43,1639,1107],{"class":348},[43,1641,1642],{"class":348}," 48",[43,1644,360],{"class":359},[43,1646,368],{"class":348},[43,1648,371],{"class":52},[43,1650,1586],{"class":348},[43,1652,376],{"class":52},[43,1654,1591],{"class":348},[43,1656,376],{"class":52},[43,1658,1596],{"class":348},[43,1660,376],{"class":52},[43,1662,834],{"class":348},[43,1664,293],{"class":52},[43,1666,1667],{"class":45,"line":871},[43,1668,394],{"class":52},[15,1670,1671,1672,1675],{},"Neon effects use centered offsets (",[19,1673,1674],{},"0 0",") with colored shadows at decreasing alpha values. Three layers mimic real light falloff.",[10,1677,1679],{"id":1678},"modal-overlay","Modal Overlay",[34,1681,1683],{"className":36,"code":1682,"language":38,"meta":39,"style":39},".modal {\n  box-shadow:\n    0 4px 8px rgba(0, 0, 0, 0.1),\n    0 12px 32px rgba(0, 0, 0, 0.08),\n    0 24px 64px rgba(0, 0, 0, 0.06);\n  border-radius: 12px;\n}\n",[19,1684,1685,1691,1697,1729,1761,1793,1807],{"__ignoreMap":39},[43,1686,1687,1689],{"class":45,"line":46},[43,1688,928],{"class":289},[43,1690,343],{"class":52},[43,1692,1693,1695],{"class":45,"line":281},[43,1694,349],{"class":348},[43,1696,419],{"class":52},[43,1698,1699,1701,1703,1705,1707,1709,1711,1713,1715,1717,1719,1721,1723,1725,1727],{"class":45,"line":296},[43,1700,424],{"class":348},[43,1702,356],{"class":348},[43,1704,360],{"class":359},[43,1706,743],{"class":348},[43,1708,360],{"class":359},[43,1710,368],{"class":348},[43,1712,371],{"class":52},[43,1714,149],{"class":348},[43,1716,376],{"class":52},[43,1718,149],{"class":348},[43,1720,376],{"class":52},[43,1722,149],{"class":348},[43,1724,376],{"class":52},[43,1726,387],{"class":348},[43,1728,1000],{"class":52},[43,1730,1731,1733,1735,1737,1739,1741,1743,1745,1747,1749,1751,1753,1755,1757,1759],{"class":45,"line":303},[43,1732,424],{"class":348},[43,1734,470],{"class":348},[43,1736,360],{"class":359},[43,1738,774],{"class":348},[43,1740,360],{"class":359},[43,1742,368],{"class":348},[43,1744,371],{"class":52},[43,1746,149],{"class":348},[43,1748,376],{"class":52},[43,1750,149],{"class":348},[43,1752,376],{"class":52},[43,1754,149],{"class":348},[43,1756,376],{"class":52},[43,1758,453],{"class":348},[43,1760,1000],{"class":52},[43,1762,1763,1765,1767,1769,1771,1773,1775,1777,1779,1781,1783,1785,1787,1789,1791],{"class":45,"line":309},[43,1764,424],{"class":348},[43,1766,841],{"class":348},[43,1768,360],{"class":359},[43,1770,846],{"class":348},[43,1772,360],{"class":359},[43,1774,368],{"class":348},[43,1776,371],{"class":52},[43,1778,149],{"class":348},[43,1780,376],{"class":52},[43,1782,149],{"class":348},[43,1784,376],{"class":52},[43,1786,149],{"class":348},[43,1788,376],{"class":52},[43,1790,725],{"class":348},[43,1792,293],{"class":52},[43,1794,1795,1798,1800,1803,1805],{"class":45,"line":799},[43,1796,1797],{"class":348},"  border-radius",[43,1799,53],{"class":52},[43,1801,1802],{"class":348},"12",[43,1804,360],{"class":359},[43,1806,620],{"class":52},[43,1808,1809],{"class":45,"line":871},[43,1810,394],{"class":52},[15,1812,1813],{},"Modals sit at the highest elevation tier. Three layers ensure the panel separates clearly from the backdrop.",[10,1815,1817],{"id":1816},"performance-tips","Performance Tips",[15,1819,1820],{},"Shadows are GPU-accelerated, but they carry a cost when misused.",[64,1822,1823,1836],{},[67,1824,1825],{},[70,1826,1827,1830,1833],{},[73,1828,1829],{},"Concern",[73,1831,1832],{},"Impact",[73,1834,1835],{},"Recommendation",[89,1837,1838,1855,1866,1876,1887],{},[70,1839,1840,1845,1848],{},[94,1841,1842,1843],{},"Animating ",[19,1844,21],{},[94,1846,1847],{},"Medium",[94,1849,1850,1851,1854],{},"Animate ",[19,1852,1853],{},"opacity"," on a pseudo-element instead for smoother frames",[70,1856,1857,1860,1863],{},[94,1858,1859],{},"Large blur radius (50px+)",[94,1861,1862],{},"High",[94,1864,1865],{},"Blur cost scales quadratically — keep blur under 40px",[70,1867,1868,1871,1873],{},[94,1869,1870],{},"Many shadow layers",[94,1872,1847],{},[94,1874,1875],{},"Limit to 3 layers per element",[70,1877,1878,1881,1884],{},[94,1879,1880],{},"Shadows on scrolled content",[94,1882,1883],{},"Low",[94,1885,1886],{},"Browsers cache rasterized shadows",[70,1888,1889,1894,1896],{},[94,1890,1891],{},[19,1892,1893],{},"will-change: box-shadow",[94,1895,1883],{},[94,1897,1898],{},"Only add when actively animating",[15,1900,1901,1902,1904],{},"The biggest performance trap is animating ",[19,1903,21],{}," directly. The browser repaints the shadow on every frame. A smoother technique uses a pseudo-element:",[34,1906,1908],{"className":36,"code":1907,"language":38,"meta":39,"style":39},".card {\n  position: relative;\n}\n\n.card::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.card:hover::after {\n  opacity: 1;\n}\n",[19,1909,1910,1916,1928,1932,1936,1943,1956,1967,1978,1989,2025,2036,2051,2055,2060,2068,2079],{"__ignoreMap":39},[43,1911,1912,1914],{"class":45,"line":46},[43,1913,340],{"class":289},[43,1915,343],{"class":52},[43,1917,1918,1921,1923,1926],{"class":45,"line":281},[43,1919,1920],{"class":348},"  position",[43,1922,53],{"class":52},[43,1924,1925],{"class":348},"relative",[43,1927,620],{"class":52},[43,1929,1930],{"class":45,"line":296},[43,1931,394],{"class":52},[43,1933,1934],{"class":45,"line":303},[43,1935,300],{"emptyLinePlaceholder":299},[43,1937,1938,1941],{"class":45,"line":309},[43,1939,1940],{"class":289},".card::after",[43,1942,343],{"class":52},[43,1944,1945,1948,1950,1954],{"class":45,"line":799},[43,1946,1947],{"class":348},"  content",[43,1949,53],{"class":52},[43,1951,1953],{"class":1952},"sZZnC","''",[43,1955,620],{"class":52},[43,1957,1958,1960,1962,1965],{"class":45,"line":871},[43,1959,1920],{"class":348},[43,1961,53],{"class":52},[43,1963,1964],{"class":348},"absolute",[43,1966,620],{"class":52},[43,1968,1969,1972,1974,1976],{"class":45,"line":876},[43,1970,1971],{"class":348},"  inset",[43,1973,53],{"class":52},[43,1975,149],{"class":348},[43,1977,620],{"class":52},[43,1979,1980,1982,1984,1987],{"class":45,"line":881},[43,1981,1797],{"class":348},[43,1983,53],{"class":52},[43,1985,1986],{"class":348},"inherit",[43,1988,620],{"class":52},[43,1990,1991,1993,1995,1997,1999,2001,2003,2005,2007,2009,2011,2013,2015,2017,2019,2021,2023],{"class":45,"line":904},[43,1992,349],{"class":348},[43,1994,53],{"class":52},[43,1996,149],{"class":348},[43,1998,470],{"class":348},[43,2000,360],{"class":359},[43,2002,774],{"class":348},[43,2004,360],{"class":359},[43,2006,368],{"class":348},[43,2008,371],{"class":52},[43,2010,149],{"class":348},[43,2012,376],{"class":52},[43,2014,149],{"class":348},[43,2016,376],{"class":52},[43,2018,149],{"class":348},[43,2020,376],{"class":52},[43,2022,834],{"class":348},[43,2024,293],{"class":52},[43,2026,2027,2030,2032,2034],{"class":45,"line":925},[43,2028,2029],{"class":348},"  opacity",[43,2031,53],{"class":52},[43,2033,149],{"class":348},[43,2035,620],{"class":52},[43,2037,2038,2040,2043,2045,2047,2049],{"class":45,"line":1497},[43,2039,1333],{"class":348},[43,2041,2042],{"class":52},": opacity ",[43,2044,1134],{"class":348},[43,2046,1341],{"class":359},[43,2048,1344],{"class":348},[43,2050,620],{"class":52},[43,2052,2053],{"class":45,"line":1530},[43,2054,394],{"class":52},[43,2056,2058],{"class":45,"line":2057},14,[43,2059,300],{"emptyLinePlaceholder":299},[43,2061,2063,2066],{"class":45,"line":2062},15,[43,2064,2065],{"class":289},".card:hover::after",[43,2067,343],{"class":52},[43,2069,2071,2073,2075,2077],{"class":45,"line":2070},16,[43,2072,2029],{"class":348},[43,2074,53],{"class":52},[43,2076,545],{"class":348},[43,2078,620],{"class":52},[43,2080,2082],{"class":45,"line":2081},17,[43,2083,394],{"class":52},[15,2085,2086,2087,2089],{},"This approach animates ",[19,2088,1853],{}," — a compositor-only property that runs at 60fps without repaints.",[10,2091,2093],{"id":2092},"key-takeaways","Key Takeaways",[2095,2096,2097,2106,2109,2112,2115,2118],"ul",{},[2098,2099,2100,2102,2103,2105],"li",{},[19,2101,21],{}," takes up to six values: h-offset, v-offset, blur, spread, color, and the optional ",[19,2104,204],{}," keyword",[2098,2107,2108],{},"Layer two or three shadows — one tight, one soft — for realistic depth",[2098,2110,2111],{},"Use alpha-channel colors so shadows blend with their background naturally",[2098,2113,2114],{},"Define a shadow scale with CSS custom properties for elevation consistency",[2098,2116,2117],{},"Inset shadows simulate concave or pressed surfaces",[2098,2119,2120],{},"Limit shadow layers to 3 and blur to 40px to avoid performance issues",[10,2122,2124],{"id":2123},"try-it-yourself","Try It Yourself",[15,2126,2127,2128,2133],{},"Build and preview box shadows in real time with our ",[2129,2130,2132],"a",{"href":2131},"\u002Ftools\u002Fcss-box-shadow","CSS Box Shadow Generator",". Adjust offsets, blur, spread, and color — then copy the generated CSS straight into your project.",[10,2135,2137],{"id":2136},"related-guides","Related Guides",[2095,2139,2140,2154,2161],{},[2098,2141,2142,2146,2147,2149,2150,2153],{},[2129,2143,2145],{"href":2144},"\u002Fguides\u002Fcss-drop-shadow-tutorial","CSS Drop Shadow Tutorial"," — Compare ",[19,2148,21],{}," and ",[19,2151,2152],{},"filter: drop-shadow()"," to choose the right one for images and SVG",[2098,2155,2156,2160],{},[2129,2157,2159],{"href":2158},"\u002Fguides\u002Fcss-visual-effects","CSS Visual Effects"," — Combine shadows with gradients, glow, and glass morphism for modern UI design",[2098,2162,2163,2167],{},[2129,2164,2166],{"href":2165},"\u002Fguides\u002Fcss-design-tips","CSS Design Tips"," — Practical techniques for pairing shadows with gradients and color",[2169,2170,2171],"style",{},"html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}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 .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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":39,"searchDepth":281,"depth":281,"links":2173},[2174,2175,2176,2177,2178,2179,2180,2181,2182,2183,2184,2185,2186,2187,2188,2189,2190],{"id":12,"depth":281,"text":13},{"id":31,"depth":281,"text":32},{"id":234,"depth":281,"text":235},{"id":322,"depth":281,"text":323},{"id":329,"depth":281,"text":330},{"id":397,"depth":281,"text":398},{"id":507,"depth":281,"text":508},{"id":946,"depth":281,"text":947},{"id":1075,"depth":281,"text":1076},{"id":1312,"depth":281,"text":1313},{"id":1316,"depth":281,"text":1317},{"id":1538,"depth":281,"text":1539},{"id":1678,"depth":281,"text":1679},{"id":1816,"depth":281,"text":1817},{"id":2092,"depth":281,"text":2093},{"id":2123,"depth":281,"text":2124},{"id":2136,"depth":281,"text":2137},"2026-05-28","Complete guide to CSS box-shadow syntax, layered shadows, and design patterns. Learn offset, blur, spread, and inset shadows.","md",{"immutable":299,"keywords":2195},[2196,2197],"css-box-shadow","css-box-shadow-guide","\u002Fguides\u002Fcss-box-shadow-guide",{"title":5,"description":2192},"guides\u002Fcss-box-shadow-guide","bspirevmIjgWzwbbhIgpf3hk9smNPjHxvUlkal1WSbI",1780401328512]