[{"data":1,"prerenderedAt":332},["ShallowReactive",2],{"project-24177804":3},{"id":4,"name":5,"line":5,"line_source":6,"title":7,"url":8,"domain":9,"maker":10,"posted_at":11,"year":12,"points":13,"comments":14,"rank_in_year":15,"shown_in_year":16,"top":17,"tier":18,"category":19,"subcategory":20,"format":21,"keywords":22,"reception":27,"sentiment":28,"stance_mix":29,"scored_comments":34,"aspects":35,"strip":42,"post_text":45,"what":46,"said":77,"maker_in_thread":192,"shape":199,"grid":202,"attempts":294,"same_week":295,"maker_shows":37,"maker_hidden":324,"reader_version":325,"card":326},"24177804","GradientMagic","title","Show HN: GradientMagic","https:\u002F\u002Fwww.gradientmagic.com\u002F","gradientmagic.com","jordanmarshall",1597586273,2020,259,38,180,3028,6,"legend","dev_tools","css gradient gallery","web_app",[23,24,25,26],"css gradients","gradient generator","css background","copy css","curious",0.198,{"positive":30,"neutral":31,"mixed":32,"critical":33},7,12,0,2,21,{"execution":36,"design":38,"idea":39,"pricing":40,"performance":41},{"positive":37,"critical":32},1,{"positive":32,"critical":32},{"positive":37,"critical":32},{"positive":32,"critical":32},{"positive":37,"critical":33},[32,43,44,43,44,32,44,44,32,44,32,32,43,44,32,44,44,32,32,32,44,32,32,43,32,44,32,32,44,37,37,32,32,44,32,43,43,43],5,3,null,{"problem":47,"audience":54,"pricing":65,"motivation":69,"time_to_build":45,"stack":73,"openness":74,"stage":75,"team_size":76},{"value":48,"source":49,"evidence":50},"Finding and copying unique CSS gradients for backgrounds without images","maker",[51],{"id":52,"by":10,"text":53},"24177807","Hey HN! GradientMagic is a side project that I launched roughly a year ago. It’s a large gallery of unique CSS gradients. You can browse the different patterns and copy the CSS…",{"value":55,"source":56,"evidence":57},"Frontend web developers and designers","commenter",[58,61],{"id":59,"by":10,"text":60},"24179088","Great idea! I've considered adding an option to download individual gradients as an image, but I haven't thought about that as the primary focus. Certainly the number of people…",{"id":62,"by":63,"text":64},"24179481","eddywebs","I second the idea of the being able to export for non web\u002Fcss, these gradients are too good and could be used for graphic design as well. Also the idea of adding tip jar\u002Fnon…",{"value":66,"source":49,"evidence":67},"Free to use; maker is considering premium bundles or subscription",[68],{"id":52,"by":10,"text":53},{"value":70,"source":49,"evidence":71},"Side project; CSS gradients are smaller and easier to manage than images",[72],{"id":52,"by":10,"text":53},[],"unknown","launched","solo",{"praise":78,"objections":98,"requests":120,"questions":157,"alternatives":169},[79],{"value":80,"source":56,"evidence":81},"Beautiful, useful resource that commenters bookmarked or used in projects",[82,86,90,94],{"id":83,"by":84,"text":85},"24179360","mindvirus","Beautiful! I'm going to use a few of these for my project. For monetization - maybe start with ads and add a https:\u002F\u002Fwww.buymeacoffee.com\u002F link or similar? I'm not convinced…",{"id":87,"by":88,"text":89},"24179188","lanecwagner","This is so sick! I just swapped out my background images on https:\u002F\u002Fclassroom.qvault.io\u002F for some of these gradients. Loads way faster AND looks better now. Thanks for sharing :)",{"id":91,"by":92,"text":93},"24179662","ChrisMarshallNY","That's really nice! I bookmarked it. Thanks for sharing it.",{"id":95,"by":96,"text":97},"24181024","slig","Fantastic job, thanks for sharing!",[99,106,113],{"value":100,"source":56,"evidence":101},"Subscriptions unlikely to work for one-time gradient needs",[102,103],{"id":83,"by":84,"text":85},{"id":104,"by":84,"text":105},"24181832","In NYC. That's a fair point - thinking in terms of annual access makes more sense. For me it's more adversion to subscriptions for things I use once. I'm always happy to pay for…",{"value":107,"source":56,"evidence":108},"Heavy CSS gradients may hurt scroll performance",[109],{"id":110,"by":111,"text":112},"24180997","adontz","Are not these much heavier than SVG image backgrounds? I tested by putting five backgrounds into my real web project and scroll does not seem smooth anymore.",{"value":114,"source":56,"evidence":115},"Chrome renders antialiasing poorly on these gradients",[116],{"id":117,"by":118,"text":119},"24180009","xingyzt","Unfortunately Chrome doesn't do antialiasing on these constant-interpolation gradients. The bug is less noticeable here with low-contrast color pairs, but leaves ugly diagonals…",[121,129,140,150],{"value":122,"source":56,"evidence":123},"Download gradients as images",[124,128],{"id":125,"by":126,"text":127},"24178868","kejaed","As I opened this on my phone I thought that these would make a nice background image. While I recognize that the whole premise is that CSS gradients are better suited than images…",{"id":59,"by":10,"text":60},{"value":130,"source":56,"evidence":131},"Show CSS inline on the page",[132,136],{"id":133,"by":134,"text":135},"24181681","nitrogen","Just one suggestion: showing the CSS inline would be helpful. Admittedly I only bounced around for like 30 seconds, but I didn't see a way to show CSS on the page.",{"id":137,"by":138,"text":139},"24180201","Cyphase","Great resource, thanks for making it! One bit of feedback; it would be nice if there was a way to view the CSS within the site – and dynamically updated as you edit a gradient –…",{"value":141,"source":56,"evidence":142},"Export to non-CSS formats like Flutter, Android, iOS, SVG",[143,144,147],{"id":83,"by":84,"text":85},{"id":145,"by":84,"text":146},"24180705","My two cents would be to stay focused - there are a ton of general image search resources online. unsplash.com for example seems hard to beat. One place to consider expanding to…",{"id":148,"by":10,"text":149},"24179756","Yeah, thats my concern with subscriptions as well. I'm not sure many people would need to come back that often. Maybe more premium features (like what you highlight below) would…",{"value":151,"source":56,"evidence":152},"Programmatic API for gradients",[153],{"id":154,"by":155,"text":156},"24182909","ctippett","My current go-to resource for gradients is https:\u002F\u002Fuigradients.com. One feature I'd personally appreciate is a programmatic interface for getting a list of gradients, it's handy…",[158,162],{"value":159,"source":49,"evidence":160},"Is it worth monetizing and how?",[161],{"id":52,"by":10,"text":53},{"value":163,"source":56,"evidence":164},"Does it work across browsers and how is performance?",[165],{"id":166,"by":167,"text":168},"24181827","blisseyGo","These are awesome! Will use this on my next project! Do these work on all browsers? And how's the performance?",[170,174,181,188],{"value":171,"source":56,"evidence":172},"uigradients.com",[173],{"id":154,"by":155,"text":156},{"value":175,"source":56,"evidence":176},"colors.lol",[177],{"id":178,"by":179,"text":180},"24179222","Evan_Hellmuth","Common way to monetize sites like yours is ads via Carbon, eg https:\u002F\u002Fcolors.lol\u002F Another more lucrative but laborious way is to use this site as an ad for contract work. Just…",{"value":182,"source":56,"evidence":183},"Subtle Patterns",[184],{"id":185,"by":186,"text":187},"24183219","andrewmcwatters","I wonder how many people here remember Subtle Patterns. Eventually it was acquired by Toptal. Always interesting how times change.",{"value":189,"source":56,"evidence":190},"unsplash.com",[191],{"id":145,"by":84,"text":146},{"comments":30,"answered":44,"key":193},[194,195,196],{"id":52,"text":53},{"id":59,"text":60},{"id":197,"text":198},"24179712","I looked into it before, and I don't think html2canvas would work. IIRC the only way to get the gradients was using the screen capture API [1], which works, but requires users to…",{"commenters":200,"max_depth":17,"maker_replies":30,"first_comment_mins":37,"lifespan_hours":201},26,210,[203,205,209,211,215,217,218,222,224,225,227,231,234,236,237,239,242,243,247,248,250,251,255,257,260,264,265,267,270,271,274,276,279,281,284,286,290,292],[52,32,32,204,10,37],"maker\u002Fneutral\u002Fidea",[206,32,43,207,208,32],"24179107","project\u002Fpositive\u002Fexecution","thnder",[133,32,44,210,134,32],"project\u002Fneutral\u002Fdesign",[212,32,43,213,214,32],"24183860","maker\u002Fpositive\u002Fnone","unicodepepper",[125,37,44,216,126,32],"project\u002Fneutral\u002Fidea",[59,37,32,204,10,37],[219,37,44,220,221,32],"24179582","project\u002Fneutral\u002Fexecution","perk",[223,37,44,220,221,32],"24179617",[197,37,32,220,10,37],[226,37,44,220,221,32],"24180428",[228,37,32,229,230,32],"24180943","other\u002Fneutral\u002Fnone","onion2k",[232,37,32,229,233,32],"24184194","xamde",[83,33,43,235,84,32],"project\u002Fpositive\u002Fidea",[62,33,44,216,63,32],[148,33,32,238,10,37],"maker\u002Fneutral\u002Fpricing",[240,33,44,216,241,32],"24180702","TedDoesntTalk",[145,33,44,216,84,32],[244,33,32,245,246,32],"24180929","other\u002Fneutral\u002Fpricing","ci5er",[104,33,32,245,84,32],[249,33,32,245,246,32],"24182059",[178,44,44,238,179,32],[252,44,32,253,254,32],"24181717","commenter\u002Fneutral\u002Fnone","ggrelet",[256,44,32,253,179,32],"24182015",[87,258,43,259,88,32],4,"project\u002Fpositive\u002Fperformance",[261,43,32,262,263,32],"24181116","other\u002Fneutral\u002Fidea","monokai_nl",[154,17,44,216,155,32],[266,17,32,204,10,37],"24183062",[268,17,32,229,269,32],"24269118","padmadevu",[137,30,44,210,138,32],[117,272,37,273,118,32],8,"project\u002Fcritical\u002Fperformance",[110,275,37,273,111,32],9,[277,275,32,278,10,37],"24182090","maker\u002Fneutral\u002Fperformance",[185,280,32,229,186,32],10,[166,282,44,283,167,32],11,"project\u002Fneutral\u002Fperformance",[285,282,32,278,10,37],"24182074",[287,31,43,288,289,32],"24187630","project\u002Fpositive\u002Fnone","isometric",[91,291,43,288,92,32],13,[95,293,43,288,96,32],14,[],[296,301,306,311,316,320],{"id":297,"name":298,"points":299,"category":300},"24158125","Photo Realistic QR-Codes",482,"creative",{"id":302,"name":303,"points":304,"category":305},"24139339","Bedtime calculator",312,"consumer_social",{"id":307,"name":308,"points":309,"category":310},"24178295","ScreenplaySubs",289,"productivity",{"id":312,"name":313,"points":314,"category":315},"24189582","Dropbase 2.0",261,"data",{"id":317,"name":318,"points":319,"category":300},"24205416","Handwritten.js",255,{"id":321,"name":322,"points":323,"category":310},"24199419","Archivy",219,false,"v2",{"id":327,"name":5,"line":5,"ai":324,"cat":19,"year":12,"points":13,"comments":14,"rec":27,"s":328,"top":17,"kw":329,"maker":10,"domain":9,"tier":18,"attempts":32,"strip":330,"url":8,"mix":331,"praise":80,"objection":100,"sub":20},24177804,0.2,[23,24,25,26],"05353033030053033000300503003110030555",[30,31,32,33],1794036594735]