[{"data":1,"prerenderedAt":1357},["ShallowReactive",2],{"guide-css-drop-shadow-tutorial":3},{"id":4,"title":5,"body":6,"date":1346,"description":1347,"extension":1348,"meta":1349,"navigation":216,"path":1353,"readingTime":226,"seo":1354,"stem":1355,"__hash__":1356},"guides\u002Fguides\u002Fcss-drop-shadow-tutorial.md","CSS Drop Shadow Tutorial: box-shadow vs filter: drop-shadow()",{"type":7,"value":8,"toc":1322},"minimark",[9,14,27,31,49,106,109,113,126,280,289,293,304,420,426,430,439,443,466,534,540,570,574,583,683,697,701,708,749,754,787,791,799,816,819,936,940,943,1026,1029,1033,1037,1055,1058,1062,1073,1135,1139,1148,1152,1230,1238,1242,1278,1282,1291,1295,1318],[10,11,13],"h2",{"id":12},"two-ways-to-add-shadows","Two Ways to Add Shadows",[15,16,17,18,22,23,26],"p",{},"CSS offers two shadow mechanisms: ",[19,20,21],"code",{},"box-shadow"," and ",[19,24,25],{},"filter: drop-shadow()",". They look similar but behave differently in ways that directly affect your design. Picking the wrong one leads to rectangular shadows behind transparent pixels, clipped effects on irregular shapes, or confusing double-shadow artifacts.",[10,28,30],{"id":29},"box-shadow-vs-drop-shadow","Box Shadow vs. Drop Shadow",[15,32,33,34,38,39,41,42,44,45,48],{},"The core difference is ",[35,36,37],"strong",{},"shape",". ",[19,40,21],{}," follows the rectangular bounding box of an element. ",[19,43,25],{}," follows the ",[35,46,47],{},"visible alpha contour"," — the actual rendered pixels.",[50,51,52,71],"table",{},[53,54,55],"thead",{},[56,57,58,62,65,68],"tr",{},[59,60,61],"th",{},"Property",[59,63,64],{},"Follows",[59,66,67],{},"Ignores",[59,69,70],{},"Best For",[72,73,74,90],"tbody",{},[56,75,76,81,84,87],{},[77,78,79],"td",{},[19,80,21],{},[77,82,83],{},"Element bounding box",[77,85,86],{},"Alpha transparency",[77,88,89],{},"Cards, buttons, containers",[56,91,92,97,100,103],{},[77,93,94],{},[19,95,96],{},"drop-shadow()",[77,98,99],{},"Visible alpha contour",[77,101,102],{},"Bounding box geometry",[77,104,105],{},"PNG icons, clip-path shapes, SVG graphics",[15,107,108],{},"When the element is a plain rectangle, both produce identical output. The divergence starts as soon as transparency enters the picture.",[10,110,112],{"id":111},"when-drop-shadow-follows-shape","When Drop Shadow Follows Shape",[15,114,115,116,118,119,122,123,125],{},"This is the killer feature of ",[19,117,96],{},". If your element has transparent pixels — a PNG icon with a transparent background, an SVG with open areas, a ",[19,120,121],{},"clip-path"," cutout, or a rotated element — ",[19,124,96],{}," traces the actual visible outline.",[127,128,133],"pre",{"className":129,"code":130,"language":131,"meta":132,"style":132},"language-css shiki shiki-themes github-light github-dark","\u002F* box-shadow — shadows the full rectangle *\u002F\n.icon {\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);\n}\n\n\u002F* drop-shadow — shadows only the opaque pixels *\u002F\n.icon {\n  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));\n}\n","css","",[19,134,135,144,155,205,211,218,224,231,275],{"__ignoreMap":132},[136,137,140],"span",{"class":138,"line":139},"line",1,[136,141,143],{"class":142},"sJ8bj","\u002F* box-shadow — shadows the full rectangle *\u002F\n",[136,145,147,151],{"class":138,"line":146},2,[136,148,150],{"class":149},"sScJk",".icon",[136,152,154],{"class":153},"sVt8B"," {\n",[136,156,158,162,165,168,171,175,178,180,183,186,188,191,193,195,197,199,202],{"class":138,"line":157},3,[136,159,161],{"class":160},"sj4cs","  box-shadow",[136,163,164],{"class":153},": ",[136,166,167],{"class":160},"0",[136,169,170],{"class":160}," 4",[136,172,174],{"class":173},"szBVR","px",[136,176,177],{"class":160}," 8",[136,179,174],{"class":173},[136,181,182],{"class":160}," rgba",[136,184,185],{"class":153},"(",[136,187,167],{"class":160},[136,189,190],{"class":153},", ",[136,192,167],{"class":160},[136,194,190],{"class":153},[136,196,167],{"class":160},[136,198,190],{"class":153},[136,200,201],{"class":160},"0.3",[136,203,204],{"class":153},");\n",[136,206,208],{"class":138,"line":207},4,[136,209,210],{"class":153},"}\n",[136,212,214],{"class":138,"line":213},5,[136,215,217],{"emptyLinePlaceholder":216},true,"\n",[136,219,221],{"class":138,"line":220},6,[136,222,223],{"class":142},"\u002F* drop-shadow — shadows only the opaque pixels *\u002F\n",[136,225,227,229],{"class":138,"line":226},7,[136,228,150],{"class":149},[136,230,154],{"class":153},[136,232,234,237,239,242,244,246,248,250,252,254,256,258,260,262,264,266,268,270,272],{"class":138,"line":233},8,[136,235,236],{"class":160},"  filter",[136,238,164],{"class":153},[136,240,241],{"class":160},"drop-shadow",[136,243,185],{"class":153},[136,245,167],{"class":160},[136,247,170],{"class":160},[136,249,174],{"class":173},[136,251,177],{"class":160},[136,253,174],{"class":173},[136,255,182],{"class":160},[136,257,185],{"class":153},[136,259,167],{"class":160},[136,261,190],{"class":153},[136,263,167],{"class":160},[136,265,190],{"class":153},[136,267,167],{"class":160},[136,269,190],{"class":153},[136,271,201],{"class":160},[136,273,274],{"class":153},"));\n",[136,276,278],{"class":138,"line":277},9,[136,279,210],{"class":153},[15,281,282,283,285,286,288],{},"Apply both to a hamburger menu icon. ",[19,284,21],{}," draws a rectangular shadow behind the transparent gaps between the lines. ",[19,287,96],{}," casts a shadow that traces each line individually — the result looks correct.",[10,290,292],{"id":291},"clip-path-shapes","Clip-Path Shapes",[15,294,295,297,298,300,301,303],{},[19,296,121],{}," removes visual pixels but leaves the bounding box intact. ",[19,299,21],{}," renders on the full rectangle; ",[19,302,96],{}," respects the clip.",[127,305,307],{"className":129,"code":306,"language":131,"meta":132,"style":132},".arrow {\n  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);\n  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3));\n}\n",[19,308,309,316,374,416],{"__ignoreMap":132},[136,310,311,314],{"class":138,"line":139},[136,312,313],{"class":149},".arrow",[136,315,154],{"class":153},[136,317,318,321,323,326,328,331,334,337,339,341,344,346,349,351,353,355,357,360,362,364,366,368,370,372],{"class":138,"line":146},[136,319,320],{"class":160},"  clip-path",[136,322,164],{"class":153},[136,324,325],{"class":160},"polygon",[136,327,185],{"class":153},[136,329,330],{"class":160},"50",[136,332,333],{"class":173},"%",[136,335,336],{"class":160}," 0",[136,338,333],{"class":173},[136,340,190],{"class":153},[136,342,343],{"class":160},"100",[136,345,333],{"class":173},[136,347,348],{"class":160}," 50",[136,350,333],{"class":173},[136,352,190],{"class":153},[136,354,330],{"class":160},[136,356,333],{"class":173},[136,358,359],{"class":160}," 100",[136,361,333],{"class":173},[136,363,190],{"class":153},[136,365,167],{"class":160},[136,367,333],{"class":173},[136,369,348],{"class":160},[136,371,333],{"class":173},[136,373,204],{"class":153},[136,375,376,378,380,382,384,386,389,391,394,396,398,400,402,404,406,408,410,412,414],{"class":138,"line":157},[136,377,236],{"class":160},[136,379,164],{"class":153},[136,381,241],{"class":160},[136,383,185],{"class":153},[136,385,167],{"class":160},[136,387,388],{"class":160}," 6",[136,390,174],{"class":173},[136,392,393],{"class":160}," 10",[136,395,174],{"class":173},[136,397,182],{"class":160},[136,399,185],{"class":153},[136,401,167],{"class":160},[136,403,190],{"class":153},[136,405,167],{"class":160},[136,407,190],{"class":153},[136,409,167],{"class":160},[136,411,190],{"class":153},[136,413,201],{"class":160},[136,415,274],{"class":153},[136,417,418],{"class":138,"line":207},[136,419,210],{"class":153},[15,421,422,423,425],{},"Using ",[19,424,21],{}," here would produce a rectangular shadow behind a diamond shape — clearly wrong.",[10,427,429],{"id":428},"svg-and-transparent-pngs","SVG and Transparent PNGs",[15,431,432,433,435,436,438],{},"SVGs often contain shapes with empty space between elements. A logo with cutout letterforms, an icon with a transparent center — ",[19,434,21],{}," fills those gaps with shadow paint. ",[19,437,96],{}," follows the inked pixels precisely.",[10,440,442],{"id":441},"drop-shadow-syntax","Drop Shadow Syntax",[127,444,446],{"className":129,"code":445,"language":131,"meta":132,"style":132},"filter: drop-shadow(h-offset v-offset blur color);\n",[19,447,448],{"__ignoreMap":132},[136,449,450,454,457,460,463],{"class":138,"line":139},[136,451,453],{"class":452},"s9eBZ","filter",[136,455,456],{"class":153},": drop-shadow(",[136,458,459],{"class":452},"h-offset",[136,461,462],{"class":452}," v-offset",[136,464,465],{"class":153}," blur color);\n",[50,467,468,481],{},[53,469,470],{},[56,471,472,475,478],{},[59,473,474],{},"Value",[59,476,477],{},"Required",[59,479,480],{},"Notes",[72,482,483,495,507,521],{},[56,484,485,489,492],{},[77,486,487],{},[19,488,459],{},[77,490,491],{},"Yes",[77,493,494],{},"Positive shifts right, negative left",[56,496,497,502,504],{},[77,498,499],{},[19,500,501],{},"v-offset",[77,503,491],{},[77,505,506],{},"Positive shifts down, negative up",[56,508,509,514,516],{},[77,510,511],{},[19,512,513],{},"blur",[77,515,491],{},[77,517,518,519],{},"Must be specified — no zero default like ",[19,520,21],{},[56,522,523,528,531],{},[77,524,525],{},[19,526,527],{},"color",[77,529,530],{},"No (but recommended)",[77,532,533],{},"Browser default varies — always specify explicitly",[15,535,536,537,539],{},"Key differences from ",[19,538,21],{}," syntax:",[541,542,543,553,559],"ul",{},[544,545,546,549,550,552],"li",{},[35,547,548],{},"No spread value"," — ",[19,551,96],{}," cannot enlarge or shrink the shadow",[544,554,555,558],{},[35,556,557],{},"No inset keyword"," — inner shadows are not supported",[544,560,561,564,565,567,568],{},[35,562,563],{},"No multi-shadow"," — you cannot comma-separate multiple ",[19,566,96],{}," values in a single ",[19,569,453],{},[10,571,573],{"id":572},"stacking-multiple-drop-shadows","Stacking Multiple Drop Shadows",[15,575,576,577,579,580,582],{},"Chain ",[19,578,96],{}," calls within a single ",[19,581,453],{}," property to create layered effects:",[127,584,586],{"className":129,"code":585,"language":131,"meta":132,"style":132},".icon {\n  filter:\n    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1))\n    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));\n}\n",[19,587,588,594,601,642,679],{"__ignoreMap":132},[136,589,590,592],{"class":138,"line":139},[136,591,150],{"class":149},[136,593,154],{"class":153},[136,595,596,598],{"class":138,"line":146},[136,597,236],{"class":160},[136,599,600],{"class":153},":\n",[136,602,603,606,608,610,613,615,618,620,622,624,626,628,630,632,634,636,639],{"class":138,"line":157},[136,604,605],{"class":160},"    drop-shadow",[136,607,185],{"class":153},[136,609,167],{"class":160},[136,611,612],{"class":160}," 1",[136,614,174],{"class":173},[136,616,617],{"class":160}," 2",[136,619,174],{"class":173},[136,621,182],{"class":160},[136,623,185],{"class":153},[136,625,167],{"class":160},[136,627,190],{"class":153},[136,629,167],{"class":160},[136,631,190],{"class":153},[136,633,167],{"class":160},[136,635,190],{"class":153},[136,637,638],{"class":160},"0.1",[136,640,641],{"class":153},"))\n",[136,643,644,646,648,650,652,654,656,658,660,662,664,666,668,670,672,674,677],{"class":138,"line":207},[136,645,605],{"class":160},[136,647,185],{"class":153},[136,649,167],{"class":160},[136,651,170],{"class":160},[136,653,174],{"class":173},[136,655,177],{"class":160},[136,657,174],{"class":173},[136,659,182],{"class":160},[136,661,185],{"class":153},[136,663,167],{"class":160},[136,665,190],{"class":153},[136,667,167],{"class":160},[136,669,190],{"class":153},[136,671,167],{"class":160},[136,673,190],{"class":153},[136,675,676],{"class":160},"0.15",[136,678,274],{"class":153},[136,680,681],{"class":138,"line":213},[136,682,210],{"class":153},[15,684,685,686,688,689,693,694,696],{},"Each ",[19,687,96],{}," renders relative to the output of the previous filter. The second shadow is cast by the element ",[690,691,692],"em",{},"plus its first shadow"," — which subtly shifts the result compared to ",[19,695,21],{}," layering where each shadow casts independently from the element bounding box.",[10,698,700],{"id":699},"when-to-use-each","When to Use Each",[10,702,704,705,707],{"id":703},"use-box-shadow-when","Use ",[19,706,21],{}," When",[541,709,710,717,729,735,741],{},[544,711,712,713,716],{},"The element is a ",[35,714,715],{},"rectangle"," with no transparency concerns — cards, modals, inputs, buttons",[544,718,719,720,549,723,725,726],{},"You need ",[35,721,722],{},"inset shadows",[19,724,96],{}," does not support ",[19,727,728],{},"inset",[544,730,719,731,734],{},[35,732,733],{},"spread control"," — shrinking or growing the shadow shape",[544,736,719,737,740],{},[35,738,739],{},"multiple shadows"," with independent positioning — comma syntax is cleaner",[544,742,743,549,746,748],{},[35,744,745],{},"Performance is critical",[19,747,21],{}," composites more efficiently than filters",[10,750,704,752,707],{"id":751},"use-drop-shadow-when",[19,753,96],{},[541,755,756,763,771,778],{},[544,757,758,759,762],{},"The element has ",[35,760,761],{},"transparent regions"," — PNG\u002FSVG icons, logos with cutouts",[544,764,765,766,770],{},"The element uses ",[35,767,768],{},[19,769,121],{}," — clipped shapes need contour-following shadows",[544,772,773,774,777],{},"The element is ",[35,775,776],{},"transformed"," in ways that alter its rendered shape",[544,779,780,781,784,785],{},"You want a shadow around ",[35,782,783],{},"irregular borders"," — dashed or dotted borders cast uneven shadows with ",[19,786,21],{},[10,788,790],{"id":789},"inheritance-and-composition","Inheritance and Composition",[15,792,793,795,796,798],{},[19,794,453],{}," applies to the entire element and its subtree. A ",[19,797,453],{}," on a parent element affects all descendants as a composited group. This means:",[541,800,801,809],{},[544,802,803,808],{},[35,804,805,807],{},[19,806,96],{}," on a parent"," casts a single shadow around the combined alpha shape of the parent and all children — efficient for grouped elements",[544,810,811,815],{},[35,812,813,807],{},[19,814,21],{}," only shadows the parent bounding box — children may visually extend beyond the shadow",[15,817,818],{},"This distinction matters for icon groups, composite components, and card layouts with overflow content.",[127,820,822],{"className":129,"code":821,"language":131,"meta":132,"style":132},"\u002F* Single shadow around the whole group *\u002F\n.icon-group {\n  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));\n}\n\n\u002F* Shadow only on the container box — children extend beyond *\u002F\n.icon-group {\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n",[19,823,824,829,836,877,881,885,890,896,932],{"__ignoreMap":132},[136,825,826],{"class":138,"line":139},[136,827,828],{"class":142},"\u002F* Single shadow around the whole group *\u002F\n",[136,830,831,834],{"class":138,"line":146},[136,832,833],{"class":149},".icon-group",[136,835,154],{"class":153},[136,837,838,840,842,844,846,848,850,852,854,856,858,860,862,864,866,868,870,872,875],{"class":138,"line":157},[136,839,236],{"class":160},[136,841,164],{"class":153},[136,843,241],{"class":160},[136,845,185],{"class":153},[136,847,167],{"class":160},[136,849,170],{"class":160},[136,851,174],{"class":173},[136,853,177],{"class":160},[136,855,174],{"class":173},[136,857,182],{"class":160},[136,859,185],{"class":153},[136,861,167],{"class":160},[136,863,190],{"class":153},[136,865,167],{"class":160},[136,867,190],{"class":153},[136,869,167],{"class":160},[136,871,190],{"class":153},[136,873,874],{"class":160},"0.2",[136,876,274],{"class":153},[136,878,879],{"class":138,"line":207},[136,880,210],{"class":153},[136,882,883],{"class":138,"line":213},[136,884,217],{"emptyLinePlaceholder":216},[136,886,887],{"class":138,"line":220},[136,888,889],{"class":142},"\u002F* Shadow only on the container box — children extend beyond *\u002F\n",[136,891,892,894],{"class":138,"line":226},[136,893,833],{"class":149},[136,895,154],{"class":153},[136,897,898,900,902,904,906,908,910,912,914,916,918,920,922,924,926,928,930],{"class":138,"line":233},[136,899,161],{"class":160},[136,901,164],{"class":153},[136,903,167],{"class":160},[136,905,170],{"class":160},[136,907,174],{"class":173},[136,909,177],{"class":160},[136,911,174],{"class":173},[136,913,182],{"class":160},[136,915,185],{"class":153},[136,917,167],{"class":160},[136,919,190],{"class":153},[136,921,167],{"class":160},[136,923,190],{"class":153},[136,925,167],{"class":160},[136,927,190],{"class":153},[136,929,874],{"class":160},[136,931,204],{"class":153},[136,933,934],{"class":138,"line":277},[136,935,210],{"class":153},[10,937,939],{"id":938},"performance-comparison","Performance Comparison",[15,941,942],{},"Both properties are GPU-accelerated, but they compose differently:",[50,944,945,960],{},[53,946,947],{},[56,948,949,952,956],{},[59,950,951],{},"Factor",[59,953,954],{},[19,955,21],{},[59,957,958],{},[19,959,96],{},[72,961,962,973,986,1004,1015],{},[56,963,964,967,970],{},[77,965,966],{},"Compositing",[77,968,969],{},"Painted with the element layer",[77,971,972],{},"Applied as a filter — requires an extra compositing step",[56,974,975,978,981],{},[77,976,977],{},"Multiple shadows",[77,979,980],{},"Single paint operation",[77,982,685,983,985],{},[19,984,96],{}," is a separate filter pass",[56,987,988,991,1001],{},[77,989,990],{},"Animation",[77,992,993,994,997,998],{},"Smooth with ",[19,995,996],{},"transition"," or ",[19,999,1000],{},"@keyframes",[77,1002,1003],{},"Can trigger filter recalculation — test on low-end devices",[56,1005,1006,1009,1012],{},[77,1007,1008],{},"Large blur values",[77,1010,1011],{},"Efficient — rasterized at paint time",[77,1013,1014],{},"Expensive — blur radius multiplies compositing cost",[56,1016,1017,1020,1023],{},[77,1018,1019],{},"Alpha analysis",[77,1021,1022],{},"Not needed — rectangle is known",[77,1024,1025],{},"Browser must traverse pixel alpha to compute shape",[15,1027,1028],{},"For most UI elements, the performance gap is negligible. It matters only when you animate shadows on dozens of elements simultaneously or use blur radii beyond 40px.",[10,1030,1032],{"id":1031},"common-mistakes","Common Mistakes",[10,1034,1036],{"id":1035},"using-both-on-the-same-element","Using Both on the Same Element",[15,1038,1039,1040,22,1042,1044,1045,1047,1048,1051,1052,1054],{},"Applying ",[19,1041,21],{},[19,1043,96],{}," to the same element produces a shadow of a shadow. The ",[19,1046,96],{}," is cast from the painted output ",[690,1049,1050],{},"including"," the ",[19,1053,21],{},", resulting in a blurry, misaligned double shadow.",[15,1056,1057],{},"Pick one. Never combine both on the same element.",[10,1059,1061],{"id":1060},"forgetting-the-blur-value","Forgetting the Blur Value",[15,1063,1064,1066,1067,1069,1070,1072],{},[19,1065,21],{}," defaults blur to ",[19,1068,167],{}," if omitted. ",[19,1071,96],{}," does not — omitting blur is a syntax error or produces unexpected results depending on the browser.",[127,1074,1076],{"className":129,"code":1075,"language":131,"meta":132,"style":132},"\u002F* Valid box-shadow — blur defaults to 0 *\u002F\nbox-shadow: 4px 4px rgba(0, 0, 0, 0.2);\n\n\u002F* Invalid drop-shadow — blur is required *\u002F\nfilter: drop-shadow(4px 4px rgba(0, 0, 0, 0.2));\n\n\u002F* Correct *\u002F\nfilter: drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.2));\n",[19,1077,1078,1083,1095,1099,1104,1115,1119,1124],{"__ignoreMap":132},[136,1079,1080],{"class":138,"line":139},[136,1081,1082],{"class":142},"\u002F* Valid box-shadow — blur defaults to 0 *\u002F\n",[136,1084,1085,1087,1090,1093],{"class":138,"line":146},[136,1086,21],{"class":452},[136,1088,1089],{"class":153},": 4px 4px rgba(0, 0, 0, 0",[136,1091,1092],{"class":149},".2",[136,1094,204],{"class":153},[136,1096,1097],{"class":138,"line":157},[136,1098,217],{"emptyLinePlaceholder":216},[136,1100,1101],{"class":138,"line":207},[136,1102,1103],{"class":142},"\u002F* Invalid drop-shadow — blur is required *\u002F\n",[136,1105,1106,1108,1111,1113],{"class":138,"line":213},[136,1107,453],{"class":452},[136,1109,1110],{"class":153},": drop-shadow(4px 4px rgba(0, 0, 0, 0",[136,1112,1092],{"class":149},[136,1114,274],{"class":153},[136,1116,1117],{"class":138,"line":220},[136,1118,217],{"emptyLinePlaceholder":216},[136,1120,1121],{"class":138,"line":226},[136,1122,1123],{"class":142},"\u002F* Correct *\u002F\n",[136,1125,1126,1128,1131,1133],{"class":138,"line":233},[136,1127,453],{"class":452},[136,1129,1130],{"class":153},": drop-shadow(4px 4px 0px rgba(0, 0, 0, 0",[136,1132,1092],{"class":149},[136,1134,274],{"class":153},[10,1136,1138],{"id":1137},"drop-shadow-on-dense-layouts","Drop Shadow on Dense Layouts",[15,1140,1141,1142,1144,1145,1147],{},"Because ",[19,1143,96],{}," follows the alpha shape, it can produce visually noisy shadows on elements with many small transparent gaps — like text with letter-spacing or elements with detailed SVG patterns. For these cases, ",[19,1146,21],{}," on a wrapper element often produces a cleaner result.",[10,1149,1151],{"id":1150},"browser-support","Browser Support",[50,1153,1154,1173],{},[53,1155,1156],{},[56,1157,1158,1161,1164,1167,1170],{},[59,1159,1160],{},"Feature",[59,1162,1163],{},"Chrome",[59,1165,1166],{},"Firefox",[59,1168,1169],{},"Safari",[59,1171,1172],{},"Edge",[72,1174,1175,1193,1210],{},[56,1176,1177,1181,1184,1187,1190],{},[77,1178,1179],{},[19,1180,21],{},[77,1182,1183],{},"10+",[77,1185,1186],{},"4+",[77,1188,1189],{},"5.1+",[77,1191,1192],{},"12+",[56,1194,1195,1199,1202,1205,1208],{},[77,1196,1197],{},[19,1198,25],{},[77,1200,1201],{},"53+",[77,1203,1204],{},"35+",[77,1206,1207],{},"9.1+",[77,1209,1192],{},[56,1211,1212,1218,1221,1224,1227],{},[77,1213,1214,1217],{},[19,1215,1216],{},"backdrop-filter"," (glass)",[77,1219,1220],{},"76+",[77,1222,1223],{},"103+",[77,1225,1226],{},"9+",[77,1228,1229],{},"17+",[15,1231,1232,1234,1235,1237],{},[19,1233,96],{}," has slightly newer support than ",[19,1236,21],{},", but both work in all modern browsers. No prefixes are needed.",[10,1239,1241],{"id":1240},"key-takeaways","Key Takeaways",[541,1243,1244,1252,1257,1265,1270,1275],{},[544,1245,1246,1248,1249,1251],{},[19,1247,21],{}," follows the bounding box; ",[19,1250,96],{}," follows the alpha contour — this is the deciding factor",[544,1253,1254,1256],{},[19,1255,96],{}," has no spread, no inset, and no multi-shadow comma syntax",[544,1258,576,1259,1261,1262,1264],{},[19,1260,96],{}," calls in a single ",[19,1263,453],{}," to stack alpha-aware shadows",[544,1266,704,1267,1269],{},[19,1268,96],{}," for PNG\u002FSVG icons, clip-path shapes, and irregular forms",[544,1271,704,1272,1274],{},[19,1273,21],{}," for rectangular elements, inset effects, spread control, and better composition performance",[544,1276,1277],{},"Never combine both on the same element — pick one",[10,1279,1281],{"id":1280},"try-it-yourself","Try It Yourself",[15,1283,1284,1285,1290],{},"Build and compare both shadow types in our ",[1286,1287,1289],"a",{"href":1288},"\u002Ftools\u002Fcss-box-shadow","CSS Box Shadow Generator",". Experiment with offset, blur, and color values — then copy the generated code directly into your project.",[10,1292,1294],{"id":1293},"related-guides","Related Guides",[541,1296,1297,1304,1311],{},[544,1298,1299,1303],{},[1286,1300,1302],{"href":1301},"\u002Fguides\u002Fcss-box-shadow-guide","CSS Box Shadow Guide"," — Master offset, blur, spread, inset, and multi-layer shadow patterns",[544,1305,1306,1310],{},[1286,1307,1309],{"href":1308},"\u002Fguides\u002Fcss-visual-effects","CSS Visual Effects"," — Combine shadows with gradients, glow effects, and glass morphism for modern UI",[544,1312,1313,1317],{},[1286,1314,1316],{"href":1315},"\u002Fguides\u002Fcss-design-tips","CSS Design Tips"," — Practical techniques for pairing shadows with gradients and color",[1319,1320,1321],"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);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":132,"searchDepth":146,"depth":146,"links":1323},[1324,1325,1326,1327,1328,1329,1330,1331,1332,1334,1336,1337,1338,1339,1340,1341,1342,1343,1344,1345],{"id":12,"depth":146,"text":13},{"id":29,"depth":146,"text":30},{"id":111,"depth":146,"text":112},{"id":291,"depth":146,"text":292},{"id":428,"depth":146,"text":429},{"id":441,"depth":146,"text":442},{"id":572,"depth":146,"text":573},{"id":699,"depth":146,"text":700},{"id":703,"depth":146,"text":1333},"Use box-shadow When",{"id":751,"depth":146,"text":1335},"Use drop-shadow() When",{"id":789,"depth":146,"text":790},{"id":938,"depth":146,"text":939},{"id":1031,"depth":146,"text":1032},{"id":1035,"depth":146,"text":1036},{"id":1060,"depth":146,"text":1061},{"id":1137,"depth":146,"text":1138},{"id":1150,"depth":146,"text":1151},{"id":1240,"depth":146,"text":1241},{"id":1280,"depth":146,"text":1281},{"id":1293,"depth":146,"text":1294},"2026-05-28","Compare CSS box-shadow and filter drop-shadow(). Learn when to use each for images, SVG, and UI elements.","md",{"immutable":216,"keywords":1350},[1351,1352],"css-box-shadow","css-drop-shadow-tutorial","\u002Fguides\u002Fcss-drop-shadow-tutorial",{"title":5,"description":1347},"guides\u002Fcss-drop-shadow-tutorial","8pWGVd-b4GgvUQqEhC8EueBaB16kDa7k02nEo8UUgG0",1780401328572]