[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en-US":3,"blog-categories-en-US":3,"resource-gradient-lab-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":56,"alternatives-gradient-lab-en-US":117,"related-resources-gradient-lab-en-US":148},true,{"id":5,"name":6,"slug":7,"url":8,"date_updated":9,"images_other":9,"tagline":10,"description":11,"seo":12,"features":15,"pros":23,"cons":28,"best_for":32,"cover":33,"icon":9,"pricing":34,"platform":35,"github_url":9,"twitter_url":37,"discord_url":9,"dribbble_url":9,"pricing_tiers":38,"views_count":40,"featured_rank":9,"categories":41,"tags":46,"files":9},876,"Gradient Lab","gradient-lab","https:\u002F\u002Fbackgrounds.supply\u002Fgradient-lab",null,"Free shader-based gradients for hero sections and backgrounds","Gradient Lab by Backgrounds Supply is a free, browser-based gradient generator that goes beyond classic linear and radial fades. It uses shader effects to produce rich, organic gradients — flowing color fields, grain, and light — ideal for hero sections, social cards, and app backgrounds.\n\nChoose from over 20 shader presets, tweak colors and parameters live, and export your result as a PNG image, a video, or directly embed it via HTML\u002FCSS. Everything runs in the browser, with no sign-up needed.\n\nThe tool is part of the Backgrounds Supply family, a collection of free background generators and tools for designers and developers.",{"title":13,"meta_description":14},"Gradient Lab — Free shader-based gradients for hero sections and backgrounds","Gradient Lab by Backgrounds Supply is a free, browserbased gradient generator that goes beyond classic linear and radial fades. It uses shader effects to pro...",[16,17,18,19,20,21,22],"Shader-based gradient generator, free in the browser","20+ shader presets for rich organic gradients","Live color and parameter editing","Export as PNG or video","Direct embed via HTML\u002FCSS","No account required","Part of the free Backgrounds Supply toolkit",[24,25,26,27],"More organic results than classic CSS gradients","Multiple export formats","Free with no sign-up","Fast to iterate live",[29,30,31],"Shader presets not fully customizable at code level","Video export is limited compared to animation tools","Browser-based only","Best for designers and developers who want rich, organic background gradients fast and free","185893cc-19cb-493a-b73d-ecaafa4f1305.webp","free",[36],"Web","https:\u002F\u002Fx.com\u002Fbackgroundsupply",{"free":3,"note":39},"Free shader gradient generator",0,[42],{"name":43,"slug":44,"sub_categories":45},"Colors & Palettes","colors-palettes",[],[47,50,53],{"name":48,"slug":49},"Gradient","gradient",{"name":51,"slug":52},"Colors","colors",{"name":54,"slug":55},"Freebie","freebie",[57,75,91,105],{"id":58,"url":59,"icon":9,"name":60,"slug":61,"tags":62,"cover":71,"tagline":72,"is_featured":73,"date_created":74,"date_updated":9},881,"https:\u002F\u002Ftree.icqr.com\u002F","Tree.ICQR","tree-icqr",[63,65,67,69],{"seo":9,"name":64,"slug":34},"Free",{"seo":9,"name":9,"slug":66},"svg",{"seo":9,"name":9,"slug":68},"3d-modeling",{"seo":9,"name":9,"slug":70},"animation","136c87bb-134f-4eef-bc7b-8de6f81f7f49.webp","Turn any link into a stunning 3D tree that doubles as a scannable QR code",false,"2026-08-27T09:26:48.566322+00:00",{"id":76,"url":77,"icon":9,"name":78,"slug":79,"tags":80,"cover":88,"tagline":89,"is_featured":73,"date_created":90,"date_updated":9},880,"https:\u002F\u002Fwww.arlan.me\u002Fvault","Arlan's Vault","arlans-vault",[81,84,86],{"seo":9,"name":82,"slug":83},"Vibe Coding","vibe-coding",{"seo":9,"name":9,"slug":85},"web-design",{"seo":9,"name":9,"slug":87},"ui-kits","ca1dcd3a-0023-41eb-b387-6770a7529f7e.webp","A library of web interaction and design style prompts","2026-08-20T07:35:22.316179+00:00",{"id":92,"url":93,"icon":9,"name":94,"slug":95,"tags":96,"cover":102,"tagline":103,"is_featured":73,"date_created":104,"date_updated":9},879,"https:\u002F\u002Fpurelanding.page\u002F","Pure","pure-landing-page",[97,99,101],{"seo":9,"name":9,"slug":98},"inspiration",{"seo":9,"name":9,"slug":100},"landing-page",{"seo":9,"name":9,"slug":85},"d03eb69a-e8e3-4914-b8f3-8453f8440ae8.webp","A clean inspiration gallery of beautiful landing pages","2026-08-20T07:35:13.377601+00:00",{"id":106,"url":107,"icon":9,"name":108,"slug":109,"tags":110,"cover":114,"tagline":115,"is_featured":73,"date_created":116,"date_updated":9},878,"https:\u002F\u002Fposts.design\u002F","Posts.design","posts-design",[111,112],{"seo":9,"name":9,"slug":98},{"seo":9,"name":9,"slug":113},"social-media","2e97cacb-a94e-40eb-b415-8d26dc2281d4.webp","A curated gallery of real social media posts for design inspiration","2026-08-20T07:35:05.176939+00:00",[118,124,130,136,142],{"url":119,"name":120,"slug":121,"cover":122,"tagline":123},"https:\u002F\u002Fcolourcontrast.cc\u002F","Colour Contrast Checker","colour-contrast-checker","cd62a457-6e63-4e31-b000-531d3eb836ab.webp","Simple WCAG color contrast checker for accessible design",{"url":125,"name":126,"slug":127,"cover":128,"tagline":129},"https:\u002F\u002Fwww.tints.dev\u002F","Tailwind CSS Color Generator","tailwind-css-color-generator","bd6eba7c-091e-4cfa-83c6-a7f3392e1032.webp","Tailwind CSS 11-color palette generator and API",{"url":131,"name":132,"slug":133,"cover":134,"tagline":135},"https:\u002F\u002Folivia-tsui.github.io\u002Fct\u002F","World's Best Scale Tool","worlds-best-scale-tool","eb5afb81-91ac-496d-96b6-bd870afbc2a8.webp","Advanced color scale and palette generation tool",{"url":137,"name":138,"slug":139,"cover":140,"tagline":141},"https:\u002F\u002Folivia-tsui.github.io\u002Fct","Color Scale Tool","color-scale-tool","961aa9d6-73c4-4634-9060-b26dd258a61b.webp","Generate light and dark color scales interactively",{"url":143,"name":144,"slug":145,"cover":146,"tagline":147},"https:\u002F\u002Fferalui.dev\u002Fgradients","FeralUI Gradient Builder","feralui-gradients","7ebaf15a-33a1-4f03-bd92-88ad52b886e5.webp","Playful, physics-driven gradient builder for Tailwind CSS",[149,160,168],{"url":150,"icon":9,"name":151,"slug":152,"tags":153,"cover":157,"tagline":158,"is_featured":3,"date_created":159,"date_updated":9},"https:\u002F\u002Fcolorhunt.co","Color Hunt","color-hunt",[154,155,156],{"seo":9,"name":9,"slug":52},{"seo":9,"name":64,"slug":34},{"seo":9,"name":9,"slug":49},"e4a2e456-fabc-4bbf-8729-ecaf1cbfcbb6.webp","A curated collection of beautiful color palettes for designers and artists","2026-06-16T07:14:22.345664+00:00",{"url":143,"icon":9,"name":144,"slug":145,"tags":161,"cover":146,"tagline":147,"is_featured":73,"date_created":167,"date_updated":9},[162,163,166],{"seo":9,"name":64,"slug":34},{"seo":9,"name":164,"slug":165},"Open Source","open-source",{"seo":9,"name":9,"slug":52},"2026-07-16T01:39:25.742464+00:00",{"url":131,"icon":9,"name":132,"slug":133,"tags":169,"cover":134,"tagline":135,"is_featured":73,"date_created":171,"date_updated":9},[170],{"seo":9,"name":9,"slug":52},"2026-06-24T04:31:04.697212+00:00"]