[{"data":1,"prerenderedAt":1573},["ShallowReactive",2],{"guide-css-neumorphism-guide":3},{"id":4,"title":5,"body":6,"date":1565,"description":1566,"extension":1567,"meta":1568,"navigation":580,"path":1569,"readingTime":136,"seo":1570,"stem":1571,"__hash__":1572},"guides\u002Fguides\u002Fcss-neumorphism-guide.md","Neumorphism in CSS: Shadows Guide",{"type":7,"value":8,"toc":1545},"minimark",[9,14,18,21,25,28,41,166,169,174,177,263,267,273,323,326,400,404,408,646,650,886,890,1259,1263,1266,1270,1273,1334,1338,1369,1373,1426,1467,1471,1474,1486,1489,1500,1504,1525,1529,1532,1541],[10,11,13],"h2",{"id":12},"what-is-neumorphism","What Is Neumorphism?",[15,16,17],"p",{},"Neumorphism (soft UI) is a design style that makes elements appear to extrude from or press into their background. The effect is achieved with two opposing box-shadows — one light and one dark — on an element whose background matches the surface beneath it.",[15,19,20],{},"The result looks like raised or sunken plastic: soft, tactile, and distinctly different from flat design or traditional material elevation. Popularized around 2020, neumorphism has found a niche in dashboard UIs, music players, and calculator interfaces.",[10,22,24],{"id":23},"how-the-dual-shadow-works","How the Dual Shadow Works",[15,26,27],{},"Neumorphism relies on three things being the same color:",[29,30,31,35,38],"ol",{},[32,33,34],"li",{},"The page background",[32,36,37],{},"The element's background",[32,39,40],{},"The midpoint between the two shadow colors",[42,43,48],"pre",{"className":44,"code":45,"language":46,"meta":47,"style":47},"language-css shiki shiki-themes github-light github-dark",".neumorphic-raised {\n  background: #e0e0e0;\n  border-radius: 16px;\n  box-shadow:\n    8px 8px 16px #bebebe,    \u002F* dark shadow (bottom-right) *\u002F\n    -8px -8px 16px #ffffff;  \u002F* light shadow (top-left) *\u002F\n}\n","css","",[49,50,51,64,80,97,106,134,160],"code",{"__ignoreMap":47},[52,53,56,60],"span",{"class":54,"line":55},"line",1,[52,57,59],{"class":58},"sScJk",".neumorphic-raised",[52,61,63],{"class":62},"sVt8B"," {\n",[52,65,67,71,74,77],{"class":54,"line":66},2,[52,68,70],{"class":69},"sj4cs","  background",[52,72,73],{"class":62},": ",[52,75,76],{"class":69},"#e0e0e0",[52,78,79],{"class":62},";\n",[52,81,83,86,88,91,95],{"class":54,"line":82},3,[52,84,85],{"class":69},"  border-radius",[52,87,73],{"class":62},[52,89,90],{"class":69},"16",[52,92,94],{"class":93},"szBVR","px",[52,96,79],{"class":62},[52,98,100,103],{"class":54,"line":99},4,[52,101,102],{"class":69},"  box-shadow",[52,104,105],{"class":62},":\n",[52,107,109,112,114,117,119,122,124,127,130],{"class":54,"line":108},5,[52,110,111],{"class":69},"    8",[52,113,94],{"class":93},[52,115,116],{"class":69}," 8",[52,118,94],{"class":93},[52,120,121],{"class":69}," 16",[52,123,94],{"class":93},[52,125,126],{"class":69}," #bebebe",[52,128,129],{"class":62},",    ",[52,131,133],{"class":132},"sJ8bj","\u002F* dark shadow (bottom-right) *\u002F\n",[52,135,137,140,142,145,147,149,151,154,157],{"class":54,"line":136},6,[52,138,139],{"class":69},"    -8",[52,141,94],{"class":93},[52,143,144],{"class":69}," -8",[52,146,94],{"class":93},[52,148,121],{"class":69},[52,150,94],{"class":93},[52,152,153],{"class":69}," #ffffff",[52,155,156],{"class":62},";  ",[52,158,159],{"class":132},"\u002F* light shadow (top-left) *\u002F\n",[52,161,163],{"class":54,"line":162},7,[52,164,165],{"class":62},"}\n",[15,167,168],{},"The dark shadow simulates the area where light is blocked. The light shadow simulates the area where light reflects off the raised surface. Together, they create the illusion of depth.",[170,171,173],"h3",{"id":172},"inset-pressed-variant","Inset (Pressed) Variant",[15,175,176],{},"Flip the shadows inward for a pushed-in effect:",[42,178,180],{"className":44,"code":179,"language":46,"meta":47,"style":47},".neumorphic-pressed {\n  background: #e0e0e0;\n  border-radius: 16px;\n  box-shadow:\n    inset 8px 8px 16px #bebebe,\n    inset -8px -8px 16px #ffffff;\n}\n",[49,181,182,189,199,211,217,239,259],{"__ignoreMap":47},[52,183,184,187],{"class":54,"line":55},[52,185,186],{"class":58},".neumorphic-pressed",[52,188,63],{"class":62},[52,190,191,193,195,197],{"class":54,"line":66},[52,192,70],{"class":69},[52,194,73],{"class":62},[52,196,76],{"class":69},[52,198,79],{"class":62},[52,200,201,203,205,207,209],{"class":54,"line":82},[52,202,85],{"class":69},[52,204,73],{"class":62},[52,206,90],{"class":69},[52,208,94],{"class":93},[52,210,79],{"class":62},[52,212,213,215],{"class":54,"line":99},[52,214,102],{"class":69},[52,216,105],{"class":62},[52,218,219,222,224,226,228,230,232,234,236],{"class":54,"line":108},[52,220,221],{"class":69},"    inset",[52,223,116],{"class":69},[52,225,94],{"class":93},[52,227,116],{"class":69},[52,229,94],{"class":93},[52,231,121],{"class":69},[52,233,94],{"class":93},[52,235,126],{"class":69},[52,237,238],{"class":62},",\n",[52,240,241,243,245,247,249,251,253,255,257],{"class":54,"line":136},[52,242,221],{"class":69},[52,244,144],{"class":69},[52,246,94],{"class":93},[52,248,144],{"class":69},[52,250,94],{"class":93},[52,252,121],{"class":69},[52,254,94],{"class":93},[52,256,153],{"class":69},[52,258,79],{"class":62},[52,260,261],{"class":54,"line":162},[52,262,165],{"class":62},[10,264,266],{"id":265},"generating-neumorphic-shadows","Generating Neumorphic Shadows",[15,268,269,270,272],{},"The shadow colors are derived from the background. For a background of ",[49,271,76],{}," (HSL: 0, 0%, 88%):",[274,275,276,292],"table",{},[277,278,279],"thead",{},[280,281,282,286,289],"tr",{},[283,284,285],"th",{},"Shadow Type",[283,287,288],{},"Calculation",[283,290,291],{},"Result",[293,294,295,310],"tbody",{},[280,296,297,301,304],{},[298,299,300],"td",{},"Dark",[298,302,303],{},"Decrease lightness by ~10%",[298,305,306,309],{},[49,307,308],{},"#bebebe"," (HSL: 0, 0%, 75%)",[280,311,312,315,318],{},[298,313,314],{},"Light",[298,316,317],{},"Increase lightness by ~10% or use white",[298,319,320],{},[49,321,322],{},"#ffffff",[15,324,325],{},"The offset and blur values control the depth perception:",[274,327,328,344],{},[277,329,330],{},[280,331,332,335,338,341],{},[283,333,334],{},"Depth",[283,336,337],{},"Offset",[283,339,340],{},"Blur",[283,342,343],{},"Effect",[293,345,346,360,373,387],{},[280,347,348,351,354,357],{},[298,349,350],{},"Subtle",[298,352,353],{},"4px",[298,355,356],{},"8px",[298,358,359],{},"Slight raise, clean look",[280,361,362,365,367,370],{},[298,363,364],{},"Medium",[298,366,356],{},[298,368,369],{},"16px",[298,371,372],{},"Standard neumorphic raised",[280,374,375,378,381,384],{},[298,376,377],{},"Deep",[298,379,380],{},"12px",[298,382,383],{},"24px",[298,385,386],{},"Strong extrusion",[280,388,389,392,394,397],{},[298,390,391],{},"Extra deep",[298,393,369],{},[298,395,396],{},"32px",[298,398,399],{},"Dramatic, almost 3D",[10,401,403],{"id":402},"practical-components","Practical Components",[170,405,407],{"id":406},"neumorphic-button","Neumorphic Button",[42,409,411],{"className":44,"code":410,"language":46,"meta":47,"style":47},".neu-button {\n  background: #e0e0e0;\n  border: none;\n  border-radius: 12px;\n  padding: 12px 28px;\n  font-size: 1rem;\n  cursor: pointer;\n  box-shadow:\n    6px 6px 12px #bebebe,\n    -6px -6px 12px #ffffff;\n  transition: box-shadow 0.15s ease;\n}\n\n.neu-button:active {\n  box-shadow:\n    inset 4px 4px 8px #bebebe,\n    inset -4px -4px 8px #ffffff;\n}\n",[49,412,413,420,430,442,455,473,488,500,507,529,550,570,575,582,590,597,619,641],{"__ignoreMap":47},[52,414,415,418],{"class":54,"line":55},[52,416,417],{"class":58},".neu-button",[52,419,63],{"class":62},[52,421,422,424,426,428],{"class":54,"line":66},[52,423,70],{"class":69},[52,425,73],{"class":62},[52,427,76],{"class":69},[52,429,79],{"class":62},[52,431,432,435,437,440],{"class":54,"line":82},[52,433,434],{"class":69},"  border",[52,436,73],{"class":62},[52,438,439],{"class":69},"none",[52,441,79],{"class":62},[52,443,444,446,448,451,453],{"class":54,"line":99},[52,445,85],{"class":69},[52,447,73],{"class":62},[52,449,450],{"class":69},"12",[52,452,94],{"class":93},[52,454,79],{"class":62},[52,456,457,460,462,464,466,469,471],{"class":54,"line":108},[52,458,459],{"class":69},"  padding",[52,461,73],{"class":62},[52,463,450],{"class":69},[52,465,94],{"class":93},[52,467,468],{"class":69}," 28",[52,470,94],{"class":93},[52,472,79],{"class":62},[52,474,475,478,480,483,486],{"class":54,"line":136},[52,476,477],{"class":69},"  font-size",[52,479,73],{"class":62},[52,481,482],{"class":69},"1",[52,484,485],{"class":93},"rem",[52,487,79],{"class":62},[52,489,490,493,495,498],{"class":54,"line":162},[52,491,492],{"class":69},"  cursor",[52,494,73],{"class":62},[52,496,497],{"class":69},"pointer",[52,499,79],{"class":62},[52,501,503,505],{"class":54,"line":502},8,[52,504,102],{"class":69},[52,506,105],{"class":62},[52,508,510,513,515,518,520,523,525,527],{"class":54,"line":509},9,[52,511,512],{"class":69},"    6",[52,514,94],{"class":93},[52,516,517],{"class":69}," 6",[52,519,94],{"class":93},[52,521,522],{"class":69}," 12",[52,524,94],{"class":93},[52,526,126],{"class":69},[52,528,238],{"class":62},[52,530,532,535,537,540,542,544,546,548],{"class":54,"line":531},10,[52,533,534],{"class":69},"    -6",[52,536,94],{"class":93},[52,538,539],{"class":69}," -6",[52,541,94],{"class":93},[52,543,522],{"class":69},[52,545,94],{"class":93},[52,547,153],{"class":69},[52,549,79],{"class":62},[52,551,553,556,559,562,565,568],{"class":54,"line":552},11,[52,554,555],{"class":69},"  transition",[52,557,558],{"class":62},": box-shadow ",[52,560,561],{"class":69},"0.15",[52,563,564],{"class":93},"s",[52,566,567],{"class":69}," ease",[52,569,79],{"class":62},[52,571,573],{"class":54,"line":572},12,[52,574,165],{"class":62},[52,576,578],{"class":54,"line":577},13,[52,579,581],{"emptyLinePlaceholder":580},true,"\n",[52,583,585,588],{"class":54,"line":584},14,[52,586,587],{"class":58},".neu-button:active",[52,589,63],{"class":62},[52,591,593,595],{"class":54,"line":592},15,[52,594,102],{"class":69},[52,596,105],{"class":62},[52,598,600,602,605,607,609,611,613,615,617],{"class":54,"line":599},16,[52,601,221],{"class":69},[52,603,604],{"class":69}," 4",[52,606,94],{"class":93},[52,608,604],{"class":69},[52,610,94],{"class":93},[52,612,116],{"class":69},[52,614,94],{"class":93},[52,616,126],{"class":69},[52,618,238],{"class":62},[52,620,622,624,627,629,631,633,635,637,639],{"class":54,"line":621},17,[52,623,221],{"class":69},[52,625,626],{"class":69}," -4",[52,628,94],{"class":93},[52,630,626],{"class":69},[52,632,94],{"class":93},[52,634,116],{"class":69},[52,636,94],{"class":93},[52,638,153],{"class":69},[52,640,79],{"class":62},[52,642,644],{"class":54,"line":643},18,[52,645,165],{"class":62},[170,647,649],{"id":648},"neumorphic-input-field","Neumorphic Input Field",[42,651,653],{"className":44,"code":652,"language":46,"meta":47,"style":47},".neu-input {\n  background: #e0e0e0;\n  border: none;\n  border-radius: 12px;\n  padding: 12px 16px;\n  font-size: 1rem;\n  box-shadow:\n    inset 4px 4px 8px #bebebe,\n    inset -4px -4px 8px #ffffff;\n}\n\n.neu-input:focus {\n  outline: none;\n  box-shadow:\n    inset 4px 4px 8px #bebebe,\n    inset -4px -4px 8px #ffffff,\n    0 0 0 2px rgba(100, 100, 255, 0.3);\n}\n",[49,654,655,662,672,682,694,710,722,728,748,768,772,776,783,794,800,820,840,882],{"__ignoreMap":47},[52,656,657,660],{"class":54,"line":55},[52,658,659],{"class":58},".neu-input",[52,661,63],{"class":62},[52,663,664,666,668,670],{"class":54,"line":66},[52,665,70],{"class":69},[52,667,73],{"class":62},[52,669,76],{"class":69},[52,671,79],{"class":62},[52,673,674,676,678,680],{"class":54,"line":82},[52,675,434],{"class":69},[52,677,73],{"class":62},[52,679,439],{"class":69},[52,681,79],{"class":62},[52,683,684,686,688,690,692],{"class":54,"line":99},[52,685,85],{"class":69},[52,687,73],{"class":62},[52,689,450],{"class":69},[52,691,94],{"class":93},[52,693,79],{"class":62},[52,695,696,698,700,702,704,706,708],{"class":54,"line":108},[52,697,459],{"class":69},[52,699,73],{"class":62},[52,701,450],{"class":69},[52,703,94],{"class":93},[52,705,121],{"class":69},[52,707,94],{"class":93},[52,709,79],{"class":62},[52,711,712,714,716,718,720],{"class":54,"line":136},[52,713,477],{"class":69},[52,715,73],{"class":62},[52,717,482],{"class":69},[52,719,485],{"class":93},[52,721,79],{"class":62},[52,723,724,726],{"class":54,"line":162},[52,725,102],{"class":69},[52,727,105],{"class":62},[52,729,730,732,734,736,738,740,742,744,746],{"class":54,"line":502},[52,731,221],{"class":69},[52,733,604],{"class":69},[52,735,94],{"class":93},[52,737,604],{"class":69},[52,739,94],{"class":93},[52,741,116],{"class":69},[52,743,94],{"class":93},[52,745,126],{"class":69},[52,747,238],{"class":62},[52,749,750,752,754,756,758,760,762,764,766],{"class":54,"line":509},[52,751,221],{"class":69},[52,753,626],{"class":69},[52,755,94],{"class":93},[52,757,626],{"class":69},[52,759,94],{"class":93},[52,761,116],{"class":69},[52,763,94],{"class":93},[52,765,153],{"class":69},[52,767,79],{"class":62},[52,769,770],{"class":54,"line":531},[52,771,165],{"class":62},[52,773,774],{"class":54,"line":552},[52,775,581],{"emptyLinePlaceholder":580},[52,777,778,781],{"class":54,"line":572},[52,779,780],{"class":58},".neu-input:focus",[52,782,63],{"class":62},[52,784,785,788,790,792],{"class":54,"line":577},[52,786,787],{"class":69},"  outline",[52,789,73],{"class":62},[52,791,439],{"class":69},[52,793,79],{"class":62},[52,795,796,798],{"class":54,"line":584},[52,797,102],{"class":69},[52,799,105],{"class":62},[52,801,802,804,806,808,810,812,814,816,818],{"class":54,"line":592},[52,803,221],{"class":69},[52,805,604],{"class":69},[52,807,94],{"class":93},[52,809,604],{"class":69},[52,811,94],{"class":93},[52,813,116],{"class":69},[52,815,94],{"class":93},[52,817,126],{"class":69},[52,819,238],{"class":62},[52,821,822,824,826,828,830,832,834,836,838],{"class":54,"line":599},[52,823,221],{"class":69},[52,825,626],{"class":69},[52,827,94],{"class":93},[52,829,626],{"class":69},[52,831,94],{"class":93},[52,833,116],{"class":69},[52,835,94],{"class":93},[52,837,153],{"class":69},[52,839,238],{"class":62},[52,841,842,845,848,850,853,855,858,861,864,867,869,871,874,876,879],{"class":54,"line":621},[52,843,844],{"class":69},"    0",[52,846,847],{"class":69}," 0",[52,849,847],{"class":69},[52,851,852],{"class":69}," 2",[52,854,94],{"class":93},[52,856,857],{"class":69}," rgba",[52,859,860],{"class":62},"(",[52,862,863],{"class":69},"100",[52,865,866],{"class":62},", ",[52,868,863],{"class":69},[52,870,866],{"class":62},[52,872,873],{"class":69},"255",[52,875,866],{"class":62},[52,877,878],{"class":69},"0.3",[52,880,881],{"class":62},");\n",[52,883,884],{"class":54,"line":643},[52,885,165],{"class":62},[170,887,889],{"id":888},"neumorphic-toggle","Neumorphic Toggle",[42,891,893],{"className":44,"code":892,"language":46,"meta":47,"style":47},".neu-toggle {\n  width: 60px;\n  height: 30px;\n  background: #e0e0e0;\n  border-radius: 15px;\n  box-shadow:\n    inset 4px 4px 8px #bebebe,\n    inset -4px -4px 8px #ffffff;\n  position: relative;\n  cursor: pointer;\n}\n\n.neu-toggle::after {\n  content: '';\n  position: absolute;\n  width: 24px;\n  height: 24px;\n  top: 3px;\n  left: 3px;\n  background: #e0e0e0;\n  border-radius: 50%;\n  box-shadow:\n    3px 3px 6px #bebebe,\n    -3px -3px 6px #ffffff;\n  transition: transform 0.2s ease;\n}\n\n.neu-toggle.active::after {\n  transform: translateX(30px);\n  background: #a78bfa;\n}\n",[49,894,895,902,916,930,940,953,959,979,999,1011,1021,1025,1029,1036,1049,1060,1073,1085,1099,1113,1124,1139,1146,1167,1188,1205,1210,1215,1223,1242,1254],{"__ignoreMap":47},[52,896,897,900],{"class":54,"line":55},[52,898,899],{"class":58},".neu-toggle",[52,901,63],{"class":62},[52,903,904,907,909,912,914],{"class":54,"line":66},[52,905,906],{"class":69},"  width",[52,908,73],{"class":62},[52,910,911],{"class":69},"60",[52,913,94],{"class":93},[52,915,79],{"class":62},[52,917,918,921,923,926,928],{"class":54,"line":82},[52,919,920],{"class":69},"  height",[52,922,73],{"class":62},[52,924,925],{"class":69},"30",[52,927,94],{"class":93},[52,929,79],{"class":62},[52,931,932,934,936,938],{"class":54,"line":99},[52,933,70],{"class":69},[52,935,73],{"class":62},[52,937,76],{"class":69},[52,939,79],{"class":62},[52,941,942,944,946,949,951],{"class":54,"line":108},[52,943,85],{"class":69},[52,945,73],{"class":62},[52,947,948],{"class":69},"15",[52,950,94],{"class":93},[52,952,79],{"class":62},[52,954,955,957],{"class":54,"line":136},[52,956,102],{"class":69},[52,958,105],{"class":62},[52,960,961,963,965,967,969,971,973,975,977],{"class":54,"line":162},[52,962,221],{"class":69},[52,964,604],{"class":69},[52,966,94],{"class":93},[52,968,604],{"class":69},[52,970,94],{"class":93},[52,972,116],{"class":69},[52,974,94],{"class":93},[52,976,126],{"class":69},[52,978,238],{"class":62},[52,980,981,983,985,987,989,991,993,995,997],{"class":54,"line":502},[52,982,221],{"class":69},[52,984,626],{"class":69},[52,986,94],{"class":93},[52,988,626],{"class":69},[52,990,94],{"class":93},[52,992,116],{"class":69},[52,994,94],{"class":93},[52,996,153],{"class":69},[52,998,79],{"class":62},[52,1000,1001,1004,1006,1009],{"class":54,"line":509},[52,1002,1003],{"class":69},"  position",[52,1005,73],{"class":62},[52,1007,1008],{"class":69},"relative",[52,1010,79],{"class":62},[52,1012,1013,1015,1017,1019],{"class":54,"line":531},[52,1014,492],{"class":69},[52,1016,73],{"class":62},[52,1018,497],{"class":69},[52,1020,79],{"class":62},[52,1022,1023],{"class":54,"line":552},[52,1024,165],{"class":62},[52,1026,1027],{"class":54,"line":572},[52,1028,581],{"emptyLinePlaceholder":580},[52,1030,1031,1034],{"class":54,"line":577},[52,1032,1033],{"class":58},".neu-toggle::after",[52,1035,63],{"class":62},[52,1037,1038,1041,1043,1047],{"class":54,"line":584},[52,1039,1040],{"class":69},"  content",[52,1042,73],{"class":62},[52,1044,1046],{"class":1045},"sZZnC","''",[52,1048,79],{"class":62},[52,1050,1051,1053,1055,1058],{"class":54,"line":592},[52,1052,1003],{"class":69},[52,1054,73],{"class":62},[52,1056,1057],{"class":69},"absolute",[52,1059,79],{"class":62},[52,1061,1062,1064,1066,1069,1071],{"class":54,"line":599},[52,1063,906],{"class":69},[52,1065,73],{"class":62},[52,1067,1068],{"class":69},"24",[52,1070,94],{"class":93},[52,1072,79],{"class":62},[52,1074,1075,1077,1079,1081,1083],{"class":54,"line":621},[52,1076,920],{"class":69},[52,1078,73],{"class":62},[52,1080,1068],{"class":69},[52,1082,94],{"class":93},[52,1084,79],{"class":62},[52,1086,1087,1090,1092,1095,1097],{"class":54,"line":643},[52,1088,1089],{"class":69},"  top",[52,1091,73],{"class":62},[52,1093,1094],{"class":69},"3",[52,1096,94],{"class":93},[52,1098,79],{"class":62},[52,1100,1102,1105,1107,1109,1111],{"class":54,"line":1101},19,[52,1103,1104],{"class":69},"  left",[52,1106,73],{"class":62},[52,1108,1094],{"class":69},[52,1110,94],{"class":93},[52,1112,79],{"class":62},[52,1114,1116,1118,1120,1122],{"class":54,"line":1115},20,[52,1117,70],{"class":69},[52,1119,73],{"class":62},[52,1121,76],{"class":69},[52,1123,79],{"class":62},[52,1125,1127,1129,1131,1134,1137],{"class":54,"line":1126},21,[52,1128,85],{"class":69},[52,1130,73],{"class":62},[52,1132,1133],{"class":69},"50",[52,1135,1136],{"class":93},"%",[52,1138,79],{"class":62},[52,1140,1142,1144],{"class":54,"line":1141},22,[52,1143,102],{"class":69},[52,1145,105],{"class":62},[52,1147,1149,1152,1154,1157,1159,1161,1163,1165],{"class":54,"line":1148},23,[52,1150,1151],{"class":69},"    3",[52,1153,94],{"class":93},[52,1155,1156],{"class":69}," 3",[52,1158,94],{"class":93},[52,1160,517],{"class":69},[52,1162,94],{"class":93},[52,1164,126],{"class":69},[52,1166,238],{"class":62},[52,1168,1170,1173,1175,1178,1180,1182,1184,1186],{"class":54,"line":1169},24,[52,1171,1172],{"class":69},"    -3",[52,1174,94],{"class":93},[52,1176,1177],{"class":69}," -3",[52,1179,94],{"class":93},[52,1181,517],{"class":69},[52,1183,94],{"class":93},[52,1185,153],{"class":69},[52,1187,79],{"class":62},[52,1189,1191,1193,1196,1199,1201,1203],{"class":54,"line":1190},25,[52,1192,555],{"class":69},[52,1194,1195],{"class":62},": transform ",[52,1197,1198],{"class":69},"0.2",[52,1200,564],{"class":93},[52,1202,567],{"class":69},[52,1204,79],{"class":62},[52,1206,1208],{"class":54,"line":1207},26,[52,1209,165],{"class":62},[52,1211,1213],{"class":54,"line":1212},27,[52,1214,581],{"emptyLinePlaceholder":580},[52,1216,1218,1221],{"class":54,"line":1217},28,[52,1219,1220],{"class":58},".neu-toggle.active::after",[52,1222,63],{"class":62},[52,1224,1226,1229,1231,1234,1236,1238,1240],{"class":54,"line":1225},29,[52,1227,1228],{"class":69},"  transform",[52,1230,73],{"class":62},[52,1232,1233],{"class":69},"translateX",[52,1235,860],{"class":62},[52,1237,925],{"class":69},[52,1239,94],{"class":93},[52,1241,881],{"class":62},[52,1243,1245,1247,1249,1252],{"class":54,"line":1244},30,[52,1246,70],{"class":69},[52,1248,73],{"class":62},[52,1250,1251],{"class":69},"#a78bfa",[52,1253,79],{"class":62},[52,1255,1257],{"class":54,"line":1256},31,[52,1258,165],{"class":62},[10,1260,1262],{"id":1261},"limitations-and-accessibility","Limitations and Accessibility",[15,1264,1265],{},"Neumorphism has well-documented accessibility challenges:",[170,1267,1269],{"id":1268},"contrast-problems","Contrast Problems",[15,1271,1272],{},"Because the element's background matches the surface, text on neumorphic elements often has poor contrast. The shadows themselves are low-contrast by design.",[274,1274,1275,1288],{},[277,1276,1277],{},[280,1278,1279,1282,1285],{},[283,1280,1281],{},"Issue",[283,1283,1284],{},"Impact",[283,1286,1287],{},"Mitigation",[293,1289,1290,1301,1312,1323],{},[280,1291,1292,1295,1298],{},[298,1293,1294],{},"Low text contrast",[298,1296,1297],{},"Fails WCAG AA on many backgrounds",[298,1299,1300],{},"Use dark text, ensure 4.5:1 ratio",[280,1302,1303,1306,1309],{},[298,1304,1305],{},"Shadow visibility",[298,1307,1308],{},"Shadows invisible to some users",[298,1310,1311],{},"Never rely on shadows alone for affordance",[280,1313,1314,1317,1320],{},[298,1315,1316],{},"Toggle states",[298,1318,1319],{},"Hard to distinguish pressed\u002Fraised",[298,1321,1322],{},"Add color change or icon shift",[280,1324,1325,1328,1331],{},[298,1326,1327],{},"Color blindness",[298,1329,1330],{},"Depth illusion collapses",[298,1332,1333],{},"Use labels and borders as backup",[170,1335,1337],{"id":1336},"design-guidelines-for-accessible-neumorphism","Design Guidelines for Accessible Neumorphism",[29,1339,1340,1347,1357,1363],{},[32,1341,1342,1346],{},[1343,1344,1345],"strong",{},"Always meet 4.5:1 text contrast"," — even if it means using a darker text color than the aesthetic strictly wants",[32,1348,1349,1352,1353,1356],{},[1343,1350,1351],{},"Add visible borders"," — a subtle ",[49,1354,1355],{},"1px solid rgba(0,0,0,0.05)"," helps define boundaries",[32,1358,1359,1362],{},[1343,1360,1361],{},"Use color for state"," — don't rely solely on shadow direction (raised vs pressed) to show toggles",[32,1364,1365,1368],{},[1343,1366,1367],{},"Test with high contrast mode"," — neumorphic elements should degrade gracefully when shadows are removed",[10,1370,1372],{"id":1371},"tailwind-implementation","Tailwind Implementation",[42,1374,1376],{"className":44,"code":1375,"language":46,"meta":47,"style":47},"\u002F* Add to tailwind.config.ts theme.extend.boxShadow *\u002F\n'neu-raised': '8px 8px 16px rgba(190,190,190,0.8), -8px -8px 16px rgba(255,255,255,0.9)',\n'neu-pressed': 'inset 8px 8px 16px rgba(190,190,190,0.8), inset -8px -8px 16px rgba(255,255,255,0.9)',\n",[49,1377,1378,1383,1407],{"__ignoreMap":47},[52,1379,1380],{"class":54,"line":55},[52,1381,1382],{"class":132},"\u002F* Add to tailwind.config.ts theme.extend.boxShadow *\u002F\n",[52,1384,1385,1388,1392,1395,1398,1401,1404],{"class":54,"line":66},[52,1386,1387],{"class":62},"'",[52,1389,1391],{"class":1390},"s9eBZ","neu-raised",[52,1393,1394],{"class":62},"': '8px 8px 16px rgba(190,190,190,0",[52,1396,1397],{"class":58},".8",[52,1399,1400],{"class":62},"), -8px -8px 16px rgba(255,255,255,0",[52,1402,1403],{"class":58},".9",[52,1405,1406],{"class":62},")',\n",[52,1408,1409,1411,1414,1417,1419,1422,1424],{"class":54,"line":82},[52,1410,1387],{"class":62},[52,1412,1413],{"class":1390},"neu-pressed",[52,1415,1416],{"class":62},"': 'inset 8px 8px 16px rgba(190,190,190,0",[52,1418,1397],{"class":58},[52,1420,1421],{"class":62},"), inset -8px -8px 16px rgba(255,255,255,0",[52,1423,1403],{"class":58},[52,1425,1406],{"class":62},[42,1427,1431],{"className":1428,"code":1429,"language":1430,"meta":47,"style":47},"language-html shiki shiki-themes github-light github-dark","\u003Cbutton class=\"bg-[#e0e0e0] shadow-neu-raised rounded-xl px-6 py-3 active:shadow-neu-pressed\">\n  Click Me\n\u003C\u002Fbutton>\n","html",[49,1432,1433,1453,1458],{"__ignoreMap":47},[52,1434,1435,1438,1441,1444,1447,1450],{"class":54,"line":55},[52,1436,1437],{"class":62},"\u003C",[52,1439,1440],{"class":1390},"button",[52,1442,1443],{"class":58}," class",[52,1445,1446],{"class":62},"=",[52,1448,1449],{"class":1045},"\"bg-[#e0e0e0] shadow-neu-raised rounded-xl px-6 py-3 active:shadow-neu-pressed\"",[52,1451,1452],{"class":62},">\n",[52,1454,1455],{"class":54,"line":66},[52,1456,1457],{"class":62},"  Click Me\n",[52,1459,1460,1463,1465],{"class":54,"line":82},[52,1461,1462],{"class":62},"\u003C\u002F",[52,1464,1440],{"class":1390},[52,1466,1452],{"class":62},[10,1468,1470],{"id":1469},"when-to-use-neumorphism","When to Use Neumorphism",[15,1472,1473],{},"Neumorphism works best in:",[1475,1476,1477,1480,1483],"ul",{},[32,1478,1479],{},"Low-information-density UIs (dashboards, music players, calculators)",[32,1481,1482],{},"Settings pages with toggles and sliders",[32,1484,1485],{},"Visual showcase or portfolio sites",[15,1487,1488],{},"Avoid it for:",[1475,1490,1491,1494,1497],{},[32,1492,1493],{},"High-density data tables or text-heavy pages",[32,1495,1496],{},"Forms requiring clear error states",[32,1498,1499],{},"Apps where accessibility is a hard requirement (government, healthcare)",[10,1501,1503],{"id":1502},"related-guides","Related Guides",[1475,1505,1506,1513,1519],{},[32,1507,1508],{},[1509,1510,1512],"a",{"href":1511},"\u002Fguides\u002Fcss-box-shadow-guide","CSS Box Shadow Guide",[32,1514,1515],{},[1509,1516,1518],{"href":1517},"\u002Fguides\u002Frealistic-css-shadows","Creating Realistic CSS Shadows",[32,1520,1521],{},[1509,1522,1524],{"href":1523},"\u002Fguides\u002Fcss-visual-effects","CSS Visual Effects",[10,1526,1528],{"id":1527},"try-it-yourself","Try It Yourself",[15,1530,1531],{},"Build neumorphic shadows interactively — tweak both light and dark shadows, adjust offset and blur, and preview raised vs pressed states in real time.",[15,1533,1534,1535],{},"👉 ",[1509,1536,1538],{"href":1537},"\u002Ftools\u002Fcss-box-shadow",[1343,1539,1540],{},"Box Shadow Generator",[1542,1543,1544],"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 pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-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 .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 .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":47,"searchDepth":66,"depth":66,"links":1546},[1547,1548,1551,1552,1557,1561,1562,1563,1564],{"id":12,"depth":66,"text":13},{"id":23,"depth":66,"text":24,"children":1549},[1550],{"id":172,"depth":82,"text":173},{"id":265,"depth":66,"text":266},{"id":402,"depth":66,"text":403,"children":1553},[1554,1555,1556],{"id":406,"depth":82,"text":407},{"id":648,"depth":82,"text":649},{"id":888,"depth":82,"text":889},{"id":1261,"depth":66,"text":1262,"children":1558},[1559,1560],{"id":1268,"depth":82,"text":1269},{"id":1336,"depth":82,"text":1337},{"id":1371,"depth":66,"text":1372},{"id":1469,"depth":66,"text":1470},{"id":1502,"depth":66,"text":1503},{"id":1527,"depth":66,"text":1528},"2026-05-28","How to create soft UI neumorphic effects with dual box-shadows in CSS.","md",{"immutable":580},"\u002Fguides\u002Fcss-neumorphism-guide",{"title":5,"description":1566},"guides\u002Fcss-neumorphism-guide","agqDtZoCSjGaFMxbZhnrY6fAXzKDxvNuaONhDH0fZpk",1780401333004]