[{"data":1,"prerenderedAt":1688},["ShallowReactive",2],{"guide-realistic-css-shadows":3},{"id":4,"title":5,"body":6,"date":1680,"description":1681,"extension":1682,"meta":1683,"navigation":1261,"path":1684,"readingTime":183,"seo":1685,"stem":1686,"__hash__":1687},"guides\u002Fguides\u002Frealistic-css-shadows.md","Creating Realistic CSS Shadows",{"type":7,"value":8,"toc":1662},"minimark",[9,14,23,30,34,37,290,293,298,304,308,311,409,413,790,794,797,930,933,937,940,944,947,1073,1076,1080,1083,1146,1149,1153,1156,1381,1384,1388,1391,1608,1614,1618,1641,1645,1648,1658],[10,11,13],"h2",{"id":12},"why-most-css-shadows-look-fake","Why Most CSS Shadows Look Fake",[15,16,17,18,22],"p",{},"A single ",[19,20,21],"code",{},"box-shadow"," on an element produces a flat, uniform shadow — nothing like what happens in the real world. Real shadows have multiple layers: a tight, dark shadow near the object and a softer, lighter shadow that spreads outward. They also respond to the distance between the object and the surface beneath it.",[15,24,25,26,29],{},"The gap between a ",[19,27,28],{},"box-shadow: 0 4px 6px rgba(0,0,0,0.1)"," and a realistic shadow is the gap between a clip-art drop shadow and a photograph. The fix is surprisingly simple: use multiple shadow layers.",[10,31,33],{"id":32},"the-layered-shadow-technique","The Layered Shadow Technique",[15,35,36],{},"Instead of one shadow, stack several with increasing offset and blur:",[38,39,44],"pre",{"className":40,"code":41,"language":42,"meta":43,"style":43},"language-css shiki shiki-themes github-light github-dark",".realistic-shadow {\n  box-shadow:\n    0 1px 2px rgba(0, 0, 0, 0.07),\n    0 2px 4px rgba(0, 0, 0, 0.07),\n    0 4px 8px rgba(0, 0, 0, 0.07),\n    0 8px 16px rgba(0, 0, 0, 0.07),\n    0 16px 32px rgba(0, 0, 0, 0.07),\n    0 32px 64px rgba(0, 0, 0, 0.07);\n}\n","css","",[19,45,46,59,69,113,147,181,215,249,284],{"__ignoreMap":43},[47,48,51,55],"span",{"class":49,"line":50},"line",1,[47,52,54],{"class":53},"sScJk",".realistic-shadow",[47,56,58],{"class":57},"sVt8B"," {\n",[47,60,62,66],{"class":49,"line":61},2,[47,63,65],{"class":64},"sj4cs","  box-shadow",[47,67,68],{"class":57},":\n",[47,70,72,75,78,82,85,87,90,93,96,99,101,103,105,107,110],{"class":49,"line":71},3,[47,73,74],{"class":64},"    0",[47,76,77],{"class":64}," 1",[47,79,81],{"class":80},"szBVR","px",[47,83,84],{"class":64}," 2",[47,86,81],{"class":80},[47,88,89],{"class":64}," rgba",[47,91,92],{"class":57},"(",[47,94,95],{"class":64},"0",[47,97,98],{"class":57},", ",[47,100,95],{"class":64},[47,102,98],{"class":57},[47,104,95],{"class":64},[47,106,98],{"class":57},[47,108,109],{"class":64},"0.07",[47,111,112],{"class":57},"),\n",[47,114,116,118,120,122,125,127,129,131,133,135,137,139,141,143,145],{"class":49,"line":115},4,[47,117,74],{"class":64},[47,119,84],{"class":64},[47,121,81],{"class":80},[47,123,124],{"class":64}," 4",[47,126,81],{"class":80},[47,128,89],{"class":64},[47,130,92],{"class":57},[47,132,95],{"class":64},[47,134,98],{"class":57},[47,136,95],{"class":64},[47,138,98],{"class":57},[47,140,95],{"class":64},[47,142,98],{"class":57},[47,144,109],{"class":64},[47,146,112],{"class":57},[47,148,150,152,154,156,159,161,163,165,167,169,171,173,175,177,179],{"class":49,"line":149},5,[47,151,74],{"class":64},[47,153,124],{"class":64},[47,155,81],{"class":80},[47,157,158],{"class":64}," 8",[47,160,81],{"class":80},[47,162,89],{"class":64},[47,164,92],{"class":57},[47,166,95],{"class":64},[47,168,98],{"class":57},[47,170,95],{"class":64},[47,172,98],{"class":57},[47,174,95],{"class":64},[47,176,98],{"class":57},[47,178,109],{"class":64},[47,180,112],{"class":57},[47,182,184,186,188,190,193,195,197,199,201,203,205,207,209,211,213],{"class":49,"line":183},6,[47,185,74],{"class":64},[47,187,158],{"class":64},[47,189,81],{"class":80},[47,191,192],{"class":64}," 16",[47,194,81],{"class":80},[47,196,89],{"class":64},[47,198,92],{"class":57},[47,200,95],{"class":64},[47,202,98],{"class":57},[47,204,95],{"class":64},[47,206,98],{"class":57},[47,208,95],{"class":64},[47,210,98],{"class":57},[47,212,109],{"class":64},[47,214,112],{"class":57},[47,216,218,220,222,224,227,229,231,233,235,237,239,241,243,245,247],{"class":49,"line":217},7,[47,219,74],{"class":64},[47,221,192],{"class":64},[47,223,81],{"class":80},[47,225,226],{"class":64}," 32",[47,228,81],{"class":80},[47,230,89],{"class":64},[47,232,92],{"class":57},[47,234,95],{"class":64},[47,236,98],{"class":57},[47,238,95],{"class":64},[47,240,98],{"class":57},[47,242,95],{"class":64},[47,244,98],{"class":57},[47,246,109],{"class":64},[47,248,112],{"class":57},[47,250,252,254,256,258,261,263,265,267,269,271,273,275,277,279,281],{"class":49,"line":251},8,[47,253,74],{"class":64},[47,255,226],{"class":64},[47,257,81],{"class":80},[47,259,260],{"class":64}," 64",[47,262,81],{"class":80},[47,264,89],{"class":64},[47,266,92],{"class":57},[47,268,95],{"class":64},[47,270,98],{"class":57},[47,272,95],{"class":64},[47,274,98],{"class":57},[47,276,95],{"class":64},[47,278,98],{"class":57},[47,280,109],{"class":64},[47,282,283],{"class":57},");\n",[47,285,287],{"class":49,"line":286},9,[47,288,289],{"class":57},"}\n",[15,291,292],{},"Each layer doubles the offset and blur of the previous one while keeping the opacity constant. The result: a shadow that's sharp near the edge and fades gradually outward — exactly how real shadows behave.",[294,295,297],"h3",{"id":296},"why-this-works","Why This Works",[15,299,300,301,303],{},"In reality, a shadow is sharpest where the object almost touches the surface and softest where it's farthest away. Multiple layers simulate this graduated falloff. A single ",[19,302,21],{}," can't produce this effect because it has only one falloff curve.",[10,305,307],{"id":306},"shadow-depth-scale","Shadow Depth Scale",[15,309,310],{},"Use elevation levels to keep shadows consistent across your design:",[312,313,314,330],"table",{},[315,316,317],"thead",{},[318,319,320,324,327],"tr",{},[321,322,323],"th",{},"Level",[321,325,326],{},"Shadow",[321,328,329],{},"Use",[331,332,333,344,357,370,383,396],"tbody",{},[318,334,335,338,341],{},[336,337,95],"td",{},[336,339,340],{},"none",[336,342,343],{},"Flat elements, dividers",[318,345,346,349,354],{},[336,347,348],{},"1",[336,350,351],{},[19,352,353],{},"0 1px 2px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.1)",[336,355,356],{},"Cards at rest",[318,358,359,362,367],{},[336,360,361],{},"2",[336,363,364],{},[19,365,366],{},"0 3px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.08)",[336,368,369],{},"Raised cards",[318,371,372,375,380],{},[336,373,374],{},"3",[336,376,377],{},[19,378,379],{},"0 10px 20px rgba(0,0,0,0.06), 0 3px 6px rgba(0,0,0,0.08)",[336,381,382],{},"Dropdowns",[318,384,385,388,393],{},[336,386,387],{},"4",[336,389,390],{},[19,391,392],{},"0 20px 40px rgba(0,0,0,0.08), 0 5px 10px rgba(0,0,0,0.06)",[336,394,395],{},"Modals",[318,397,398,401,406],{},[336,399,400],{},"5",[336,402,403],{},[19,404,405],{},"0 30px 60px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.08)",[336,407,408],{},"Overlays",[294,410,412],{"id":411},"tailwind-utility-classes","Tailwind Utility Classes",[38,414,416],{"className":40,"code":415,"language":42,"meta":43,"style":43},".shadow-1 { box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.1); }\n.shadow-2 { box-shadow: 0 3px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.08); }\n.shadow-3 { box-shadow: 0 10px 20px rgba(0,0,0,0.06), 0 3px 6px rgba(0,0,0,0.08); }\n.shadow-4 { box-shadow: 0 20px 40px rgba(0,0,0,0.08), 0 5px 10px rgba(0,0,0,0.06); }\n.shadow-5 { box-shadow: 0 30px 60px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.08); }\n",[19,417,418,497,571,644,717],{"__ignoreMap":43},[47,419,420,423,426,428,431,433,435,437,439,441,443,445,447,450,452,454,456,458,461,464,466,468,470,473,475,477,479,481,483,485,487,489,491,494],{"class":49,"line":50},[47,421,422],{"class":53},".shadow-1",[47,424,425],{"class":57}," { ",[47,427,21],{"class":64},[47,429,430],{"class":57},": ",[47,432,95],{"class":64},[47,434,77],{"class":64},[47,436,81],{"class":80},[47,438,84],{"class":64},[47,440,81],{"class":80},[47,442,89],{"class":64},[47,444,92],{"class":57},[47,446,95],{"class":64},[47,448,449],{"class":57},",",[47,451,95],{"class":64},[47,453,449],{"class":57},[47,455,95],{"class":64},[47,457,449],{"class":57},[47,459,460],{"class":64},"0.05",[47,462,463],{"class":57},"), ",[47,465,95],{"class":64},[47,467,77],{"class":64},[47,469,81],{"class":80},[47,471,472],{"class":64}," 3",[47,474,81],{"class":80},[47,476,89],{"class":64},[47,478,92],{"class":57},[47,480,95],{"class":64},[47,482,449],{"class":57},[47,484,95],{"class":64},[47,486,449],{"class":57},[47,488,95],{"class":64},[47,490,449],{"class":57},[47,492,493],{"class":64},"0.1",[47,495,496],{"class":57},"); }\n",[47,498,499,502,504,506,508,510,512,514,517,519,521,523,525,527,529,531,533,535,538,540,542,544,546,548,550,552,554,556,558,560,562,564,566,569],{"class":49,"line":61},[47,500,501],{"class":53},".shadow-2",[47,503,425],{"class":57},[47,505,21],{"class":64},[47,507,430],{"class":57},[47,509,95],{"class":64},[47,511,472],{"class":64},[47,513,81],{"class":80},[47,515,516],{"class":64}," 6",[47,518,81],{"class":80},[47,520,89],{"class":64},[47,522,92],{"class":57},[47,524,95],{"class":64},[47,526,449],{"class":57},[47,528,95],{"class":64},[47,530,449],{"class":57},[47,532,95],{"class":64},[47,534,449],{"class":57},[47,536,537],{"class":64},"0.06",[47,539,463],{"class":57},[47,541,95],{"class":64},[47,543,84],{"class":64},[47,545,81],{"class":80},[47,547,124],{"class":64},[47,549,81],{"class":80},[47,551,89],{"class":64},[47,553,92],{"class":57},[47,555,95],{"class":64},[47,557,449],{"class":57},[47,559,95],{"class":64},[47,561,449],{"class":57},[47,563,95],{"class":64},[47,565,449],{"class":57},[47,567,568],{"class":64},"0.08",[47,570,496],{"class":57},[47,572,573,576,578,580,582,584,587,589,592,594,596,598,600,602,604,606,608,610,612,614,616,618,620,622,624,626,628,630,632,634,636,638,640,642],{"class":49,"line":71},[47,574,575],{"class":53},".shadow-3",[47,577,425],{"class":57},[47,579,21],{"class":64},[47,581,430],{"class":57},[47,583,95],{"class":64},[47,585,586],{"class":64}," 10",[47,588,81],{"class":80},[47,590,591],{"class":64}," 20",[47,593,81],{"class":80},[47,595,89],{"class":64},[47,597,92],{"class":57},[47,599,95],{"class":64},[47,601,449],{"class":57},[47,603,95],{"class":64},[47,605,449],{"class":57},[47,607,95],{"class":64},[47,609,449],{"class":57},[47,611,537],{"class":64},[47,613,463],{"class":57},[47,615,95],{"class":64},[47,617,472],{"class":64},[47,619,81],{"class":80},[47,621,516],{"class":64},[47,623,81],{"class":80},[47,625,89],{"class":64},[47,627,92],{"class":57},[47,629,95],{"class":64},[47,631,449],{"class":57},[47,633,95],{"class":64},[47,635,449],{"class":57},[47,637,95],{"class":64},[47,639,449],{"class":57},[47,641,568],{"class":64},[47,643,496],{"class":57},[47,645,646,649,651,653,655,657,659,661,664,666,668,670,672,674,676,678,680,682,684,686,688,691,693,695,697,699,701,703,705,707,709,711,713,715],{"class":49,"line":115},[47,647,648],{"class":53},".shadow-4",[47,650,425],{"class":57},[47,652,21],{"class":64},[47,654,430],{"class":57},[47,656,95],{"class":64},[47,658,591],{"class":64},[47,660,81],{"class":80},[47,662,663],{"class":64}," 40",[47,665,81],{"class":80},[47,667,89],{"class":64},[47,669,92],{"class":57},[47,671,95],{"class":64},[47,673,449],{"class":57},[47,675,95],{"class":64},[47,677,449],{"class":57},[47,679,95],{"class":64},[47,681,449],{"class":57},[47,683,568],{"class":64},[47,685,463],{"class":57},[47,687,95],{"class":64},[47,689,690],{"class":64}," 5",[47,692,81],{"class":80},[47,694,586],{"class":64},[47,696,81],{"class":80},[47,698,89],{"class":64},[47,700,92],{"class":57},[47,702,95],{"class":64},[47,704,449],{"class":57},[47,706,95],{"class":64},[47,708,449],{"class":57},[47,710,95],{"class":64},[47,712,449],{"class":57},[47,714,537],{"class":64},[47,716,496],{"class":57},[47,718,719,722,724,726,728,730,733,735,738,740,742,744,746,748,750,752,754,756,758,760,762,764,766,768,770,772,774,776,778,780,782,784,786,788],{"class":49,"line":149},[47,720,721],{"class":53},".shadow-5",[47,723,425],{"class":57},[47,725,21],{"class":64},[47,727,430],{"class":57},[47,729,95],{"class":64},[47,731,732],{"class":64}," 30",[47,734,81],{"class":80},[47,736,737],{"class":64}," 60",[47,739,81],{"class":80},[47,741,89],{"class":64},[47,743,92],{"class":57},[47,745,95],{"class":64},[47,747,449],{"class":57},[47,749,95],{"class":64},[47,751,449],{"class":57},[47,753,95],{"class":64},[47,755,449],{"class":57},[47,757,493],{"class":64},[47,759,463],{"class":57},[47,761,95],{"class":64},[47,763,586],{"class":64},[47,765,81],{"class":80},[47,767,591],{"class":64},[47,769,81],{"class":80},[47,771,89],{"class":64},[47,773,92],{"class":57},[47,775,95],{"class":64},[47,777,449],{"class":57},[47,779,95],{"class":64},[47,781,449],{"class":57},[47,783,95],{"class":64},[47,785,449],{"class":57},[47,787,568],{"class":64},[47,789,496],{"class":57},[10,791,793],{"id":792},"directional-light-shadows","Directional Light Shadows",[15,795,796],{},"Set a consistent light source direction for all shadows in your design. The most common convention is top-left lighting (matching natural light from a window):",[38,798,800],{"className":40,"code":799,"language":42,"meta":43,"style":43},"\u002F* Top-left light direction *\u002F\n.top-left-shadow {\n  box-shadow:\n    -2px 2px 4px rgba(0, 0, 0, 0.05),\n    -4px 4px 8px rgba(0, 0, 0, 0.05),\n    -8px 8px 16px rgba(0, 0, 0, 0.05);\n}\n",[19,801,802,808,815,821,856,891,926],{"__ignoreMap":43},[47,803,804],{"class":49,"line":50},[47,805,807],{"class":806},"sJ8bj","\u002F* Top-left light direction *\u002F\n",[47,809,810,813],{"class":49,"line":61},[47,811,812],{"class":53},".top-left-shadow",[47,814,58],{"class":57},[47,816,817,819],{"class":49,"line":71},[47,818,65],{"class":64},[47,820,68],{"class":57},[47,822,823,826,828,830,832,834,836,838,840,842,844,846,848,850,852,854],{"class":49,"line":115},[47,824,825],{"class":64},"    -2",[47,827,81],{"class":80},[47,829,84],{"class":64},[47,831,81],{"class":80},[47,833,124],{"class":64},[47,835,81],{"class":80},[47,837,89],{"class":64},[47,839,92],{"class":57},[47,841,95],{"class":64},[47,843,98],{"class":57},[47,845,95],{"class":64},[47,847,98],{"class":57},[47,849,95],{"class":64},[47,851,98],{"class":57},[47,853,460],{"class":64},[47,855,112],{"class":57},[47,857,858,861,863,865,867,869,871,873,875,877,879,881,883,885,887,889],{"class":49,"line":149},[47,859,860],{"class":64},"    -4",[47,862,81],{"class":80},[47,864,124],{"class":64},[47,866,81],{"class":80},[47,868,158],{"class":64},[47,870,81],{"class":80},[47,872,89],{"class":64},[47,874,92],{"class":57},[47,876,95],{"class":64},[47,878,98],{"class":57},[47,880,95],{"class":64},[47,882,98],{"class":57},[47,884,95],{"class":64},[47,886,98],{"class":57},[47,888,460],{"class":64},[47,890,112],{"class":57},[47,892,893,896,898,900,902,904,906,908,910,912,914,916,918,920,922,924],{"class":49,"line":183},[47,894,895],{"class":64},"    -8",[47,897,81],{"class":80},[47,899,158],{"class":64},[47,901,81],{"class":80},[47,903,192],{"class":64},[47,905,81],{"class":80},[47,907,89],{"class":64},[47,909,92],{"class":57},[47,911,95],{"class":64},[47,913,98],{"class":57},[47,915,95],{"class":64},[47,917,98],{"class":57},[47,919,95],{"class":64},[47,921,98],{"class":57},[47,923,460],{"class":64},[47,925,283],{"class":57},[47,927,928],{"class":49,"line":217},[47,929,289],{"class":57},[15,931,932],{},"Once you commit to a light direction, apply it consistently across cards, dropdowns, modals, and tooltips. Mixed shadow directions break spatial coherence.",[10,934,936],{"id":935},"dark-mode-shadows","Dark Mode Shadows",[15,938,939],{},"Shadows behave differently on dark backgrounds. A shadow that reads clearly on white becomes invisible on dark surfaces because there's less contrast between the shadow and the background.",[294,941,943],{"id":942},"approach-1-colored-shadows","Approach 1: Colored Shadows",[15,945,946],{},"Use a darker version of the background color instead of black:",[38,948,950],{"className":40,"code":949,"language":42,"meta":43,"style":43},".dark .card {\n  box-shadow:\n    0 1px 2px rgba(0, 0, 0, 0.3),\n    0 4px 8px rgba(0, 0, 0, 0.2),\n    0 12px 24px rgba(0, 0, 0, 0.15);\n}\n",[19,951,952,962,968,1001,1034,1069],{"__ignoreMap":43},[47,953,954,957,960],{"class":49,"line":50},[47,955,956],{"class":53},".dark",[47,958,959],{"class":53}," .card",[47,961,58],{"class":57},[47,963,964,966],{"class":49,"line":61},[47,965,65],{"class":64},[47,967,68],{"class":57},[47,969,970,972,974,976,978,980,982,984,986,988,990,992,994,996,999],{"class":49,"line":71},[47,971,74],{"class":64},[47,973,77],{"class":64},[47,975,81],{"class":80},[47,977,84],{"class":64},[47,979,81],{"class":80},[47,981,89],{"class":64},[47,983,92],{"class":57},[47,985,95],{"class":64},[47,987,98],{"class":57},[47,989,95],{"class":64},[47,991,98],{"class":57},[47,993,95],{"class":64},[47,995,98],{"class":57},[47,997,998],{"class":64},"0.3",[47,1000,112],{"class":57},[47,1002,1003,1005,1007,1009,1011,1013,1015,1017,1019,1021,1023,1025,1027,1029,1032],{"class":49,"line":115},[47,1004,74],{"class":64},[47,1006,124],{"class":64},[47,1008,81],{"class":80},[47,1010,158],{"class":64},[47,1012,81],{"class":80},[47,1014,89],{"class":64},[47,1016,92],{"class":57},[47,1018,95],{"class":64},[47,1020,98],{"class":57},[47,1022,95],{"class":64},[47,1024,98],{"class":57},[47,1026,95],{"class":64},[47,1028,98],{"class":57},[47,1030,1031],{"class":64},"0.2",[47,1033,112],{"class":57},[47,1035,1036,1038,1041,1043,1046,1048,1050,1052,1054,1056,1058,1060,1062,1064,1067],{"class":49,"line":149},[47,1037,74],{"class":64},[47,1039,1040],{"class":64}," 12",[47,1042,81],{"class":80},[47,1044,1045],{"class":64}," 24",[47,1047,81],{"class":80},[47,1049,89],{"class":64},[47,1051,92],{"class":57},[47,1053,95],{"class":64},[47,1055,98],{"class":57},[47,1057,95],{"class":64},[47,1059,98],{"class":57},[47,1061,95],{"class":64},[47,1063,98],{"class":57},[47,1065,1066],{"class":64},"0.15",[47,1068,283],{"class":57},[47,1070,1071],{"class":49,"line":183},[47,1072,289],{"class":57},[15,1074,1075],{},"The opacity values are inverted relative to light mode — dark mode shadows need higher opacity to be visible.",[294,1077,1079],{"id":1078},"approach-2-inset-borders","Approach 2: Inset Borders",[15,1081,1082],{},"On very dark surfaces, subtle inset borders can replace shadows entirely:",[38,1084,1086],{"className":40,"code":1085,"language":42,"meta":43,"style":43},".dark .card {\n  box-shadow: none;\n  border: 1px solid rgba(255, 255, 255, 0.08);\n}\n",[19,1087,1088,1096,1107,1142],{"__ignoreMap":43},[47,1089,1090,1092,1094],{"class":49,"line":50},[47,1091,956],{"class":53},[47,1093,959],{"class":53},[47,1095,58],{"class":57},[47,1097,1098,1100,1102,1104],{"class":49,"line":61},[47,1099,65],{"class":64},[47,1101,430],{"class":57},[47,1103,340],{"class":64},[47,1105,1106],{"class":57},";\n",[47,1108,1109,1112,1114,1116,1118,1121,1123,1125,1128,1130,1132,1134,1136,1138,1140],{"class":49,"line":71},[47,1110,1111],{"class":64},"  border",[47,1113,430],{"class":57},[47,1115,348],{"class":64},[47,1117,81],{"class":80},[47,1119,1120],{"class":64}," solid",[47,1122,89],{"class":64},[47,1124,92],{"class":57},[47,1126,1127],{"class":64},"255",[47,1129,98],{"class":57},[47,1131,1127],{"class":64},[47,1133,98],{"class":57},[47,1135,1127],{"class":64},[47,1137,98],{"class":57},[47,1139,568],{"class":64},[47,1141,283],{"class":57},[47,1143,1144],{"class":49,"line":115},[47,1145,289],{"class":57},[15,1147,1148],{},"This approach is often more reliable than shadows on near-black backgrounds.",[10,1150,1152],{"id":1151},"colored-shadows-for-brand-accents","Colored Shadows for Brand Accents",[15,1154,1155],{},"Match shadow color to the element's background for a cohesive glow effect:",[38,1157,1159],{"className":40,"code":1158,"language":42,"meta":43,"style":43},".blue-button {\n  background: #3b82f6;\n  box-shadow:\n    0 4px 6px rgba(59, 130, 246, 0.2),\n    0 10px 20px rgba(59, 130, 246, 0.15);\n}\n\n.green-card {\n  background: white;\n  border-top: 3px solid #10b981;\n  box-shadow:\n    0 4px 6px rgba(16, 185, 129, 0.1),\n    0 10px 20px rgba(16, 185, 129, 0.08);\n}\n",[19,1160,1161,1168,1180,1186,1221,1253,1257,1263,1270,1281,1300,1307,1343,1376],{"__ignoreMap":43},[47,1162,1163,1166],{"class":49,"line":50},[47,1164,1165],{"class":53},".blue-button",[47,1167,58],{"class":57},[47,1169,1170,1173,1175,1178],{"class":49,"line":61},[47,1171,1172],{"class":64},"  background",[47,1174,430],{"class":57},[47,1176,1177],{"class":64},"#3b82f6",[47,1179,1106],{"class":57},[47,1181,1182,1184],{"class":49,"line":71},[47,1183,65],{"class":64},[47,1185,68],{"class":57},[47,1187,1188,1190,1192,1194,1196,1198,1200,1202,1205,1207,1210,1212,1215,1217,1219],{"class":49,"line":115},[47,1189,74],{"class":64},[47,1191,124],{"class":64},[47,1193,81],{"class":80},[47,1195,516],{"class":64},[47,1197,81],{"class":80},[47,1199,89],{"class":64},[47,1201,92],{"class":57},[47,1203,1204],{"class":64},"59",[47,1206,98],{"class":57},[47,1208,1209],{"class":64},"130",[47,1211,98],{"class":57},[47,1213,1214],{"class":64},"246",[47,1216,98],{"class":57},[47,1218,1031],{"class":64},[47,1220,112],{"class":57},[47,1222,1223,1225,1227,1229,1231,1233,1235,1237,1239,1241,1243,1245,1247,1249,1251],{"class":49,"line":149},[47,1224,74],{"class":64},[47,1226,586],{"class":64},[47,1228,81],{"class":80},[47,1230,591],{"class":64},[47,1232,81],{"class":80},[47,1234,89],{"class":64},[47,1236,92],{"class":57},[47,1238,1204],{"class":64},[47,1240,98],{"class":57},[47,1242,1209],{"class":64},[47,1244,98],{"class":57},[47,1246,1214],{"class":64},[47,1248,98],{"class":57},[47,1250,1066],{"class":64},[47,1252,283],{"class":57},[47,1254,1255],{"class":49,"line":183},[47,1256,289],{"class":57},[47,1258,1259],{"class":49,"line":217},[47,1260,1262],{"emptyLinePlaceholder":1261},true,"\n",[47,1264,1265,1268],{"class":49,"line":251},[47,1266,1267],{"class":53},".green-card",[47,1269,58],{"class":57},[47,1271,1272,1274,1276,1279],{"class":49,"line":286},[47,1273,1172],{"class":64},[47,1275,430],{"class":57},[47,1277,1278],{"class":64},"white",[47,1280,1106],{"class":57},[47,1282,1284,1287,1289,1291,1293,1295,1298],{"class":49,"line":1283},10,[47,1285,1286],{"class":64},"  border-top",[47,1288,430],{"class":57},[47,1290,374],{"class":64},[47,1292,81],{"class":80},[47,1294,1120],{"class":64},[47,1296,1297],{"class":64}," #10b981",[47,1299,1106],{"class":57},[47,1301,1303,1305],{"class":49,"line":1302},11,[47,1304,65],{"class":64},[47,1306,68],{"class":57},[47,1308,1310,1312,1314,1316,1318,1320,1322,1324,1327,1329,1332,1334,1337,1339,1341],{"class":49,"line":1309},12,[47,1311,74],{"class":64},[47,1313,124],{"class":64},[47,1315,81],{"class":80},[47,1317,516],{"class":64},[47,1319,81],{"class":80},[47,1321,89],{"class":64},[47,1323,92],{"class":57},[47,1325,1326],{"class":64},"16",[47,1328,98],{"class":57},[47,1330,1331],{"class":64},"185",[47,1333,98],{"class":57},[47,1335,1336],{"class":64},"129",[47,1338,98],{"class":57},[47,1340,493],{"class":64},[47,1342,112],{"class":57},[47,1344,1346,1348,1350,1352,1354,1356,1358,1360,1362,1364,1366,1368,1370,1372,1374],{"class":49,"line":1345},13,[47,1347,74],{"class":64},[47,1349,586],{"class":64},[47,1351,81],{"class":80},[47,1353,591],{"class":64},[47,1355,81],{"class":80},[47,1357,89],{"class":64},[47,1359,92],{"class":57},[47,1361,1326],{"class":64},[47,1363,98],{"class":57},[47,1365,1331],{"class":64},[47,1367,98],{"class":57},[47,1369,1336],{"class":64},[47,1371,98],{"class":57},[47,1373,568],{"class":64},[47,1375,283],{"class":57},[47,1377,1379],{"class":49,"line":1378},14,[47,1380,289],{"class":57},[15,1382,1383],{},"Colored shadows work best when the tint is subtle — high-opacity colored shadows look artificial.",[10,1385,1387],{"id":1386},"hover-transitions","Hover Transitions",[15,1389,1390],{},"Animate shadows on interaction to create a sense of lifting:",[38,1392,1394],{"className":40,"code":1393,"language":42,"meta":43,"style":43},".card {\n  transition: box-shadow 0.2s ease, transform 0.2s ease;\n  box-shadow:\n    0 1px 2px rgba(0, 0, 0, 0.05),\n    0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.card:hover {\n  transform: translateY(-2px);\n  box-shadow:\n    0 4px 8px rgba(0, 0, 0, 0.06),\n    0 3px 6px rgba(0, 0, 0, 0.08);\n}\n",[19,1395,1396,1403,1430,1436,1468,1500,1504,1508,1515,1534,1540,1572,1604],{"__ignoreMap":43},[47,1397,1398,1401],{"class":49,"line":50},[47,1399,1400],{"class":53},".card",[47,1402,58],{"class":57},[47,1404,1405,1408,1411,1413,1416,1419,1422,1424,1426,1428],{"class":49,"line":61},[47,1406,1407],{"class":64},"  transition",[47,1409,1410],{"class":57},": box-shadow ",[47,1412,1031],{"class":64},[47,1414,1415],{"class":80},"s",[47,1417,1418],{"class":64}," ease",[47,1420,1421],{"class":57},", transform ",[47,1423,1031],{"class":64},[47,1425,1415],{"class":80},[47,1427,1418],{"class":64},[47,1429,1106],{"class":57},[47,1431,1432,1434],{"class":49,"line":71},[47,1433,65],{"class":64},[47,1435,68],{"class":57},[47,1437,1438,1440,1442,1444,1446,1448,1450,1452,1454,1456,1458,1460,1462,1464,1466],{"class":49,"line":115},[47,1439,74],{"class":64},[47,1441,77],{"class":64},[47,1443,81],{"class":80},[47,1445,84],{"class":64},[47,1447,81],{"class":80},[47,1449,89],{"class":64},[47,1451,92],{"class":57},[47,1453,95],{"class":64},[47,1455,98],{"class":57},[47,1457,95],{"class":64},[47,1459,98],{"class":57},[47,1461,95],{"class":64},[47,1463,98],{"class":57},[47,1465,460],{"class":64},[47,1467,112],{"class":57},[47,1469,1470,1472,1474,1476,1478,1480,1482,1484,1486,1488,1490,1492,1494,1496,1498],{"class":49,"line":149},[47,1471,74],{"class":64},[47,1473,77],{"class":64},[47,1475,81],{"class":80},[47,1477,472],{"class":64},[47,1479,81],{"class":80},[47,1481,89],{"class":64},[47,1483,92],{"class":57},[47,1485,95],{"class":64},[47,1487,98],{"class":57},[47,1489,95],{"class":64},[47,1491,98],{"class":57},[47,1493,95],{"class":64},[47,1495,98],{"class":57},[47,1497,493],{"class":64},[47,1499,283],{"class":57},[47,1501,1502],{"class":49,"line":183},[47,1503,289],{"class":57},[47,1505,1506],{"class":49,"line":217},[47,1507,1262],{"emptyLinePlaceholder":1261},[47,1509,1510,1513],{"class":49,"line":251},[47,1511,1512],{"class":53},".card:hover",[47,1514,58],{"class":57},[47,1516,1517,1520,1522,1525,1527,1530,1532],{"class":49,"line":286},[47,1518,1519],{"class":64},"  transform",[47,1521,430],{"class":57},[47,1523,1524],{"class":64},"translateY",[47,1526,92],{"class":57},[47,1528,1529],{"class":64},"-2",[47,1531,81],{"class":80},[47,1533,283],{"class":57},[47,1535,1536,1538],{"class":49,"line":1283},[47,1537,65],{"class":64},[47,1539,68],{"class":57},[47,1541,1542,1544,1546,1548,1550,1552,1554,1556,1558,1560,1562,1564,1566,1568,1570],{"class":49,"line":1302},[47,1543,74],{"class":64},[47,1545,124],{"class":64},[47,1547,81],{"class":80},[47,1549,158],{"class":64},[47,1551,81],{"class":80},[47,1553,89],{"class":64},[47,1555,92],{"class":57},[47,1557,95],{"class":64},[47,1559,98],{"class":57},[47,1561,95],{"class":64},[47,1563,98],{"class":57},[47,1565,95],{"class":64},[47,1567,98],{"class":57},[47,1569,537],{"class":64},[47,1571,112],{"class":57},[47,1573,1574,1576,1578,1580,1582,1584,1586,1588,1590,1592,1594,1596,1598,1600,1602],{"class":49,"line":1309},[47,1575,74],{"class":64},[47,1577,472],{"class":64},[47,1579,81],{"class":80},[47,1581,516],{"class":64},[47,1583,81],{"class":80},[47,1585,89],{"class":64},[47,1587,92],{"class":57},[47,1589,95],{"class":64},[47,1591,98],{"class":57},[47,1593,95],{"class":64},[47,1595,98],{"class":57},[47,1597,95],{"class":64},[47,1599,98],{"class":57},[47,1601,568],{"class":64},[47,1603,283],{"class":57},[47,1605,1606],{"class":49,"line":1345},[47,1607,289],{"class":57},[15,1609,1610,1611,1613],{},"The slight ",[19,1612,1524],{}," reinforces the illusion of lifting away from the surface.",[10,1615,1617],{"id":1616},"related-guides","Related Guides",[1619,1620,1621,1629,1635],"ul",{},[1622,1623,1624],"li",{},[1625,1626,1628],"a",{"href":1627},"\u002Fguides\u002Fcss-box-shadow-guide","CSS Box Shadow Guide",[1622,1630,1631],{},[1625,1632,1634],{"href":1633},"\u002Fguides\u002Fcss-drop-shadow-tutorial","CSS Drop Shadow Tutorial",[1622,1636,1637],{},[1625,1638,1640],{"href":1639},"\u002Fguides\u002Fcss-neumorphism-guide","Neumorphism in CSS",[10,1642,1644],{"id":1643},"try-it-yourself","Try It Yourself",[15,1646,1647],{},"Design realistic, layered shadows visually. Adjust offset, blur, spread, and opacity for each layer with our interactive box-shadow generator.",[15,1649,1650,1651],{},"👉 ",[1625,1652,1654],{"href":1653},"\u002Ftools\u002Fcss-box-shadow",[1655,1656,1657],"strong",{},"Box Shadow Generator",[1659,1660,1661],"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}",{"title":43,"searchDepth":61,"depth":61,"links":1663},[1664,1665,1668,1671,1672,1676,1677,1678,1679],{"id":12,"depth":61,"text":13},{"id":32,"depth":61,"text":33,"children":1666},[1667],{"id":296,"depth":71,"text":297},{"id":306,"depth":61,"text":307,"children":1669},[1670],{"id":411,"depth":71,"text":412},{"id":792,"depth":61,"text":793},{"id":935,"depth":61,"text":936,"children":1673},[1674,1675],{"id":942,"depth":71,"text":943},{"id":1078,"depth":71,"text":1079},{"id":1151,"depth":61,"text":1152},{"id":1386,"depth":61,"text":1387},{"id":1616,"depth":61,"text":1617},{"id":1643,"depth":61,"text":1644},"2026-05-28","Techniques for layered, natural-looking shadows that mimic real-world light sources.","md",{"immutable":1261},"\u002Fguides\u002Frealistic-css-shadows",{"title":5,"description":1681},"guides\u002Frealistic-css-shadows","rAzYGeD-rSs9UItL0DRbbfCE73KybDZeGuHSUfk-EsU",1780401336507]