[{"data":1,"prerenderedAt":1301},["ShallowReactive",2],{"page-\u002Fcss\u002F14-filters-blend-modes-and-masking":3},{"id":4,"title":5,"body":6,"description":1294,"extension":1295,"meta":1296,"navigation":849,"path":1297,"seo":1298,"stem":1299,"__hash__":1300},"content\u002Fcss\u002F14-filters-blend-modes-and-masking.md","14 — Filters, Blend Modes & Masking: Compositing Pipeline",{"type":7,"value":8,"toc":1278},"minimark",[9,13,34,41,353,363,483,489,633,638,697,768,772,913,921,1014,1018,1089,1093,1182,1186,1247,1274],[10,11,5],"h1",{"id":12},"_14-filters-blend-modes-masking-compositing-pipeline",[14,15,16,20,21,24,25,29,30,33],"p",{},[17,18,19],"code",{},"filter"," applies Photoshop-like effects to an element. ",[17,22,23],{},"backdrop-filter"," filters the content ",[26,27,28],"em",{},"behind"," an element (glassmorphism). ",[17,31,32],{},"mix-blend-mode"," blends an element with its backdrop. All three create stacking contexts — that's the trap.",[35,36,38,40],"h2",{"id":37},"filter-graphical-effects",[17,39,19],{}," — graphical effects",[42,43,45],"code-wrapper",{"language":44},"css",[46,47,51],"pre",{"className":48,"code":49,"language":44,"meta":50,"style":50},"language-css shiki shiki-themes github-light github-dark",".img { filter: blur(5px); }\n.img { filter: brightness(1.5); }    \u002F* 0=black, 1=normal, 2=2x bright *\u002F\n.img { filter: contrast(2); }\n.img { filter: grayscale(1); }       \u002F* 0=color, 1=gray *\u002F\n.img { filter: hue-rotate(90deg); }  \u002F* theming without re-exporting assets *\u002F\n.img { filter: invert(1); }\n.img { filter: saturate(2); }\n.img { filter: sepia(1); }\n.img { filter: drop-shadow(4px 4px 10px rgba(0,0,0,0.5));  \u002F* follows the ALPHA SHAPE, not the box *\u002F\n.img { filter: grayscale(1) blur(2px) brightness(1.2); }  \u002F* chained: left to right *\u002F\n","",[17,52,53,88,114,135,160,188,208,228,248,307],{"__ignoreMap":50},[54,55,58,62,66,69,72,75,78,81,85],"span",{"class":56,"line":57},"line",1,[54,59,61],{"class":60},"sIsaT",".img",[54,63,65],{"class":64},"ssxIu"," { ",[54,67,19],{"class":68},"snvgF",[54,70,71],{"class":64},": ",[54,73,74],{"class":68},"blur",[54,76,77],{"class":64},"(",[54,79,80],{"class":68},"5",[54,82,84],{"class":83},"svdQ7","px",[54,86,87],{"class":64},"); }\n",[54,89,91,93,95,97,99,102,104,107,110],{"class":56,"line":90},2,[54,92,61],{"class":60},[54,94,65],{"class":64},[54,96,19],{"class":68},[54,98,71],{"class":64},[54,100,101],{"class":68},"brightness",[54,103,77],{"class":64},[54,105,106],{"class":68},"1.5",[54,108,109],{"class":64},"); }    ",[54,111,113],{"class":112},"sdCPZ","\u002F* 0=black, 1=normal, 2=2x bright *\u002F\n",[54,115,117,119,121,123,125,128,130,133],{"class":56,"line":116},3,[54,118,61],{"class":60},[54,120,65],{"class":64},[54,122,19],{"class":68},[54,124,71],{"class":64},[54,126,127],{"class":68},"contrast",[54,129,77],{"class":64},[54,131,132],{"class":68},"2",[54,134,87],{"class":64},[54,136,138,140,142,144,146,149,151,154,157],{"class":56,"line":137},4,[54,139,61],{"class":60},[54,141,65],{"class":64},[54,143,19],{"class":68},[54,145,71],{"class":64},[54,147,148],{"class":68},"grayscale",[54,150,77],{"class":64},[54,152,153],{"class":68},"1",[54,155,156],{"class":64},"); }       ",[54,158,159],{"class":112},"\u002F* 0=color, 1=gray *\u002F\n",[54,161,163,165,167,169,171,174,176,179,182,185],{"class":56,"line":162},5,[54,164,61],{"class":60},[54,166,65],{"class":64},[54,168,19],{"class":68},[54,170,71],{"class":64},[54,172,173],{"class":68},"hue-rotate",[54,175,77],{"class":64},[54,177,178],{"class":68},"90",[54,180,181],{"class":83},"deg",[54,183,184],{"class":64},"); }  ",[54,186,187],{"class":112},"\u002F* theming without re-exporting assets *\u002F\n",[54,189,191,193,195,197,199,202,204,206],{"class":56,"line":190},6,[54,192,61],{"class":60},[54,194,65],{"class":64},[54,196,19],{"class":68},[54,198,71],{"class":64},[54,200,201],{"class":68},"invert",[54,203,77],{"class":64},[54,205,153],{"class":68},[54,207,87],{"class":64},[54,209,211,213,215,217,219,222,224,226],{"class":56,"line":210},7,[54,212,61],{"class":60},[54,214,65],{"class":64},[54,216,19],{"class":68},[54,218,71],{"class":64},[54,220,221],{"class":68},"saturate",[54,223,77],{"class":64},[54,225,132],{"class":68},[54,227,87],{"class":64},[54,229,231,233,235,237,239,242,244,246],{"class":56,"line":230},8,[54,232,61],{"class":60},[54,234,65],{"class":64},[54,236,19],{"class":68},[54,238,71],{"class":64},[54,240,241],{"class":68},"sepia",[54,243,77],{"class":64},[54,245,153],{"class":68},[54,247,87],{"class":64},[54,249,251,253,255,257,259,262,264,267,269,272,274,277,279,282,284,287,290,292,294,296,298,301,304],{"class":56,"line":250},9,[54,252,61],{"class":60},[54,254,65],{"class":64},[54,256,19],{"class":68},[54,258,71],{"class":64},[54,260,261],{"class":68},"drop-shadow",[54,263,77],{"class":64},[54,265,266],{"class":68},"4",[54,268,84],{"class":83},[54,270,271],{"class":68}," 4",[54,273,84],{"class":83},[54,275,276],{"class":68}," 10",[54,278,84],{"class":83},[54,280,281],{"class":68}," rgba",[54,283,77],{"class":64},[54,285,286],{"class":68},"0",[54,288,289],{"class":64},",",[54,291,286],{"class":68},[54,293,289],{"class":64},[54,295,286],{"class":68},[54,297,289],{"class":64},[54,299,300],{"class":68},"0.5",[54,302,303],{"class":64},"));  ",[54,305,306],{"class":112},"\u002F* follows the ALPHA SHAPE, not the box *\u002F\n",[54,308,310,313,316,318,320,322,324,326,328,331,333,335,337,339,341,343,345,348,350],{"class":56,"line":309},10,[54,311,312],{"class":64},".",[54,314,315],{"class":68},"img",[54,317,65],{"class":64},[54,319,19],{"class":68},[54,321,71],{"class":64},[54,323,148],{"class":68},[54,325,77],{"class":64},[54,327,153],{"class":68},[54,329,330],{"class":64},") ",[54,332,74],{"class":68},[54,334,77],{"class":64},[54,336,132],{"class":68},[54,338,84],{"class":83},[54,340,330],{"class":64},[54,342,101],{"class":68},[54,344,77],{"class":64},[54,346,347],{"class":68},"1.2",[54,349,184],{"class":64},[54,351,352],{"class":112},"\u002F* chained: left to right *\u002F\n",[35,354,356,358,359,362],{"id":355},"drop-shadow-vs-box-shadow-shape-vs-box",[17,357,261],{}," vs ",[17,360,361],{},"box-shadow"," — shape vs box",[42,364,365],{"language":44},[46,366,368],{"className":48,"code":367,"language":44,"meta":50,"style":50},"\u002F* drop-shadow follows the element's alpha shape (PNG transparency, clip-path, SVG). *\u002F\n\u002F* box-shadow is always the rectangular box. *\u002F\n.icon-png { filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5)); }  \u002F* shadow follows the icon shape *\u002F\n.icon-png { box-shadow: 2px 2px 4px rgba(0,0,0,0.5); }          \u002F* shadow on the rectangular box *\u002F\n\u002F* drop-shadow has NO spread (unlike box-shadow): only offset-x offset-y blur color. *\u002F\n",[17,369,370,375,380,432,478],{"__ignoreMap":50},[54,371,372],{"class":56,"line":57},[54,373,374],{"class":112},"\u002F* drop-shadow follows the element's alpha shape (PNG transparency, clip-path, SVG). *\u002F\n",[54,376,377],{"class":56,"line":90},[54,378,379],{"class":112},"\u002F* box-shadow is always the rectangular box. *\u002F\n",[54,381,382,385,387,389,391,393,395,397,399,402,404,406,408,410,412,414,416,418,420,422,424,426,429],{"class":56,"line":116},[54,383,384],{"class":60},".icon-png",[54,386,65],{"class":64},[54,388,19],{"class":68},[54,390,71],{"class":64},[54,392,261],{"class":68},[54,394,77],{"class":64},[54,396,132],{"class":68},[54,398,84],{"class":83},[54,400,401],{"class":68}," 2",[54,403,84],{"class":83},[54,405,271],{"class":68},[54,407,84],{"class":83},[54,409,281],{"class":68},[54,411,77],{"class":64},[54,413,286],{"class":68},[54,415,289],{"class":64},[54,417,286],{"class":68},[54,419,289],{"class":64},[54,421,286],{"class":68},[54,423,289],{"class":64},[54,425,300],{"class":68},[54,427,428],{"class":64},")); }  ",[54,430,431],{"class":112},"\u002F* shadow follows the icon shape *\u002F\n",[54,433,434,436,438,440,442,444,446,448,450,452,454,456,458,460,462,464,466,468,470,472,475],{"class":56,"line":137},[54,435,384],{"class":60},[54,437,65],{"class":64},[54,439,361],{"class":68},[54,441,71],{"class":64},[54,443,132],{"class":68},[54,445,84],{"class":83},[54,447,401],{"class":68},[54,449,84],{"class":83},[54,451,271],{"class":68},[54,453,84],{"class":83},[54,455,281],{"class":68},[54,457,77],{"class":64},[54,459,286],{"class":68},[54,461,289],{"class":64},[54,463,286],{"class":68},[54,465,289],{"class":64},[54,467,286],{"class":68},[54,469,289],{"class":64},[54,471,300],{"class":68},[54,473,474],{"class":64},"); }          ",[54,476,477],{"class":112},"\u002F* shadow on the rectangular box *\u002F\n",[54,479,480],{"class":56,"line":162},[54,481,482],{"class":112},"\u002F* drop-shadow has NO spread (unlike box-shadow): only offset-x offset-y blur color. *\u002F\n",[35,484,486,488],{"id":485},"backdrop-filter-glassmorphism",[17,487,23],{}," — glassmorphism",[42,490,491],{"language":44},[46,492,494],{"className":48,"code":493,"language":44,"meta":50,"style":50},".glass {\n  background: rgba(255, 255, 255, 0.2);   \u002F* MUST be translucent — the blur shows THROUGH the background *\u002F\n  -webkit-backdrop-filter: blur(10px);    \u002F* Safari needs -webkit- *\u002F\n  backdrop-filter: blur(10px);           \u002F* standard *\u002F\n  border: 1px solid rgba(255, 255, 255, 0.3);\n}\n\u002F* ⚠️ Needs content BEHIND the element to blur — a solid background shows no effect. *\u002F\n\u002F* ⚠️ Expensive: samples + filters the backdrop each frame. Use on small areas, don't animate. *\u002F\n",[17,495,496,504,539,561,582,618,623,628],{"__ignoreMap":50},[54,497,498,501],{"class":56,"line":57},[54,499,500],{"class":60},".glass",[54,502,503],{"class":64}," {\n",[54,505,506,509,511,514,516,519,522,524,526,528,530,533,536],{"class":56,"line":90},[54,507,508],{"class":68},"  background",[54,510,71],{"class":64},[54,512,513],{"class":68},"rgba",[54,515,77],{"class":64},[54,517,518],{"class":68},"255",[54,520,521],{"class":64},", ",[54,523,518],{"class":68},[54,525,521],{"class":64},[54,527,518],{"class":68},[54,529,521],{"class":64},[54,531,532],{"class":68},"0.2",[54,534,535],{"class":64},");   ",[54,537,538],{"class":112},"\u002F* MUST be translucent — the blur shows THROUGH the background *\u002F\n",[54,540,541,544,546,548,550,553,555,558],{"class":56,"line":116},[54,542,543],{"class":68},"  -webkit-backdrop-filter",[54,545,71],{"class":64},[54,547,74],{"class":68},[54,549,77],{"class":64},[54,551,552],{"class":68},"10",[54,554,84],{"class":83},[54,556,557],{"class":64},");    ",[54,559,560],{"class":112},"\u002F* Safari needs -webkit- *\u002F\n",[54,562,563,566,568,570,572,574,576,579],{"class":56,"line":137},[54,564,565],{"class":68},"  backdrop-filter",[54,567,71],{"class":64},[54,569,74],{"class":68},[54,571,77],{"class":64},[54,573,552],{"class":68},[54,575,84],{"class":83},[54,577,578],{"class":64},");           ",[54,580,581],{"class":112},"\u002F* standard *\u002F\n",[54,583,584,587,589,591,593,596,598,600,602,604,606,608,610,612,615],{"class":56,"line":162},[54,585,586],{"class":68},"  border",[54,588,71],{"class":64},[54,590,153],{"class":68},[54,592,84],{"class":83},[54,594,595],{"class":68}," solid",[54,597,281],{"class":68},[54,599,77],{"class":64},[54,601,518],{"class":68},[54,603,521],{"class":64},[54,605,518],{"class":68},[54,607,521],{"class":64},[54,609,518],{"class":68},[54,611,521],{"class":64},[54,613,614],{"class":68},"0.3",[54,616,617],{"class":64},");\n",[54,619,620],{"class":56,"line":190},[54,621,622],{"class":64},"}\n",[54,624,625],{"class":56,"line":210},[54,626,627],{"class":112},"\u002F* ⚠️ Needs content BEHIND the element to blur — a solid background shows no effect. *\u002F\n",[54,629,630],{"class":56,"line":230},[54,631,632],{"class":112},"\u002F* ⚠️ Expensive: samples + filters the backdrop each frame. Use on small areas, don't animate. *\u002F\n",[634,635,637],"h3",{"id":636},"anti-pattern-opaque-background-hides-the-blur","Anti-pattern: opaque background hides the blur",[42,639,640],{"language":44},[46,641,643],{"className":48,"code":642,"language":44,"meta":50,"style":50},"\u002F* ❌ 80% opaque → only 20% of backdrop shows → blur barely visible. Looks like a solid panel. *\u002F\n.glass { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); }\n",[17,644,645,650],{"__ignoreMap":50},[54,646,647],{"class":56,"line":57},[54,648,649],{"class":112},"\u002F* ❌ 80% opaque → only 20% of backdrop shows → blur barely visible. Looks like a solid panel. *\u002F\n",[54,651,652,654,656,659,661,663,665,667,669,671,673,675,677,680,683,685,687,689,691,693,695],{"class":56,"line":90},[54,653,500],{"class":60},[54,655,65],{"class":64},[54,657,658],{"class":68},"background",[54,660,71],{"class":64},[54,662,513],{"class":68},[54,664,77],{"class":64},[54,666,518],{"class":68},[54,668,521],{"class":64},[54,670,518],{"class":68},[54,672,521],{"class":64},[54,674,518],{"class":68},[54,676,521],{"class":64},[54,678,679],{"class":68},"0.8",[54,681,682],{"class":64},"); ",[54,684,23],{"class":68},[54,686,71],{"class":64},[54,688,74],{"class":68},[54,690,77],{"class":64},[54,692,552],{"class":68},[54,694,84],{"class":83},[54,696,87],{"class":64},[42,698,699],{"language":44},[46,700,702],{"className":48,"code":701,"language":44,"meta":50,"style":50},"\u002F* ✓ 20% opaque → 80% of backdrop shows → blur visible. Plus content behind to blur. *\u002F\n.glass { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }\n",[17,703,704,709],{"__ignoreMap":50},[54,705,706],{"class":56,"line":57},[54,707,708],{"class":112},"\u002F* ✓ 20% opaque → 80% of backdrop shows → blur visible. Plus content behind to blur. *\u002F\n",[54,710,711,713,715,717,719,721,723,725,727,729,731,733,735,737,739,741,743,745,747,749,751,753,756,758,760,762,764,766],{"class":56,"line":90},[54,712,500],{"class":60},[54,714,65],{"class":64},[54,716,658],{"class":68},[54,718,71],{"class":64},[54,720,513],{"class":68},[54,722,77],{"class":64},[54,724,518],{"class":68},[54,726,521],{"class":64},[54,728,518],{"class":68},[54,730,521],{"class":64},[54,732,518],{"class":68},[54,734,521],{"class":64},[54,736,532],{"class":68},[54,738,682],{"class":64},[54,740,23],{"class":68},[54,742,71],{"class":64},[54,744,74],{"class":68},[54,746,77],{"class":64},[54,748,552],{"class":68},[54,750,84],{"class":83},[54,752,682],{"class":64},[54,754,755],{"class":68},"-webkit-backdrop-filter",[54,757,71],{"class":64},[54,759,74],{"class":68},[54,761,77],{"class":64},[54,763,552],{"class":68},[54,765,84],{"class":83},[54,767,87],{"class":64},[35,769,771],{"id":770},"blend-modes","Blend Modes",[42,773,774],{"language":44},[46,775,777],{"className":48,"code":776,"language":44,"meta":50,"style":50},"\u002F* mix-blend-mode: blends element with the BACKDROP (content behind it, not siblings\u002Fchildren). *\u002F\n.overlay { mix-blend-mode: multiply; }   \u002F* multiply darkens; screen lightens; overlay = contrast *\u002F\n\u002F* ⚠️ mix-blend-mode creates a stacking context (like opacity\u003C1). *\u002F\n\u002F* difference: inverts based on backdrop → text against white becomes black, against black becomes white *\u002F\n.adaptive-text { mix-blend-mode: difference; color: white; }  \u002F* guaranteed contrast on any backdrop *\u002F\n\n\u002F* background-blend-mode: blends an element's OWN background layers (not the backdrop). *\u002F\n.box { background: url(\"texture.png\"), linear-gradient(to right, red, blue); background-blend-mode: overlay; }\n",[17,778,779,784,804,809,814,845,851,856],{"__ignoreMap":50},[54,780,781],{"class":56,"line":57},[54,782,783],{"class":112},"\u002F* mix-blend-mode: blends element with the BACKDROP (content behind it, not siblings\u002Fchildren). *\u002F\n",[54,785,786,789,791,793,795,798,801],{"class":56,"line":90},[54,787,788],{"class":60},".overlay",[54,790,65],{"class":64},[54,792,32],{"class":68},[54,794,71],{"class":64},[54,796,797],{"class":68},"multiply",[54,799,800],{"class":64},"; }   ",[54,802,803],{"class":112},"\u002F* multiply darkens; screen lightens; overlay = contrast *\u002F\n",[54,805,806],{"class":56,"line":116},[54,807,808],{"class":112},"\u002F* ⚠️ mix-blend-mode creates a stacking context (like opacity\u003C1). *\u002F\n",[54,810,811],{"class":56,"line":137},[54,812,813],{"class":112},"\u002F* difference: inverts based on backdrop → text against white becomes black, against black becomes white *\u002F\n",[54,815,816,819,821,823,825,828,831,834,836,839,842],{"class":56,"line":162},[54,817,818],{"class":60},".adaptive-text",[54,820,65],{"class":64},[54,822,32],{"class":68},[54,824,71],{"class":64},[54,826,827],{"class":68},"difference",[54,829,830],{"class":64},"; ",[54,832,833],{"class":68},"color",[54,835,71],{"class":64},[54,837,838],{"class":68},"white",[54,840,841],{"class":64},"; }  ",[54,843,844],{"class":112},"\u002F* guaranteed contrast on any backdrop *\u002F\n",[54,846,847],{"class":56,"line":190},[54,848,850],{"emptyLinePlaceholder":849},true,"\n",[54,852,853],{"class":56,"line":210},[54,854,855],{"class":112},"\u002F* background-blend-mode: blends an element's OWN background layers (not the backdrop). *\u002F\n",[54,857,858,861,863,865,867,870,872,876,879,882,884,887,890,892,895,897,900,902,905,907,910],{"class":56,"line":230},[54,859,860],{"class":60},".box",[54,862,65],{"class":64},[54,864,658],{"class":68},[54,866,71],{"class":64},[54,868,869],{"class":68},"url",[54,871,77],{"class":64},[54,873,875],{"class":874},"sJ6F3","\"texture.png\"",[54,877,878],{"class":64},"), ",[54,880,881],{"class":68},"linear-gradient",[54,883,77],{"class":64},[54,885,886],{"class":83},"to",[54,888,889],{"class":68}," right",[54,891,521],{"class":64},[54,893,894],{"class":68},"red",[54,896,521],{"class":64},[54,898,899],{"class":68},"blue",[54,901,682],{"class":64},[54,903,904],{"class":68},"background-blend-mode",[54,906,71],{"class":64},[54,908,909],{"class":68},"overlay",[54,911,912],{"class":64},"; }\n",[35,914,916,917,920],{"id":915},"masking-mask-for-soft-alpha-fades","Masking — ",[17,918,919],{},"mask"," for soft alpha fades",[42,922,923],{"language":44},[46,924,926],{"className":48,"code":925,"language":44,"meta":50,"style":50},"\u002F* mask uses an image's alpha (or luminance) to control visibility — soft edges, gradients. *\u002F\n\u002F* clip-path can only HARD-clip; mask can SOFT-fade. *\u002F\n.fade-bottom {\n  -webkit-mask: linear-gradient(to bottom, black, transparent);  \u002F* Safari *\u002F\n  mask: linear-gradient(to bottom, black, transparent);          \u002F* standard *\u002F\n}\n\u002F* mask-mode: alpha (default) uses alpha channel; luminance uses brightness (white=visible, black=hidden). *\u002F\n",[17,927,928,933,938,945,977,1005,1009],{"__ignoreMap":50},[54,929,930],{"class":56,"line":57},[54,931,932],{"class":112},"\u002F* mask uses an image's alpha (or luminance) to control visibility — soft edges, gradients. *\u002F\n",[54,934,935],{"class":56,"line":90},[54,936,937],{"class":112},"\u002F* clip-path can only HARD-clip; mask can SOFT-fade. *\u002F\n",[54,939,940,943],{"class":56,"line":116},[54,941,942],{"class":60},".fade-bottom",[54,944,503],{"class":64},[54,946,947,950,952,954,956,958,961,963,966,968,971,974],{"class":56,"line":137},[54,948,949],{"class":68},"  -webkit-mask",[54,951,71],{"class":64},[54,953,881],{"class":68},[54,955,77],{"class":64},[54,957,886],{"class":83},[54,959,960],{"class":68}," bottom",[54,962,521],{"class":64},[54,964,965],{"class":68},"black",[54,967,521],{"class":64},[54,969,970],{"class":68},"transparent",[54,972,973],{"class":64},");  ",[54,975,976],{"class":112},"\u002F* Safari *\u002F\n",[54,978,979,982,984,986,988,990,992,994,996,998,1000,1003],{"class":56,"line":162},[54,980,981],{"class":68},"  mask",[54,983,71],{"class":64},[54,985,881],{"class":68},[54,987,77],{"class":64},[54,989,886],{"class":83},[54,991,960],{"class":68},[54,993,521],{"class":64},[54,995,965],{"class":68},[54,997,521],{"class":64},[54,999,970],{"class":68},[54,1001,1002],{"class":64},");          ",[54,1004,581],{"class":112},[54,1006,1007],{"class":56,"line":190},[54,1008,622],{"class":64},[54,1010,1011],{"class":56,"line":210},[54,1012,1013],{"class":112},"\u002F* mask-mode: alpha (default) uses alpha channel; luminance uses brightness (white=visible, black=hidden). *\u002F\n",[35,1015,1017],{"id":1016},"tips-tricks","💡 Tips & Tricks",[1019,1020,1021,1041,1058,1066,1082],"ul",{},[1022,1023,1024,71,1028,1030,1031,1033,1034,1037,1038,1040],"li",{},[1025,1026,1027],"strong",{},"Idiom",[17,1029,261],{}," (not ",[17,1032,361],{},") for non-rectangular elements — PNG icons, SVGs, ",[17,1035,1036],{},"clip-path","-ed shapes. The shadow follows the alpha shape. ",[17,1039,361],{}," is always rectangular.",[1022,1042,1043,71,1045,1047,1048,1050,1051,1054,1055,1057],{},[1025,1044,1027],{},[17,1046,919],{}," with ",[17,1049,881],{}," for soft fade-outs — ",[17,1052,1053],{},"mask: linear-gradient(to bottom, black, transparent)"," fades to transparent. ",[17,1056,1036],{}," can only hard-clip.",[1022,1059,1060,71,1062,1065],{},[1025,1061,1027],{},[17,1063,1064],{},"mix-blend-mode: difference"," for guaranteed-contrast text on variable backgrounds — text against white → black, against black → white.",[1022,1067,1068,71,1070,1073,1074,1077,1078,1081],{},[1025,1069,1027],{},[17,1071,1072],{},"filter: hue-rotate()"," for theming assets without re-exporting — shift a colored icon's hue to match a theme. Combine with ",[17,1075,1076],{},"saturate()","\u002F",[17,1079,1080],{},"brightness()"," for fuller control.",[1022,1083,1084,71,1086,1088],{},[1025,1085,1027],{},[17,1087,23],{}," sparingly (expensive) and only on small translucent surfaces with content behind to blur.",[35,1090,1092],{"id":1091},"️-edge-cases-gotchas","⚠️ Edge Cases & Gotchas",[1019,1094,1095,1113,1124,1132,1143,1151,1164],{},[1022,1096,1097,1102,1103,1106,1107,521,1110,1112],{},[1025,1098,1099,1101],{},[17,1100,19],{}," creates a stacking context",": like ",[17,1104,1105],{},"opacity \u003C 1"," and ",[17,1108,1109],{},"transform",[17,1111,19],{}," traps children's z-index. A filtered parent's children can't escape its context.",[1022,1114,1115,1120,1121,1123],{},[1025,1116,1117,1119],{},[17,1118,23],{}," needs a translucent background",": opaque (0.8) hides the blur. Use 0.1–0.3. And needs content ",[26,1122,28],{}," to blur.",[1022,1125,1126,1131],{},[1025,1127,1128,1130],{},[17,1129,23],{}," is expensive",": samples + filters the backdrop each frame. Don't animate it, don't use on large areas.",[1022,1133,1134,1139,1140,1142],{},[1025,1135,1136,1138],{},[17,1137,32],{}," blends with the backdrop, not siblings\u002Fchildren",": it blends with content ",[26,1141,28],{}," the element (ancestors, earlier siblings in the same context).",[1022,1144,1145,1150],{},[1025,1146,1147,1149],{},[17,1148,1064],{}," against mid-gray (128,128,128)",": inverts to the same gray → text disappears on mid-gray backdrops.",[1022,1152,1153,1160,1161,1163],{},[1025,1154,1155,358,1158],{},[17,1156,1157],{},"-webkit-mask",[17,1159,919],{},": older Safari only supports ",[17,1162,1157],{}," with limited syntax. Include both for cross-browser; test in Safari.",[1022,1165,1166,1171,1172,1175,1176,1178,1179,1181],{},[1025,1167,1168,1170],{},[17,1169,261],{}," has no spread",": only ",[17,1173,1174],{},"offset-x offset-y blur color",". ",[17,1177,361],{}," has spread; ",[17,1180,261],{}," doesn't.",[35,1183,1185],{"id":1184},"spot-the-bug","🧠 Spot the Bug",[42,1187,1188],{"language":44},[46,1189,1191],{"className":48,"code":1190,"language":44,"meta":50,"style":50},".glass {\n    background: rgba(255, 255, 255, 0.8);\n    backdrop-filter: blur(10px);\n}\n",[17,1192,1193,1199,1226,1243],{"__ignoreMap":50},[54,1194,1195,1197],{"class":56,"line":57},[54,1196,500],{"class":60},[54,1198,503],{"class":64},[54,1200,1201,1204,1206,1208,1210,1212,1214,1216,1218,1220,1222,1224],{"class":56,"line":90},[54,1202,1203],{"class":68},"    background",[54,1205,71],{"class":64},[54,1207,513],{"class":68},[54,1209,77],{"class":64},[54,1211,518],{"class":68},[54,1213,521],{"class":64},[54,1215,518],{"class":68},[54,1217,521],{"class":64},[54,1219,518],{"class":68},[54,1221,521],{"class":64},[54,1223,679],{"class":68},[54,1225,617],{"class":64},[54,1227,1228,1231,1233,1235,1237,1239,1241],{"class":56,"line":116},[54,1229,1230],{"class":68},"    backdrop-filter",[54,1232,71],{"class":64},[54,1234,74],{"class":68},[54,1236,77],{"class":64},[54,1238,552],{"class":68},[54,1240,84],{"class":83},[54,1242,617],{"class":64},[54,1244,1245],{"class":56,"line":137},[54,1246,622],{"class":64},[1248,1249,1250,1254],"details",{},[1251,1252,1253],"summary",{},"Answer",[14,1255,1256,1257,1260,1261,1263,1264,1266,1267,1270,1271,1273],{},"The background is 80% opaque → only 20% of the backdrop shows through → the blur is barely visible. The card looks like a solid white panel, not frosted glass. Fix: ",[17,1258,1259],{},"background: rgba(255, 255, 255, 0.2)"," (translucent) so the blurred backdrop is visible. Also ensure there's colorful\u002Ftextured content ",[26,1262,28],{}," the card to blur — ",[17,1265,23],{}," blurs what shows ",[26,1268,1269],{},"through"," the background, and a solid backdrop shows no effect. Include ",[17,1272,755],{}," for Safari.",[1275,1276,1277],"style",{},"html pre.shiki code .sIsaT, html code.shiki .sIsaT{--shiki-default:#6F42C1;--shiki-github-dark:#B392F0}html pre.shiki code .ssxIu, html code.shiki .ssxIu{--shiki-default:#24292E;--shiki-github-dark:#E1E4E8}html pre.shiki code .snvgF, html code.shiki .snvgF{--shiki-default:#005CC5;--shiki-github-dark:#79B8FF}html pre.shiki code .svdQ7, html code.shiki .svdQ7{--shiki-default:#D73A49;--shiki-github-dark:#F97583}html pre.shiki code .sdCPZ, html code.shiki .sdCPZ{--shiki-default:#6A737D;--shiki-github-dark:#6A737D}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 .github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html.github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html pre.shiki code .sJ6F3, html code.shiki .sJ6F3{--shiki-default:#032F62;--shiki-github-dark:#9ECBFF}",{"title":50,"searchDepth":90,"depth":90,"links":1279},[1280,1282,1284,1288,1289,1291,1292,1293],{"id":37,"depth":90,"text":1281},"filter — graphical effects",{"id":355,"depth":90,"text":1283},"drop-shadow vs box-shadow — shape vs box",{"id":485,"depth":90,"text":1285,"children":1286},"backdrop-filter — glassmorphism",[1287],{"id":636,"depth":116,"text":637},{"id":770,"depth":90,"text":771},{"id":915,"depth":90,"text":1290},"Masking — mask for soft alpha fades",{"id":1016,"depth":90,"text":1017},{"id":1091,"depth":90,"text":1092},{"id":1184,"depth":90,"text":1185},"filter vs drop-shadow vs box-shadow, backdrop-filter glassmorphism (translucency requirement), mix-blend-mode stacking-context creation, mask for soft alpha fades. Code-first reference with compositing gotchas.","md",{},"\u002Fcss\u002F14-filters-blend-modes-and-masking",{"title":5,"description":1294},"css\u002F14-filters-blend-modes-and-masking","DXqhBcpPTG1tE-cpKAAEWoNBPWd_VUXb05-JlZIKCNE",1789924644827]