[{"data":1,"prerenderedAt":547},["ShallowReactive",2],{"project-44445238":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":27,"sentiment":28,"stance_mix":29,"scored_comments":32,"aspects":33,"strip":43,"post_text":45,"what":46,"said":73,"maker_in_thread":173,"shape":186,"grid":191,"attempts":508,"same_week":509,"maker_shows":44,"maker_hidden":539,"reader_version":540,"card":541},"44445238","glass3d","CSS generator for a high-def glass effect","title","Show HN: CSS generator for a high-def glass effect","https:\u002F\u002Fglass3d.dev\u002F","glass3d.dev","kris-kay",1751471463,2025,420,117,106,3837,3,"legend","dev_tools","css generator","web_app",[24,25,21,26],"css glassmorphism","backdrop-filter","frosted glass css","debated",0.045,{"positive":30,"neutral":31,"mixed":18,"critical":30},15,5,38,{"execution":34,"idea":37,"design":38,"performance":39,"privacy":40,"docs":42},{"positive":35,"critical":36},2,4,{"positive":35,"critical":31},{"positive":31,"critical":35},{"positive":35,"critical":36},{"positive":41,"critical":41},0,{"positive":41,"critical":41},[44,41,41,41,18,41,41,41,41,41,41,41,18,41,41,41,31,41,44,18,18,44,44,31,18,18,31,44,18,41,41,44,35,18,31,31,31,18,31,36],1,"There are lots of glassmorphism generators out there, but I wanted to push the effect further! This project is the result of months of experimenting with CSS property layering and battling browser quirks.\n\nCross-browser compatibility is actually the reason I rely on ::before and ::after pseudo-elements to build up the effect. Move the color\u002Fopacity to the main element, and you’ll get weird color bleed on the corners in Chrome. Move the texture, and it muddles the bevel’s specular highlight. Move the bevel, and it gets blurred out by the backdrop-filter. And so on!\n\nLayers include: * Adjustable",{"problem":47,"audience":53,"pricing":53,"motivation":54,"time_to_build":58,"stack":62,"openness":71,"stage":72,"team_size":71},{"value":48,"source":49,"evidence":50},"Creating high-definition glass effects in CSS that work across browsers","maker",[51],{"id":52},"post",null,{"value":55,"source":49,"evidence":56},"Push glassmorphism effect further than existing generators",[57],{"id":52},{"value":59,"source":49,"evidence":60},"months of experimenting",[61],{"id":52},[63,67],{"value":64,"source":49,"evidence":65},"CSS",[66],{"id":52},{"value":68,"source":49,"evidence":69},"SCSS",[70],{"id":52},"unknown","beta",{"praise":74,"objections":91,"requests":117,"questions":136,"alternatives":151},[75],{"value":76,"source":77,"evidence":78},"Looks polished and nice effect","commenter",[79,83,87],{"id":80,"by":81,"text":82},"44445939","mbforbes","Really nicely done! It's always surprising to me how often computer graphics isn't \"one weird trick\" and more like \"5 layered tricks.\" Doing it with cross-browser compat is an…",{"id":84,"by":85,"text":86},"44446077","tempodox","Wow, that Video tab looks gorgeous. I still don't understand yet how it's actually done.",{"id":88,"by":89,"text":90},"44450487","suralind","It looks so much better with some texture!",[92,103,110],{"value":93,"source":77,"evidence":94},"Lacks refraction, so it doesn't feel like real glass",[95,99],{"id":96,"by":97,"text":98},"44446051","jauntywundrkind","Looks pretty good. But missing out on the refractive aspect of glass takes away the strong visual separation of layers that IMO is Liquid Glass's biggest contribution. Material…",{"id":100,"by":101,"text":102},"44446622","magic_hamster","It's a nice effect, but to me this doesn't really feel like glass. I think the most immediate difference is how light has no interaction with the bevels. I also expect some light…",{"value":104,"source":77,"evidence":105},"Blur only uses pixels directly behind the surface",[106],{"id":107,"by":108,"text":109},"44446017","chrismorgan","This suffers from the problem of only blurring using the pixels immediately behind the surface, as demonstrated well in…",{"value":111,"source":77,"evidence":112},"Heavy on performance, scrolling slow on mobile",[113],{"id":114,"by":115,"text":116},"44448721","mikedelfino","That content scrolls quite slow on my phone. Is there another scrolling effect that makes it slower on purpose or it's a side effect of the glass look?",[118,122,129],{"value":119,"source":77,"evidence":120},"Add refractive edge distortion like Liquid Glass",[121],{"id":96,"by":97,"text":98},{"value":123,"source":77,"evidence":124},"Add a Tailwind config",[125],{"id":126,"by":127,"text":128},"44461822","v5v3","I would suggest adding a Tailwind config too, seeing as it's so prevalent.",{"value":130,"source":77,"evidence":131},"Collapsible preview box on mobile",[132],{"id":133,"by":134,"text":135},"44453748","smeej","I might be missing something, but I think this would be a lot more useful to me on mobile if I could hide or collapse the box. Instead, it takes up the entire screen and I can't…",[137,144],{"value":138,"source":77,"evidence":139},"Is this new compared to Aero glass or existing glassmorphism?",[140],{"id":141,"by":142,"text":143},"44446442","elpocko","Is this considered new design? What is special about it? I don't see much of a difference compared to the Aero glass effect in Windows Vista from 2006. I've also seen it on many…",{"value":145,"source":77,"evidence":146},"Can the referenced texture image be hosted by users?",[147],{"id":148,"by":149,"text":150},"44447663","jand","Are users allowed to copy the referenced egg-shell.png and host it themselves or is this connected to some sort of metric you like to gather?",[152,159,166],{"value":153,"source":77,"evidence":154},"ui.glass CSS generator",[155],{"id":156,"by":157,"text":158},"44446758","swyx","i collect these! https:\u002F\u002Fgithub.com\u002Fswyxio\u002Fspark-joy others - https:\u002F\u002Fui.glass\u002Fgenerator\u002F Get started with this free CSS generator based on the glassmorphism design…",{"value":160,"source":77,"evidence":161},"Real-glass JavaScript refraction demo",[162],{"id":163,"by":164,"text":165},"44455747","explosion-s","I've made a JavaScript version that actually refracts elements on the page, check it out: https:\u002F\u002Freal-glass.vercel.app\u002F",{"value":167,"source":77,"evidence":168},"SVG filter glass implementations on CodePen",[169],{"id":170,"by":171,"text":172},"44451187","adamschwartz","I’m confused, but maybe two wrongs here do make a right. Please allow me to explain. Putting aside for the moment that I personally find Apple’s iOS 26 design objectionable[1], I…",{"comments":174,"answered":175,"key":176},34,7,[177,180,183],{"id":178,"text":179},"44447870","I did read Josh's great article and had a go at implementing the tutorials. Unfortunately, I ran into some issues with the border-radius via SVG mask bit. It worked great on a…",{"id":181,"text":182},"44448275","That is a very impressive attempt at Liquid Glass! The whole cross-browser and cross-platform bit is still a challenge sadly → \"Only works on Impeller, so Web, Windows, and Linux…",{"id":184,"text":185},"44448513","I fully agree that Liquid Glass is almost impossible to replicate with browser technology without using 3D shaders. But I’m curious to know your opinion about why apps that rely…",{"commenters":187,"max_depth":188,"maker_replies":174,"first_comment_mins":189,"lifespan_hours":190},62,6,59,54,[192,194,196,200,202,204,206,208,212,214,216,219,221,225,228,229,232,236,239,242,244,246,250,252,255,257,260,263,265,267,270,273,277,279,282,285,289,291,294,297,298,301,304,305,308,311,313,315,317,319,322,324,327,329,332,334,337,341,344,346,349,351,354,357,359,362,366,369,371,373,375,377,379,382,385,388,392,394,399,403,405,407,411,413,414,417,419,421,423,425,428,430,434,436,440,443,445,447,449,451,454,457,459,461,465,467,471,476,481,483,485,488,490,492,496,500,504],[107,41,44,193,108,41],"project\u002Fcritical\u002Fexecution",[178,41,41,195,11,44],"maker\u002Fneutral\u002Fexecution",[197,41,41,198,199,41],"44450662","commenter\u002Fneutral\u002Fidea","andrewmcwatters",[201,41,41,198,108,41],"44452246",[203,41,41,198,199,41],"44455207",[205,41,41,198,108,41],"44464630",[207,41,41,198,199,41],"44467395",[209,41,41,210,211,41],"44453638","commenter\u002Fneutral\u002Fperformance","nothrabannosir",[213,41,41,210,108,41],"44454650",[215,41,41,210,199,41],"44455258",[217,41,41,198,218,41],"44462694","account42",[96,44,18,220,97,41],"project\u002Fmixed\u002Fidea",[222,44,41,223,224,41],"44446300","other\u002Fneutral\u002Fnone","jasonthorsness",[226,44,41,223,227,41],"44446868","gumby271",[181,44,41,223,11,44],[230,44,41,223,231,41],"44451053","dleeftink",[233,44,41,234,235,41],"44447723","commenter\u002Fneutral\u002Fnone","silvestrov",[237,44,41,234,238,41],"44449926","dylan604",[240,44,41,223,241,41],"44447777","_benton",[184,44,41,243,11,44],"maker\u002Fneutral\u002Fnone",[245,44,41,234,238,41],"44449883",[247,44,41,248,249,41],"44451473","other\u002Fneutral\u002Fperformance","cyral",[251,44,41,223,241,41],"44456195",[253,44,41,223,254,41],"44450913","starburst",[256,44,41,234,241,41],"44456204",[258,44,41,259,11,44],"44448206","maker\u002Fneutral\u002Fidea",[261,44,41,223,262,41],"44448308","dotancohen",[264,44,41,223,238,41],"44449916",[266,44,41,223,262,41],"44468060",[268,44,41,248,269,41],"44448788","altairprime",[271,44,41,272,11,44],"44458253","maker\u002Fneutral\u002Fperformance",[274,44,41,275,276,41],"44451937","other\u002Fneutral\u002Fidea","9dev",[278,44,41,223,11,44],"44458120",[280,44,41,223,281,41],"44455362","kevincox",[283,44,41,284,11,44],"44447736","project\u002Fneutral\u002Fdesign",[286,44,31,287,288,41],"44453523","project\u002Fpositive\u002Fdesign","incrudible",[100,35,44,290,101,41],"project\u002Fcritical\u002Fdesign",[292,35,41,223,293,41],"44448443","ivape",[295,35,41,223,296,41],"44449144","madeofpalk",[163,18,41,275,164,41],[299,18,41,223,300,41],"44456907","cududa",[302,18,41,223,303,41],"44464104","savy91",[156,36,41,223,157,41],[306,36,41,307,11,44],"44449404","maker\u002Fpositive\u002Fnone",[309,36,41,223,310,41],"44449630","leptons",[312,36,41,223,157,41],"44449679",[314,36,41,307,11,44],"44450649",[80,31,31,316,81,41],"project\u002Fpositive\u002Fexecution",[318,31,41,272,11,44],"44447064",[320,31,41,223,321,41],"44450554","whycome",[323,31,41,223,11,44],"44450668",[325,188,41,223,326,41],"44450684","tyleo",[328,188,41,223,11,44],"44450817",[330,175,44,193,331,41],"44447846","armchairhacker",[333,175,41,195,11,44],"44447972",[114,335,44,336,115,41],8,"project\u002Fcritical\u002Fperformance",[338,335,31,339,340,41],"44448742","project\u002Fpositive\u002Fperformance","xgpyc2qp",[342,335,41,248,343,41],"44448831","jdiff",[345,335,41,272,11,44],"44449221",[347,335,18,348,115,41],"44450062","project\u002Fneutral\u002Fperformance",[350,335,41,307,11,44],"44450607",[352,335,44,336,353,41],"44451222","pfg_",[355,335,44,336,356,41],"44455966","onli",[133,358,44,290,134,41],9,[360,358,41,361,11,44],"44457829","maker\u002Fneutral\u002Fdesign",[363,364,44,193,365,41],"44447770",10,"refulgentis",[367,364,41,198,368,41],"44447877","its-summertime",[370,364,41,234,11,44],"44449300",[372,364,41,243,11,44],"44449296",[84,374,31,287,85,41],11,[376,374,41,243,11,44],"44447079",[378,374,18,284,85,41],"44448580",[380,374,41,381,11,44],"44448859","maker\u002Fneutral\u002Fdocs",[383,374,41,384,218,41],"44462712","other\u002Fcritical\u002Fnone",[148,386,18,387,149,41],12,"project\u002Fneutral\u002Fprivacy",[389,386,18,390,391,41],"44447780","project\u002Fneutral\u002Fdocs","victorbjorklund",[393,386,41,381,11,44],"44448028",[395,396,31,397,398,41],"44446022",13,"project\u002Fpositive\u002Fidea","thecosas",[400,396,44,401,402,41],"44446997","project\u002Fcritical\u002Fidea","CharlesW",[404,396,41,259,11,44],"44448976",[406,396,41,307,11,44],"44448626",[408,409,31,287,410,41],"44448931",14,"utopcell",[412,409,41,307,11,44],"44449131",[141,30,44,401,142,41],[415,30,41,223,416,41],"44446517","rpastuszak",[418,30,41,223,142,41],"44446640",[420,30,41,223,416,41],"44448217",[422,30,41,223,218,41],"44462741",[424,30,41,234,11,44],"44447427",[426,30,41,427,11,44],"44447379","project\u002Fneutral\u002Fidea",[429,30,44,401,218,41],"44462730",[431,432,41,223,433,41],"44463270",16,"vrighter",[435,432,41,259,11,44],"44464643",[437,438,44,193,439,41],"44448283",17,"alberth",[441,438,31,316,442,41],"44448402","andrewingram",[444,438,44,336,439,41],"44448523",[446,438,41,307,11,44],"44449095",[448,438,44,401,293,41],"44448418",[88,450,31,287,89,41],18,[452,450,41,453,11,44],"44450743","maker\u002Fpositive\u002Fdesign",[455,456,31,397,340,41],"44448728",19,[458,456,41,307,11,44],"44449258",[126,460,18,390,127,41],20,[462,463,31,339,464,41],"44447127",21,"minaguib",[466,463,41,307,11,44],"44448938",[468,469,31,287,470,41],"44455264",22,"gvison",[472,473,18,474,475,41],"44448617",23,"project\u002Fmixed\u002Fperformance","ramoz",[477,478,31,479,480,41],"44450325",24,"project\u002Fpositive\u002Fnone","arfaaan",[482,478,41,307,11,44],"44450594",[170,484,18,220,171,41],25,[486,484,41,234,487,41],"44452853","Sander_Marechal",[489,484,41,234,11,44],"44457542",[491,484,41,259,11,44],"44457481",[493,494,31,479,495,41],"44457100",26,"anon115",[497,498,31,479,499,41],"44456630",27,"August7337",[501,502,31,479,503,41],"44450849",28,"lovegrenoble",[505,506,44,401,507,41],"44452717",29,"voidUpdate",[],[510,515,519,524,529,534],{"id":511,"name":512,"points":513,"category":514},"44396518","I'm an airline pilot",1539,"creative",{"id":516,"name":517,"points":518,"category":20},"44433409","Spegel",426,{"id":520,"name":521,"points":522,"category":523},"44412207","Octelium",358,"security_privacy",{"id":525,"name":526,"points":527,"category":528},"44422480","TokenDagger",281,"ai",{"id":530,"name":531,"points":532,"category":533},"44421776","New Ensō",251,"productivity",{"id":535,"name":536,"points":537,"category":538},"44428438","OpenFile",244,"web_saas",false,"v2",{"id":542,"name":5,"line":6,"ai":539,"cat":20,"year":13,"points":14,"comments":15,"rec":27,"s":543,"top":18,"kw":544,"maker":11,"domain":10,"tier":19,"attempts":41,"strip":545,"url":9,"mix":546,"praise":76,"objection":93,"sub":21},44445238,0.05,[24,25,21,26],"1000300000003000501331153351300123555354",[30,31,18,30],1794036677797]