[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-categories-en-US":3,"categories-en-US":3,"resource-mesh-gradient-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":51,"alternatives-mesh-gradient-en-US":116,"related-resources-mesh-gradient-en-US":219},true,{"id":5,"name":6,"slug":7,"url":8,"date_updated":9,"images_other":9,"tagline":10,"description":11,"seo":12,"features":15,"pros":22,"cons":26,"best_for":29,"cover":30,"icon":9,"pricing":31,"platform":32,"github_url":9,"twitter_url":9,"discord_url":9,"dribbble_url":9,"pricing_tiers":34,"views_count":35,"featured_rank":9,"categories":36,"tags":45,"files":9},740,"Mesh Gradient","mesh-gradient","https:\u002F\u002Fmeshgradient.com",null,"Create beautiful mesh gradient backgrounds for your designs","Mesh Gradient is a free online tool for creating smooth, multi-color mesh gradient CSS backgrounds. Drag and drop control points on a grid, adjust colors at each vertex, and watch the gradient blend in real time. Once you are happy with the result, copy the generated CSS code with a single click.",{"title":13,"meta_description":14},"Mesh Gradient — Create beautiful mesh gradient backgrounds for your...","Mesh Gradient is a free online tool for creating smooth, multicolor mesh gradient CSS backgrounds. Drag and drop control points on a grid, adjust colors at e...",[16,17,18,19,20,21],"Drag-and-drop control points for intuitive gradient editing","Add or remove color vertices on a customizable grid","Real-time smooth blending preview as you adjust colors","Export clean CSS gradient code with one click","Multiple preset gradient templates to start from","Randomize button for quick color inspiration",[23,24,25],"Very intuitive visual editing with drag-and-drop controls","Generates production-ready CSS code instantly","Completely free with no account required",[27,28],"No export options beyond CSS code","Limited to mesh gradients only, no linear or radial options","Best for web designers and front-end developers who need to quickly create unique mesh gradient backgrounds with clean, ready-to-use CSS code.","de892395-dc05-42ff-83f9-913d028370cc.webp","free",[33],"Web",{"free":3},0,[37,41],{"name":38,"slug":39,"sub_categories":40},"Design Tools","design-tools",[],{"name":42,"slug":43,"sub_categories":44},"Colors & Palettes","colors-palettes",[],[46,48],{"name":47,"slug":31},"Free",{"name":49,"slug":50},"Colors","colors",[52,84,94,104],{"id":53,"url":54,"icon":9,"name":55,"slug":56,"tags":57,"cover":80,"tagline":81,"is_featured":82,"date_created":83,"date_updated":9},858,"https:\u002F\u002Fwww.genspark.ai\u002F","Genspark Design","genspark-design",[58,61,63,66,68,70,72,74,76,78],{"seo":9,"name":59,"slug":60},"AI Powered","ai-powered",{"seo":9,"name":9,"slug":62},"ai",{"seo":9,"name":64,"slug":65},"Freemium","freemium",{"seo":9,"name":9,"slug":67},"free-trial",{"seo":9,"name":9,"slug":69},"image-editing",{"seo":9,"name":9,"slug":71},"video",{"seo":9,"name":9,"slug":73},"animation",{"seo":9,"name":9,"slug":75},"prototyping",{"seo":9,"name":9,"slug":77},"no-code",{"seo":9,"name":9,"slug":79},"productivity","fc3931e4-3210-4155-a94b-da3a261fe281.webp","The next-gen AI for design — powered by Claude Opus 4.7",false,"2026-06-28T03:12:01.911314+00:00",{"id":85,"url":86,"icon":9,"name":87,"slug":88,"tags":89,"cover":91,"tagline":92,"is_featured":82,"date_created":93,"date_updated":9},857,"https:\u002F\u002Folivia-tsui.github.io\u002Fct\u002F","World's Best Scale Tool","worlds-best-scale-tool",[90],{"seo":9,"name":9,"slug":50},"eb5afb81-91ac-496d-96b6-bd870afbc2a8.webp","Advanced color scale and palette generation tool","2026-06-24T04:31:04.697212+00:00",{"id":95,"url":96,"icon":9,"name":97,"slug":98,"tags":99,"cover":101,"tagline":102,"is_featured":82,"date_created":103,"date_updated":9},856,"https:\u002F\u002Fwww.tints.dev\u002F","Tailwind CSS Color Generator","tailwind-css-color-generator",[100],{"seo":9,"name":9,"slug":50},"bd6eba7c-091e-4cfa-83c6-a7f3392e1032.webp","Tailwind CSS 11-color palette generator and API","2026-06-24T04:30:57.92162+00:00",{"id":105,"url":106,"icon":9,"name":107,"slug":108,"tags":109,"cover":113,"tagline":114,"is_featured":82,"date_created":115,"date_updated":9},855,"https:\u002F\u002Fscreensiz.es\u002F","Screensiz.es","screensiz-es",[110,111],{"seo":9,"name":47,"slug":31},{"seo":9,"name":9,"slug":112},"inspiration","b56672d4-1eab-4481-a3f5-4440977fb881.webp","Device screen sizes and viewport reference","2026-06-24T04:30:50.994519+00:00",[117,123,129,135,141,147,153,159,165,171,177,183,189,195,201,207,213],{"url":118,"name":119,"slug":120,"cover":121,"tagline":122},"https:\u002F\u002Fpigment.shapefactory.co","Pigment","pigment","3aa8318c-dc03-4e6b-b429-d73c051ed65b.webp","Simple online color palette generator for designers",{"url":124,"name":125,"slug":126,"cover":127,"tagline":128},"https:\u002F\u002Fboardmix.cn","BoardMix","boardmix","12fa7ff9-7192-4172-810f-492b0b4439df.webp","Online collaborative whiteboard for brainstorming and planning",{"url":130,"name":131,"slug":132,"cover":133,"tagline":134},"https:\u002F\u002Fmokker.ai","Mokker","mokker","e5e17125-a64f-4026-9099-3ddc92dcc6c7.webp","AI-powered product photo background generator",{"url":136,"name":137,"slug":138,"cover":139,"tagline":140},"https:\u002F\u002Fruri.design\u002Fgradiator","Ruri Gradiator","ruri-gradiator","089f81a2-3082-45c0-bce5-ffc9875cb87b.webp","Advanced CSS gradient editor with a unique grid interface",{"url":142,"name":143,"slug":144,"cover":145,"tagline":146},"https:\u002F\u002Fgradientora.com","Gradientora","gradientora","959a8972-2b17-440a-b385-778609d07df7.webp","A curated collection of 1100+ gradients for every design project",{"url":148,"name":149,"slug":150,"cover":151,"tagline":152},"https:\u002F\u002Fmagicpattern.design","MagicPattern","magicpattern","bc5a27ac-20f5-443c-9d44-c9d453c9f5b3.webp","Create stunning patterns, gradients, and blobs in minutes",{"url":154,"name":155,"slug":156,"cover":157,"tagline":158},"https:\u002F\u002Fmagma.com","Magma","magma","8ab8f9d5-037c-4b96-a726-7586268b47a2.webp","Online collaborative digital painting studio",{"url":160,"name":161,"slug":162,"cover":163,"tagline":164},"https:\u002F\u002Fgoodpalette.io","Goodpalette","goodpalette","1c508913-1ea0-4383-9122-91c1c93faecb.webp","Generate accessible color palettes for UI design",{"url":166,"name":167,"slug":168,"cover":169,"tagline":170},"https:\u002F\u002Fwww.format.com","Format","format","23082fc2-127d-4031-8218-47ae3b6c4be3.webp","Beautiful portfolio websites for creatives and professionals",{"url":172,"name":173,"slug":174,"cover":175,"tagline":176},"https:\u002F\u002Fpreline.co","Preline","preline","6eef6163-98a0-43bd-9100-e856485426c9.webp","Tailwind CSS UI component library for modern web apps",{"url":178,"name":179,"slug":180,"cover":181,"tagline":182},"https:\u002F\u002Fgenerated.photos\u002Fhuman-generator\u002F","Human Generator","human-generator","73ee255c-fae8-4061-b8b4-3b0cd6d07e20.webp","AI-generated diverse human faces and full-body photos",{"url":184,"name":185,"slug":186,"cover":187,"tagline":188},"https:\u002F\u002Fskylum.com\u002Fluminar","Luminar Neo","luminar-neo","d6ad7f90-eae8-4102-9c58-64d943537f6b.webp","AI-powered photo editor for breathtaking results",{"url":190,"name":191,"slug":192,"cover":193,"tagline":194},"https:\u002F\u002Fatmos.style","Atmos","atmos-color","9b5710cd-372d-46e9-997f-76a6df7e01d6.webp","Suite of online color tools for UI designers",{"url":196,"name":197,"slug":198,"cover":199,"tagline":200},"https:\u002F\u002Frealtimecolors.com","Realtime Colors","realtime-colors","f17efa2a-e7d2-41f4-944a-db7a8cec4a3b.webp","Visualize color palettes on a live UI mockup — see how your colors actually look in context",{"url":202,"name":203,"slug":204,"cover":205,"tagline":206},"https:\u002F\u002Fpixelover.io","Pixelover","pixelover","db4709c5-3246-4f7e-ab89-1057c960c83f.webp","Online color picker and image overlay tool",{"url":208,"name":209,"slug":210,"cover":211,"tagline":212},"https:\u002F\u002Fnordhealth.design\u002Fcolor-generator","Nord Color Generator","nord-color-generator","a9afbd72-8a27-453f-820c-c6e171ea0908.webp","UI color palette generator based on Nord design system",{"url":214,"name":215,"slug":216,"cover":217,"tagline":218},"https:\u002F\u002Fcsshero.org\u002Fmesher","CSS Hero Mesher","css-hero-mesher","c8e938c6-095b-4b0f-b2b4-e24a18bec17d.webp","Create beautiful mesh gradient backgrounds with CSS",[220,233,250],{"url":221,"icon":9,"name":222,"slug":223,"tags":224,"cover":230,"tagline":231,"is_featured":3,"date_created":232,"date_updated":9},"https:\u002F\u002Flinear.app","Linear","linear-app",[225,227,228,229],{"seo":9,"name":9,"slug":226},"collaboration",{"seo":9,"name":9,"slug":75},{"seo":9,"name":64,"slug":65},{"seo":9,"name":9,"slug":79},"7dc9bed7-8510-495f-82b3-84a60b1b4819.webp","Fast, streamlined issue tracking and project management — built for modern product teams","2026-06-16T07:18:11.23048+00:00",{"url":234,"icon":9,"name":235,"slug":236,"tags":237,"cover":247,"tagline":248,"is_featured":3,"date_created":249,"date_updated":9},"https:\u002F\u002Fwww.gimp.org","GIMP","gimp",[238,239,242,243,245],{"seo":9,"name":47,"slug":31},{"seo":9,"name":240,"slug":241},"Open Source","open-source",{"seo":9,"name":9,"slug":69},{"seo":9,"name":9,"slug":244},"svg",{"seo":9,"name":9,"slug":246},"print-design","9f4321c5-7770-4e9d-a434-774fc0698c90.webp","The free and open-source image editor — a powerful Photoshop alternative for photo retouching and image composition","2026-06-16T07:16:45.154035+00:00",{"url":251,"icon":9,"name":252,"slug":253,"tags":254,"cover":260,"tagline":261,"is_featured":3,"date_created":262,"date_updated":9},"https:\u002F\u002Fbalsamiq.com","Balsamiq","balsamiq",[255,257,258,259],{"seo":9,"name":9,"slug":256},"wireframe",{"seo":9,"name":9,"slug":75},{"seo":9,"name":9,"slug":226},{"seo":9,"name":64,"slug":65},"3d08be4f-39f6-4152-a769-e28d1a04aac2.webp","Fast, focused wireframing tool that keeps conversations on structure — not pixels","2026-06-16T07:14:07.685566+00:00"]