[{"data":1,"prerenderedAt":1729},["ShallowReactive",2],{"guide-css-visual-effects":3},{"id":4,"title":5,"body":6,"date":1721,"description":1722,"extension":1723,"meta":1724,"navigation":283,"path":1725,"readingTime":347,"seo":1726,"stem":1727,"__hash__":1728},"guides\u002Fguides\u002Fcss-visual-effects.md","CSS Visual Effects",{"type":7,"value":8,"toc":1695},"minimark",[9,14,18,41,44,48,115,126,130,135,149,215,219,233,350,354,365,424,428,431,522,526,557,690,694,697,701,950,954,1066,1070,1132,1136,1140,1143,1260,1264,1275,1399,1409,1413,1530,1534,1537,1560,1627,1631,1648,1652,1671,1675,1691],[10,11,13],"h2",{"id":12},"three-pillars-of-css-visual-effects","Three Pillars of CSS Visual Effects",[15,16,17],"p",{},"Modern CSS gives you three powerful tools for visual manipulation:",[19,20,21,29,35],"ul",{},[22,23,24,28],"li",{},[25,26,27],"strong",{},"Transforms"," — change geometry (position, rotation, size, skew)",[22,30,31,34],{},[25,32,33],{},"Filters"," — change appearance (blur, brightness, contrast, saturation)",[22,36,37,40],{},[25,38,39],{},"Blend modes"," — control how overlapping layers mix",[15,42,43],{},"Each tool solves a different problem. Understanding when to use which one keeps your code clean and your UI sharp.",[10,45,47],{"id":46},"transforms-vs-filters-vs-blend-modes","Transforms vs Filters vs Blend Modes",[49,50,51,70],"table",{},[52,53,54],"thead",{},[55,56,57,61,64,67],"tr",{},[58,59,60],"th",{},"Feature",[58,62,63],{},"What It Does",[58,65,66],{},"Affects Layout?",[58,68,69],{},"GPU Accelerated?",[71,72,73,88,102],"tbody",{},[55,74,75,79,82,85],{},[76,77,78],"td",{},"Transform",[76,80,81],{},"Moves, rotates, scales, skews",[76,83,84],{},"No",[76,86,87],{},"Yes",[55,89,90,93,96,99],{},[76,91,92],{},"Filter",[76,94,95],{},"Blur, brightness, contrast, drop-shadow",[76,97,98],{},"No (except drop-shadow margin)",[76,100,101],{},"Partially",[55,103,104,107,110,112],{},[76,105,106],{},"Blend mode",[76,108,109],{},"Mixes overlapping pixel colors",[76,111,84],{},[76,113,114],{},"Varies",[15,116,117,119,120,122,123,125],{},[25,118,27],{}," change the shape and position of an element. ",[25,121,33],{}," change how the element looks after rendering. ",[25,124,39],{}," determine how two rendered layers combine.",[10,127,129],{"id":128},"when-to-use-each","When to Use Each",[131,132,134],"h3",{"id":133},"use-transforms-when-you-want-to","Use Transforms When You Want To",[19,136,137,140,143,146],{},[22,138,139],{},"Move an element without causing reflow",[22,141,142],{},"Rotate or flip a component",[22,144,145],{},"Scale on hover for interactive feedback",[22,147,148],{},"Create 3D card flips or perspective effects",[150,151,156],"pre",{"className":152,"code":153,"language":154,"meta":155,"style":155},"language-css shiki shiki-themes github-light github-dark",".btn:hover {\n  transform: translateY(-2px) scale(1.02);\n}\n","css","",[157,158,159,172,209],"code",{"__ignoreMap":155},[160,161,164,168],"span",{"class":162,"line":163},"line",1,[160,165,167],{"class":166},"sScJk",".btn:hover",[160,169,171],{"class":170},"sVt8B"," {\n",[160,173,175,179,182,185,188,191,195,198,201,203,206],{"class":162,"line":174},2,[160,176,178],{"class":177},"sj4cs","  transform",[160,180,181],{"class":170},": ",[160,183,184],{"class":177},"translateY",[160,186,187],{"class":170},"(",[160,189,190],{"class":177},"-2",[160,192,194],{"class":193},"szBVR","px",[160,196,197],{"class":170},") ",[160,199,200],{"class":177},"scale",[160,202,187],{"class":170},[160,204,205],{"class":177},"1.02",[160,207,208],{"class":170},");\n",[160,210,212],{"class":162,"line":211},3,[160,213,214],{"class":170},"}\n",[131,216,218],{"id":217},"use-filters-when-you-want-to","Use Filters When You Want To",[19,220,221,224,227,230],{},[22,222,223],{},"Blur a background for a glass effect",[22,225,226],{},"Adjust brightness or contrast on an image",[22,228,229],{},"Convert an image to grayscale",[22,231,232],{},"Apply a drop shadow that follows an irregular shape",[150,234,236],{"className":152,"code":235,"language":154,"meta":155,"style":155},".card-background {\n  filter: blur(8px) brightness(0.7);\n}\n\n.icon:hover {\n  filter: drop-shadow(0 2px 4px rgba(59, 130, 246, 0.5));\n}\n",[157,237,238,245,274,278,285,293,345],{"__ignoreMap":155},[160,239,240,243],{"class":162,"line":163},[160,241,242],{"class":166},".card-background",[160,244,171],{"class":170},[160,246,247,250,252,255,257,260,262,264,267,269,272],{"class":162,"line":174},[160,248,249],{"class":177},"  filter",[160,251,181],{"class":170},[160,253,254],{"class":177},"blur",[160,256,187],{"class":170},[160,258,259],{"class":177},"8",[160,261,194],{"class":193},[160,263,197],{"class":170},[160,265,266],{"class":177},"brightness",[160,268,187],{"class":170},[160,270,271],{"class":177},"0.7",[160,273,208],{"class":170},[160,275,276],{"class":162,"line":211},[160,277,214],{"class":170},[160,279,281],{"class":162,"line":280},4,[160,282,284],{"emptyLinePlaceholder":283},true,"\n",[160,286,288,291],{"class":162,"line":287},5,[160,289,290],{"class":166},".icon:hover",[160,292,171],{"class":170},[160,294,296,298,300,303,305,308,311,313,316,318,321,323,326,329,332,334,337,339,342],{"class":162,"line":295},6,[160,297,249],{"class":177},[160,299,181],{"class":170},[160,301,302],{"class":177},"drop-shadow",[160,304,187],{"class":170},[160,306,307],{"class":177},"0",[160,309,310],{"class":177}," 2",[160,312,194],{"class":193},[160,314,315],{"class":177}," 4",[160,317,194],{"class":193},[160,319,320],{"class":177}," rgba",[160,322,187],{"class":170},[160,324,325],{"class":177},"59",[160,327,328],{"class":170},", ",[160,330,331],{"class":177},"130",[160,333,328],{"class":170},[160,335,336],{"class":177},"246",[160,338,328],{"class":170},[160,340,341],{"class":177},"0.5",[160,343,344],{"class":170},"));\n",[160,346,348],{"class":162,"line":347},7,[160,349,214],{"class":170},[131,351,353],{"id":352},"use-blend-modes-when-you-want-to","Use Blend Modes When You Want To",[19,355,356,359,362],{},[22,357,358],{},"Colorize a background image with a gradient overlay",[22,360,361],{},"Create text knock-out effects",[22,363,364],{},"Composite multiple layers into a single visual",[150,366,368],{"className":152,"code":367,"language":154,"meta":155,"style":155},".overlay {\n  background: linear-gradient(135deg, #3B82F6, #8B5CF6);\n  mix-blend-mode: multiply;\n}\n",[157,369,370,377,407,420],{"__ignoreMap":155},[160,371,372,375],{"class":162,"line":163},[160,373,374],{"class":166},".overlay",[160,376,171],{"class":170},[160,378,379,382,384,387,389,392,395,397,400,402,405],{"class":162,"line":174},[160,380,381],{"class":177},"  background",[160,383,181],{"class":170},[160,385,386],{"class":177},"linear-gradient",[160,388,187],{"class":170},[160,390,391],{"class":177},"135",[160,393,394],{"class":193},"deg",[160,396,328],{"class":170},[160,398,399],{"class":177},"#3B82F6",[160,401,328],{"class":170},[160,403,404],{"class":177},"#8B5CF6",[160,406,208],{"class":170},[160,408,409,412,414,417],{"class":162,"line":211},[160,410,411],{"class":177},"  mix-blend-mode",[160,413,181],{"class":170},[160,415,416],{"class":177},"multiply",[160,418,419],{"class":170},";\n",[160,421,422],{"class":162,"line":280},[160,423,214],{"class":170},[10,425,427],{"id":426},"performance-considerations","Performance Considerations",[15,429,430],{},"Not all visual effects cost the same. Here is how they rank:",[49,432,433,446],{},[52,434,435],{},[55,436,437,440,443],{},[58,438,439],{},"Effect Layer",[58,441,442],{},"Cost",[58,444,445],{},"Why",[71,447,448,461,472,485,497,510],{},[55,449,450,455,458],{},[76,451,452],{},[157,453,454],{},"transform",[76,456,457],{},"Low",[76,459,460],{},"GPU-composited; skips repaint",[55,462,463,468,470],{},[76,464,465],{},[157,466,467],{},"opacity",[76,469,457],{},[76,471,460],{},[55,473,474,479,482],{},[76,475,476],{},[157,477,478],{},"filter: blur()",[76,480,481],{},"Medium",[76,483,484],{},"Requires pixel processing; may trigger layer promotion",[55,486,487,492,494],{},[76,488,489],{},[157,490,491],{},"filter: drop-shadow()",[76,493,481],{},[76,495,496],{},"Recalculated on content change",[55,498,499,504,507],{},[76,500,501],{},[157,502,503],{},"mix-blend-mode",[76,505,506],{},"High",[76,508,509],{},"Requires compositing two layers per pixel",[55,511,512,517,519],{},[76,513,514],{},[157,515,516],{},"background-blend-mode",[76,518,506],{},[76,520,521],{},"Same compositing cost per background pixel",[131,523,525],{"id":524},"practical-guidelines","Practical Guidelines",[527,528,529,535,541,551],"ol",{},[22,530,531,534],{},[25,532,533],{},"Prefer transform + opacity for animations"," — they run on the compositor thread and skip layout and paint",[22,536,537,540],{},[25,538,539],{},"Avoid animating filter or blend-mode properties"," — they trigger paint on every frame",[22,542,543,550],{},[25,544,545,546,549],{},"Use ",[157,547,548],{},"will-change"," sparingly"," — add it only when you are about to animate, and remove it after",[22,552,553,556],{},[25,554,555],{},"Limit blur radius"," — a 20px blur costs roughly 4× more than a 10px blur",[150,558,560],{"className":152,"code":559,"language":154,"meta":155,"style":155},"\u002F* Good: animate transform and opacity *\u002F\n.card:hover {\n  transform: translateY(-4px);\n  opacity: 0.9;\n  transition: transform 0.2s, opacity 0.2s;\n}\n\n\u002F* Avoid: animate filter *\u002F\n.card:hover {\n  filter: blur(2px);\n  transition: filter 0.3s; \u002F* triggers repaint each frame *\u002F\n}\n",[157,561,562,568,575,592,604,627,631,635,641,648,666,685],{"__ignoreMap":155},[160,563,564],{"class":162,"line":163},[160,565,567],{"class":566},"sJ8bj","\u002F* Good: animate transform and opacity *\u002F\n",[160,569,570,573],{"class":162,"line":174},[160,571,572],{"class":166},".card:hover",[160,574,171],{"class":170},[160,576,577,579,581,583,585,588,590],{"class":162,"line":211},[160,578,178],{"class":177},[160,580,181],{"class":170},[160,582,184],{"class":177},[160,584,187],{"class":170},[160,586,587],{"class":177},"-4",[160,589,194],{"class":193},[160,591,208],{"class":170},[160,593,594,597,599,602],{"class":162,"line":280},[160,595,596],{"class":177},"  opacity",[160,598,181],{"class":170},[160,600,601],{"class":177},"0.9",[160,603,419],{"class":170},[160,605,606,609,612,615,618,621,623,625],{"class":162,"line":287},[160,607,608],{"class":177},"  transition",[160,610,611],{"class":170},": transform ",[160,613,614],{"class":177},"0.2",[160,616,617],{"class":193},"s",[160,619,620],{"class":170},", opacity ",[160,622,614],{"class":177},[160,624,617],{"class":193},[160,626,419],{"class":170},[160,628,629],{"class":162,"line":295},[160,630,214],{"class":170},[160,632,633],{"class":162,"line":347},[160,634,284],{"emptyLinePlaceholder":283},[160,636,638],{"class":162,"line":637},8,[160,639,640],{"class":566},"\u002F* Avoid: animate filter *\u002F\n",[160,642,644,646],{"class":162,"line":643},9,[160,645,572],{"class":166},[160,647,171],{"class":170},[160,649,651,653,655,657,659,662,664],{"class":162,"line":650},10,[160,652,249],{"class":177},[160,654,181],{"class":170},[160,656,254],{"class":177},[160,658,187],{"class":170},[160,660,661],{"class":177},"2",[160,663,194],{"class":193},[160,665,208],{"class":170},[160,667,669,671,674,677,679,682],{"class":162,"line":668},11,[160,670,608],{"class":177},[160,672,673],{"class":170},": filter ",[160,675,676],{"class":177},"0.3",[160,678,617],{"class":193},[160,680,681],{"class":170},"; ",[160,683,684],{"class":566},"\u002F* triggers repaint each frame *\u002F\n",[160,686,688],{"class":162,"line":687},12,[160,689,214],{"class":170},[10,691,693],{"id":692},"combining-effects","Combining Effects",[15,695,696],{},"The real power comes from stacking effects. Each layer adds depth and polish.",[131,698,700],{"id":699},"elevated-card","Elevated Card",[150,702,704],{"className":152,"code":703,"language":154,"meta":155,"style":155},".elevated-card {\n  background: linear-gradient(180deg, #1E293B, #0F172A);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);\n  transform: translateY(0);\n  transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.elevated-card:hover {\n  transform: translateY(-4px);\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.4);\n}\n",[157,705,706,713,740,813,827,846,850,854,861,877,946],{"__ignoreMap":155},[160,707,708,711],{"class":162,"line":163},[160,709,710],{"class":166},".elevated-card",[160,712,171],{"class":170},[160,714,715,717,719,721,723,726,728,730,733,735,738],{"class":162,"line":174},[160,716,381],{"class":177},[160,718,181],{"class":170},[160,720,386],{"class":177},[160,722,187],{"class":170},[160,724,725],{"class":177},"180",[160,727,394],{"class":193},[160,729,328],{"class":170},[160,731,732],{"class":177},"#1E293B",[160,734,328],{"class":170},[160,736,737],{"class":177},"#0F172A",[160,739,208],{"class":170},[160,741,742,745,747,749,752,754,757,759,761,763,765,767,769,771,773,775,778,781,783,786,788,791,793,795,797,799,801,803,805,807,809,811],{"class":162,"line":211},[160,743,744],{"class":177},"  box-shadow",[160,746,181],{"class":170},[160,748,307],{"class":177},[160,750,751],{"class":177}," 1",[160,753,194],{"class":193},[160,755,756],{"class":177}," 3",[160,758,194],{"class":193},[160,760,320],{"class":177},[160,762,187],{"class":170},[160,764,307],{"class":177},[160,766,328],{"class":170},[160,768,307],{"class":177},[160,770,328],{"class":170},[160,772,307],{"class":177},[160,774,328],{"class":170},[160,776,777],{"class":177},"0.4",[160,779,780],{"class":170},"), ",[160,782,307],{"class":177},[160,784,785],{"class":177}," 8",[160,787,194],{"class":193},[160,789,790],{"class":177}," 24",[160,792,194],{"class":193},[160,794,320],{"class":177},[160,796,187],{"class":170},[160,798,307],{"class":177},[160,800,328],{"class":170},[160,802,307],{"class":177},[160,804,328],{"class":170},[160,806,307],{"class":177},[160,808,328],{"class":170},[160,810,676],{"class":177},[160,812,208],{"class":170},[160,814,815,817,819,821,823,825],{"class":162,"line":280},[160,816,178],{"class":177},[160,818,181],{"class":170},[160,820,184],{"class":177},[160,822,187],{"class":170},[160,824,307],{"class":177},[160,826,208],{"class":170},[160,828,829,831,833,835,837,840,842,844],{"class":162,"line":287},[160,830,608],{"class":177},[160,832,611],{"class":170},[160,834,614],{"class":177},[160,836,617],{"class":193},[160,838,839],{"class":170},", box-shadow ",[160,841,614],{"class":177},[160,843,617],{"class":193},[160,845,419],{"class":170},[160,847,848],{"class":162,"line":295},[160,849,214],{"class":170},[160,851,852],{"class":162,"line":347},[160,853,284],{"emptyLinePlaceholder":283},[160,855,856,859],{"class":162,"line":637},[160,857,858],{"class":166},".elevated-card:hover",[160,860,171],{"class":170},[160,862,863,865,867,869,871,873,875],{"class":162,"line":643},[160,864,178],{"class":177},[160,866,181],{"class":170},[160,868,184],{"class":177},[160,870,187],{"class":170},[160,872,587],{"class":177},[160,874,194],{"class":193},[160,876,208],{"class":170},[160,878,879,881,883,885,887,889,892,894,896,898,900,902,904,906,908,910,912,914,916,919,921,924,926,928,930,932,934,936,938,940,942,944],{"class":162,"line":650},[160,880,744],{"class":177},[160,882,181],{"class":170},[160,884,307],{"class":177},[160,886,310],{"class":177},[160,888,194],{"class":193},[160,890,891],{"class":177}," 6",[160,893,194],{"class":193},[160,895,320],{"class":177},[160,897,187],{"class":170},[160,899,307],{"class":177},[160,901,328],{"class":170},[160,903,307],{"class":177},[160,905,328],{"class":170},[160,907,307],{"class":177},[160,909,328],{"class":170},[160,911,777],{"class":177},[160,913,780],{"class":170},[160,915,307],{"class":177},[160,917,918],{"class":177}," 12",[160,920,194],{"class":193},[160,922,923],{"class":177}," 32",[160,925,194],{"class":193},[160,927,320],{"class":177},[160,929,187],{"class":170},[160,931,307],{"class":177},[160,933,328],{"class":170},[160,935,307],{"class":177},[160,937,328],{"class":170},[160,939,307],{"class":177},[160,941,328],{"class":170},[160,943,777],{"class":177},[160,945,208],{"class":170},[160,947,948],{"class":162,"line":668},[160,949,214],{"class":170},[131,951,953],{"id":952},"glass-panel","Glass Panel",[150,955,957],{"className":152,"code":956,"language":154,"meta":155,"style":155},".glass-panel {\n  background: rgba(255, 255, 255, 0.08);\n  backdrop-filter: blur(12px);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 12px;\n}\n",[157,958,959,966,995,1013,1049,1062],{"__ignoreMap":155},[160,960,961,964],{"class":162,"line":163},[160,962,963],{"class":166},".glass-panel",[160,965,171],{"class":170},[160,967,968,970,972,975,977,980,982,984,986,988,990,993],{"class":162,"line":174},[160,969,381],{"class":177},[160,971,181],{"class":170},[160,973,974],{"class":177},"rgba",[160,976,187],{"class":170},[160,978,979],{"class":177},"255",[160,981,328],{"class":170},[160,983,979],{"class":177},[160,985,328],{"class":170},[160,987,979],{"class":177},[160,989,328],{"class":170},[160,991,992],{"class":177},"0.08",[160,994,208],{"class":170},[160,996,997,1000,1002,1004,1006,1009,1011],{"class":162,"line":211},[160,998,999],{"class":177},"  backdrop-filter",[160,1001,181],{"class":170},[160,1003,254],{"class":177},[160,1005,187],{"class":170},[160,1007,1008],{"class":177},"12",[160,1010,194],{"class":193},[160,1012,208],{"class":170},[160,1014,1015,1018,1020,1023,1025,1028,1030,1032,1034,1036,1038,1040,1042,1044,1047],{"class":162,"line":280},[160,1016,1017],{"class":177},"  border",[160,1019,181],{"class":170},[160,1021,1022],{"class":177},"1",[160,1024,194],{"class":193},[160,1026,1027],{"class":177}," solid",[160,1029,320],{"class":177},[160,1031,187],{"class":170},[160,1033,979],{"class":177},[160,1035,328],{"class":170},[160,1037,979],{"class":177},[160,1039,328],{"class":170},[160,1041,979],{"class":177},[160,1043,328],{"class":170},[160,1045,1046],{"class":177},"0.1",[160,1048,208],{"class":170},[160,1050,1051,1054,1056,1058,1060],{"class":162,"line":287},[160,1052,1053],{"class":177},"  border-radius",[160,1055,181],{"class":170},[160,1057,1008],{"class":177},[160,1059,194],{"class":193},[160,1061,419],{"class":170},[160,1063,1064],{"class":162,"line":295},[160,1065,214],{"class":170},[131,1067,1069],{"id":1068},"color-overlay-with-blend-mode","Color Overlay with Blend Mode",[150,1071,1073],{"className":152,"code":1072,"language":154,"meta":155,"style":155},".hero-overlay {\n  background: linear-gradient(135deg, #3B82F6, #8B5CF6);\n  mix-blend-mode: soft-light;\n  opacity: 0.6;\n}\n",[157,1074,1075,1082,1106,1117,1128],{"__ignoreMap":155},[160,1076,1077,1080],{"class":162,"line":163},[160,1078,1079],{"class":166},".hero-overlay",[160,1081,171],{"class":170},[160,1083,1084,1086,1088,1090,1092,1094,1096,1098,1100,1102,1104],{"class":162,"line":174},[160,1085,381],{"class":177},[160,1087,181],{"class":170},[160,1089,386],{"class":177},[160,1091,187],{"class":170},[160,1093,391],{"class":177},[160,1095,394],{"class":193},[160,1097,328],{"class":170},[160,1099,399],{"class":177},[160,1101,328],{"class":170},[160,1103,404],{"class":177},[160,1105,208],{"class":170},[160,1107,1108,1110,1112,1115],{"class":162,"line":211},[160,1109,411],{"class":177},[160,1111,181],{"class":170},[160,1113,1114],{"class":177},"soft-light",[160,1116,419],{"class":170},[160,1118,1119,1121,1123,1126],{"class":162,"line":280},[160,1120,596],{"class":177},[160,1122,181],{"class":170},[160,1124,1125],{"class":177},"0.6",[160,1127,419],{"class":170},[160,1129,1130],{"class":162,"line":287},[160,1131,214],{"class":170},[10,1133,1135],{"id":1134},"real-world-examples","Real-World Examples",[131,1137,1139],{"id":1138},"hover-lift-effect","Hover Lift Effect",[15,1141,1142],{},"A subtle hover lift combines transform, box-shadow, and transition:",[150,1144,1146],{"className":152,"code":1145,"language":154,"meta":155,"style":155},".card {\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\n.card:hover {\n  transform: translateY(-6px) scale(1.01);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);\n}\n",[157,1147,1148,1155,1178,1182,1186,1192,1218,1256],{"__ignoreMap":155},[160,1149,1150,1153],{"class":162,"line":163},[160,1151,1152],{"class":166},".card",[160,1154,171],{"class":170},[160,1156,1157,1159,1161,1163,1165,1168,1170,1172,1174,1176],{"class":162,"line":174},[160,1158,608],{"class":177},[160,1160,611],{"class":170},[160,1162,614],{"class":177},[160,1164,617],{"class":193},[160,1166,1167],{"class":177}," ease",[160,1169,839],{"class":170},[160,1171,614],{"class":177},[160,1173,617],{"class":193},[160,1175,1167],{"class":177},[160,1177,419],{"class":170},[160,1179,1180],{"class":162,"line":211},[160,1181,214],{"class":170},[160,1183,1184],{"class":162,"line":280},[160,1185,284],{"emptyLinePlaceholder":283},[160,1187,1188,1190],{"class":162,"line":287},[160,1189,572],{"class":166},[160,1191,171],{"class":170},[160,1193,1194,1196,1198,1200,1202,1205,1207,1209,1211,1213,1216],{"class":162,"line":295},[160,1195,178],{"class":177},[160,1197,181],{"class":170},[160,1199,184],{"class":177},[160,1201,187],{"class":170},[160,1203,1204],{"class":177},"-6",[160,1206,194],{"class":193},[160,1208,197],{"class":170},[160,1210,200],{"class":177},[160,1212,187],{"class":170},[160,1214,1215],{"class":177},"1.01",[160,1217,208],{"class":170},[160,1219,1220,1222,1224,1226,1228,1230,1233,1235,1237,1239,1241,1243,1245,1247,1249,1251,1254],{"class":162,"line":347},[160,1221,744],{"class":177},[160,1223,181],{"class":170},[160,1225,307],{"class":177},[160,1227,918],{"class":177},[160,1229,194],{"class":193},[160,1231,1232],{"class":177}," 40",[160,1234,194],{"class":193},[160,1236,320],{"class":177},[160,1238,187],{"class":170},[160,1240,307],{"class":177},[160,1242,328],{"class":170},[160,1244,307],{"class":177},[160,1246,328],{"class":170},[160,1248,307],{"class":177},[160,1250,328],{"class":170},[160,1252,1253],{"class":177},"0.25",[160,1255,208],{"class":170},[160,1257,1258],{"class":162,"line":637},[160,1259,214],{"class":170},[131,1261,1263],{"id":1262},"parallax-depth","Parallax Depth",[15,1265,1266,1267,1270,1271,1274],{},"Combine ",[157,1268,1269],{},"perspective"," with ",[157,1272,1273],{},"translateZ"," to create depth layers:",[150,1276,1278],{"className":152,"code":1277,"language":154,"meta":155,"style":155},".parallax-container {\n  perspective: 1000px;\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n\n.parallax-bg {\n  transform: translateZ(-2px) scale(3);\n}\n\n.parallax-fg {\n  transform: translateZ(0);\n}\n",[157,1279,1280,1287,1301,1313,1325,1329,1333,1340,1365,1369,1373,1380,1394],{"__ignoreMap":155},[160,1281,1282,1285],{"class":162,"line":163},[160,1283,1284],{"class":166},".parallax-container",[160,1286,171],{"class":170},[160,1288,1289,1292,1294,1297,1299],{"class":162,"line":174},[160,1290,1291],{"class":177},"  perspective",[160,1293,181],{"class":170},[160,1295,1296],{"class":177},"1000",[160,1298,194],{"class":193},[160,1300,419],{"class":170},[160,1302,1303,1306,1308,1311],{"class":162,"line":211},[160,1304,1305],{"class":177},"  overflow-x",[160,1307,181],{"class":170},[160,1309,1310],{"class":177},"hidden",[160,1312,419],{"class":170},[160,1314,1315,1318,1320,1323],{"class":162,"line":280},[160,1316,1317],{"class":177},"  overflow-y",[160,1319,181],{"class":170},[160,1321,1322],{"class":177},"auto",[160,1324,419],{"class":170},[160,1326,1327],{"class":162,"line":287},[160,1328,214],{"class":170},[160,1330,1331],{"class":162,"line":295},[160,1332,284],{"emptyLinePlaceholder":283},[160,1334,1335,1338],{"class":162,"line":347},[160,1336,1337],{"class":166},".parallax-bg",[160,1339,171],{"class":170},[160,1341,1342,1344,1346,1348,1350,1352,1354,1356,1358,1360,1363],{"class":162,"line":637},[160,1343,178],{"class":177},[160,1345,181],{"class":170},[160,1347,1273],{"class":177},[160,1349,187],{"class":170},[160,1351,190],{"class":177},[160,1353,194],{"class":193},[160,1355,197],{"class":170},[160,1357,200],{"class":177},[160,1359,187],{"class":170},[160,1361,1362],{"class":177},"3",[160,1364,208],{"class":170},[160,1366,1367],{"class":162,"line":643},[160,1368,214],{"class":170},[160,1370,1371],{"class":162,"line":650},[160,1372,284],{"emptyLinePlaceholder":283},[160,1374,1375,1378],{"class":162,"line":668},[160,1376,1377],{"class":166},".parallax-fg",[160,1379,171],{"class":170},[160,1381,1382,1384,1386,1388,1390,1392],{"class":162,"line":687},[160,1383,178],{"class":177},[160,1385,181],{"class":170},[160,1387,1273],{"class":177},[160,1389,187],{"class":170},[160,1391,307],{"class":177},[160,1393,208],{"class":170},[160,1395,1397],{"class":162,"line":1396},13,[160,1398,214],{"class":170},[15,1400,1401,1402,1404,1405,1408],{},"Elements with negative ",[157,1403,1273],{}," scroll slower, creating a depth illusion. The ",[157,1406,1407],{},"scale(3)"," compensates for the perspective shrinkage.",[131,1410,1412],{"id":1411},"image-hover-effects","Image Hover Effects",[150,1414,1416],{"className":152,"code":1415,"language":154,"meta":155,"style":155},".thumbnail {\n  filter: grayscale(100%) brightness(0.8);\n  transition: filter 0.3s, transform 0.3s;\n}\n\n.thumbnail:hover {\n  filter: grayscale(0%) brightness(1);\n  transform: scale(1.03);\n}\n",[157,1417,1418,1425,1453,1472,1476,1480,1487,1511,1526],{"__ignoreMap":155},[160,1419,1420,1423],{"class":162,"line":163},[160,1421,1422],{"class":166},".thumbnail",[160,1424,171],{"class":170},[160,1426,1427,1429,1431,1434,1436,1439,1442,1444,1446,1448,1451],{"class":162,"line":174},[160,1428,249],{"class":177},[160,1430,181],{"class":170},[160,1432,1433],{"class":177},"grayscale",[160,1435,187],{"class":170},[160,1437,1438],{"class":177},"100",[160,1440,1441],{"class":193},"%",[160,1443,197],{"class":170},[160,1445,266],{"class":177},[160,1447,187],{"class":170},[160,1449,1450],{"class":177},"0.8",[160,1452,208],{"class":170},[160,1454,1455,1457,1459,1461,1463,1466,1468,1470],{"class":162,"line":211},[160,1456,608],{"class":177},[160,1458,673],{"class":170},[160,1460,676],{"class":177},[160,1462,617],{"class":193},[160,1464,1465],{"class":170},", transform ",[160,1467,676],{"class":177},[160,1469,617],{"class":193},[160,1471,419],{"class":170},[160,1473,1474],{"class":162,"line":280},[160,1475,214],{"class":170},[160,1477,1478],{"class":162,"line":287},[160,1479,284],{"emptyLinePlaceholder":283},[160,1481,1482,1485],{"class":162,"line":295},[160,1483,1484],{"class":166},".thumbnail:hover",[160,1486,171],{"class":170},[160,1488,1489,1491,1493,1495,1497,1499,1501,1503,1505,1507,1509],{"class":162,"line":347},[160,1490,249],{"class":177},[160,1492,181],{"class":170},[160,1494,1433],{"class":177},[160,1496,187],{"class":170},[160,1498,307],{"class":177},[160,1500,1441],{"class":193},[160,1502,197],{"class":170},[160,1504,266],{"class":177},[160,1506,187],{"class":170},[160,1508,1022],{"class":177},[160,1510,208],{"class":170},[160,1512,1513,1515,1517,1519,1521,1524],{"class":162,"line":637},[160,1514,178],{"class":177},[160,1516,181],{"class":170},[160,1518,200],{"class":177},[160,1520,187],{"class":170},[160,1522,1523],{"class":177},"1.03",[160,1525,208],{"class":170},[160,1527,1528],{"class":162,"line":643},[160,1529,214],{"class":170},[10,1531,1533],{"id":1532},"accessibility-notes","Accessibility Notes",[15,1535,1536],{},"Visual effects should never block content access.",[19,1538,1539,1545,1550],{},[22,1540,1541,1544],{},[25,1542,1543],{},"Blur and overlay",": Ensure text behind blurred or overlaid elements meets WCAG AA contrast (4.5:1 for body text)",[22,1546,1547,1549],{},[25,1548,39],{},": Test in both light and dark themes — a blend mode that works on white may fail on dark surfaces",[22,1551,1552,1555,1556,1559],{},[25,1553,1554],{},"Animations",": Respect ",[157,1557,1558],{},"prefers-reduced-motion"," by disabling or minimizing transform transitions",[150,1561,1563],{"className":152,"code":1562,"language":154,"meta":155,"style":155},"@media (prefers-reduced-motion: reduce) {\n  .card {\n    transition: none;\n  }\n\n  .card:hover {\n    transform: none;\n  }\n}\n",[157,1564,1565,1573,1580,1592,1597,1601,1608,1619,1623],{"__ignoreMap":155},[160,1566,1567,1570],{"class":162,"line":163},[160,1568,1569],{"class":193},"@media",[160,1571,1572],{"class":170}," (prefers-reduced-motion: reduce) {\n",[160,1574,1575,1578],{"class":162,"line":174},[160,1576,1577],{"class":166},"  .card",[160,1579,171],{"class":170},[160,1581,1582,1585,1587,1590],{"class":162,"line":211},[160,1583,1584],{"class":177},"    transition",[160,1586,181],{"class":170},[160,1588,1589],{"class":177},"none",[160,1591,419],{"class":170},[160,1593,1594],{"class":162,"line":280},[160,1595,1596],{"class":170},"  }\n",[160,1598,1599],{"class":162,"line":287},[160,1600,284],{"emptyLinePlaceholder":283},[160,1602,1603,1606],{"class":162,"line":295},[160,1604,1605],{"class":166},"  .card:hover",[160,1607,171],{"class":170},[160,1609,1610,1613,1615,1617],{"class":162,"line":347},[160,1611,1612],{"class":177},"    transform",[160,1614,181],{"class":170},[160,1616,1589],{"class":177},[160,1618,419],{"class":170},[160,1620,1621],{"class":162,"line":637},[160,1622,1596],{"class":170},[160,1624,1625],{"class":162,"line":643},[160,1626,214],{"class":170},[10,1628,1630],{"id":1629},"key-takeaways","Key Takeaways",[19,1632,1633,1636,1639,1642,1645],{},[22,1634,1635],{},"Transforms change geometry, filters change appearance, blend modes mix layers",[22,1637,1638],{},"Use transforms and opacity for animations — they skip layout and paint",[22,1640,1641],{},"Filters like blur and grayscale are cheap to apply but expensive to animate",[22,1643,1644],{},"Blend modes create rich visual layers but cost compositing time",[22,1646,1647],{},"Always test visual effects for contrast and reduced-motion accessibility",[10,1649,1651],{"id":1650},"try-it-yourself","Try It Yourself",[15,1653,1654,1655,1660,1661,1665,1666,1670],{},"Build and preview CSS transforms with our ",[1656,1657,1659],"a",{"href":1658},"\u002Ftools\u002Fcss-transform","CSS Transform Tool",". Fine-tune shadows with the ",[1656,1662,1664],{"href":1663},"\u002Ftools\u002Fcss-box-shadow","CSS Box Shadow Generator",". Shape borders with the ",[1656,1667,1669],{"href":1668},"\u002Ftools\u002Fborder-radius","Border Radius Generator",".",[10,1672,1674],{"id":1673},"related-guides","Related Guides",[19,1676,1677,1684],{},[22,1678,1679,1683],{},[1656,1680,1682],{"href":1681},"\u002Fguides\u002Fcss-transform-guide","CSS Transform Guide"," — Deep dive into translate, rotate, scale, and skew",[22,1685,1686,1690],{},[1656,1687,1689],{"href":1688},"\u002Fguides\u002Fcss-animation-tools","CSS Animation Tools"," — Turn transforms and filters into smooth motion",[1692,1693,1694],"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":155,"searchDepth":174,"depth":174,"links":1696},[1697,1698,1699,1704,1707,1712,1717,1718,1719,1720],{"id":12,"depth":174,"text":13},{"id":46,"depth":174,"text":47},{"id":128,"depth":174,"text":129,"children":1700},[1701,1702,1703],{"id":133,"depth":211,"text":134},{"id":217,"depth":211,"text":218},{"id":352,"depth":211,"text":353},{"id":426,"depth":174,"text":427,"children":1705},[1706],{"id":524,"depth":211,"text":525},{"id":692,"depth":174,"text":693,"children":1708},[1709,1710,1711],{"id":699,"depth":211,"text":700},{"id":952,"depth":211,"text":953},{"id":1068,"depth":211,"text":1069},{"id":1134,"depth":174,"text":1135,"children":1713},[1714,1715,1716],{"id":1138,"depth":211,"text":1139},{"id":1262,"depth":211,"text":1263},{"id":1411,"depth":211,"text":1412},{"id":1532,"depth":174,"text":1533},{"id":1629,"depth":174,"text":1630},{"id":1650,"depth":174,"text":1651},{"id":1673,"depth":174,"text":1674},"2026-05-28","Explore CSS transforms, filters, and blend modes — the building blocks for rich visual effects on the web.","md",{"immutable":283},"\u002Fguides\u002Fcss-visual-effects",{"title":5,"description":1722},"guides\u002Fcss-visual-effects","LxM4TeU4kivxpicvuEtUE8xf4XD99xumpQmWjnEbqls",1780401328588]