[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en-US":3,"blog-categories-en-US":3,"resource-css-hero-mesher-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":57,"alternatives-css-hero-mesher-en-US":122,"related-resources-css-hero-mesher-en-US":209},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},809,"CSS Hero Mesher","css-hero-mesher","https:\u002F\u002Fcsshero.org\u002Fmesher",null,"Create beautiful mesh gradient backgrounds with CSS","CSS Hero Mesher is an online mesh gradient CSS generator that lets you create smooth multi-color gradient backgrounds with precise position control. Simply place color points on a canvas and fine-tune their positions to craft unique, fluid gradient compositions. The tool generates clean CSS code ready for immediate use in web projects.",{"title":13,"meta_description":14},"CSS Hero Mesher -- Create beautiful mesh gradient backgrounds with CSS","CSS Hero Mesher is an online mesh gradient CSS generator that lets you create smooth multicolor gradient backgrounds with precise position control. Simply pl...",[16,17,18,19,20,21],"Multi-color point placement on canvas","Drag-and-drop position control for each color point","Real-time CSS code generation","Smooth color blending between points","Export as ready-to-use CSS code","No account or sign-up required",[23,24,25],"Completely free with no restrictions","Intuitive visual interface for precise control","Generates production-ready CSS output",[27,28],"Limited to mesh gradient styles only","No export to image formats like PNG","Web designers and developers who need to create custom mesh gradient backgrounds with clean CSS code","c8e938c6-095b-4b0f-b2b4-e24a18bec17d.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,51,54],{"name":47,"slug":31},"Free",{"name":49,"slug":50},"Colors","colors",{"name":52,"slug":53},"Gradient","gradient",{"name":55,"slug":56},"Dark Mode","dark-mode",[58,90,100,110],{"id":59,"url":60,"icon":9,"name":61,"slug":62,"tags":63,"cover":86,"tagline":87,"is_featured":88,"date_created":89,"date_updated":9},858,"https:\u002F\u002Fwww.genspark.ai\u002F","Genspark Design","genspark-design",[64,67,69,72,74,76,78,80,82,84],{"seo":9,"name":65,"slug":66},"AI Powered","ai-powered",{"seo":9,"name":9,"slug":68},"ai",{"seo":9,"name":70,"slug":71},"Freemium","freemium",{"seo":9,"name":9,"slug":73},"free-trial",{"seo":9,"name":9,"slug":75},"image-editing",{"seo":9,"name":9,"slug":77},"video",{"seo":9,"name":9,"slug":79},"animation",{"seo":9,"name":9,"slug":81},"prototyping",{"seo":9,"name":9,"slug":83},"no-code",{"seo":9,"name":9,"slug":85},"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":91,"url":92,"icon":9,"name":93,"slug":94,"tags":95,"cover":97,"tagline":98,"is_featured":88,"date_created":99,"date_updated":9},857,"https:\u002F\u002Folivia-tsui.github.io\u002Fct\u002F","World's Best Scale Tool","worlds-best-scale-tool",[96],{"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":101,"url":102,"icon":9,"name":103,"slug":104,"tags":105,"cover":107,"tagline":108,"is_featured":88,"date_created":109,"date_updated":9},856,"https:\u002F\u002Fwww.tints.dev\u002F","Tailwind CSS Color Generator","tailwind-css-color-generator",[106],{"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":111,"url":112,"icon":9,"name":113,"slug":114,"tags":115,"cover":119,"tagline":120,"is_featured":88,"date_created":121,"date_updated":9},855,"https:\u002F\u002Fscreensiz.es\u002F","Screensiz.es","screensiz-es",[116,117],{"seo":9,"name":47,"slug":31},{"seo":9,"name":9,"slug":118},"inspiration","b56672d4-1eab-4481-a3f5-4440977fb881.webp","Device screen sizes and viewport reference","2026-06-24T04:30:50.994519+00:00",[123,129,135,141,147,148,149,155,161,167,173,179,185,191,197,203],{"url":124,"name":125,"slug":126,"cover":127,"tagline":128},"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":130,"name":131,"slug":132,"cover":133,"tagline":134},"https:\u002F\u002Fmeshgradient.com","Mesh Gradient","mesh-gradient","de892395-dc05-42ff-83f9-913d028370cc.webp","Create beautiful mesh gradient backgrounds for your designs",{"url":136,"name":137,"slug":138,"cover":139,"tagline":140},"https:\u002F\u002Fatmos.style","Atmos","atmos-color","9b5710cd-372d-46e9-997f-76a6df7e01d6.webp","Suite of online color tools for UI designers",{"url":142,"name":143,"slug":144,"cover":145,"tagline":146},"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":102,"name":103,"slug":104,"cover":107,"tagline":108},{"url":92,"name":93,"slug":94,"cover":97,"tagline":98},{"url":150,"name":151,"slug":152,"cover":153,"tagline":154},"https:\u002F\u002Fpixelover.io","Pixelover","pixelover","db4709c5-3246-4f7e-ab89-1057c960c83f.webp","Online color picker and image overlay tool",{"url":156,"name":157,"slug":158,"cover":159,"tagline":160},"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":162,"name":163,"slug":164,"cover":165,"tagline":166},"https:\u002F\u002Fx.ant.design","Ant Design X","ant-design-x","d137be0a-9852-4925-ab5d-f3a55ae63682.webp","Conversational UI component library by Ant Group",{"url":168,"name":169,"slug":170,"cover":171,"tagline":172},"https:\u002F\u002Fimageprompt.org","ImagePrompt","imageprompt","9210d8bd-a879-4683-a60b-193d44cb343c.webp","Free AI image-to-prompt generator",{"url":174,"name":175,"slug":176,"cover":177,"tagline":178},"https:\u002F\u002Ffigma.to.website","Figma to Website","figma-to-website","e81f59a8-7c6e-4600-b377-3a5bdcd5636f.webp","Publish live websites from Figma designs",{"url":180,"name":181,"slug":182,"cover":183,"tagline":184},"https:\u002F\u002Fclipbook.app","Clipbook","clipbook","925fd4fd-3e4c-49dc-a0c5-af653d860315.webp","macOS clipboard history manager",{"url":186,"name":187,"slug":188,"cover":189,"tagline":190},"https:\u002F\u002Fgithub.cards","GitHub.cards","github-cards","58b0c7d4-d07f-464a-b07f-584728d96ba8.webp","Generate beautiful GitHub profile data cards",{"url":192,"name":193,"slug":194,"cover":195,"tagline":196},"https:\u002F\u002Fblazy.studio\u002Fapp","Blazy Studio","blazy-studio","ec2cfd45-1569-4a57-979c-7c79d107b6a3.webp","Turn Figma prototypes into video animations",{"url":198,"name":199,"slug":200,"cover":201,"tagline":202},"https:\u002F\u002Femojis.alexandru.so","AI Emojis","ai-emojis","f80c09f5-50e2-4b68-afc2-e28b071722df.webp","Generate unique emojis with artificial intelligence",{"url":204,"name":205,"slug":206,"cover":207,"tagline":208},"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",[210,223,240],{"url":211,"icon":9,"name":212,"slug":213,"tags":214,"cover":220,"tagline":221,"is_featured":3,"date_created":222,"date_updated":9},"https:\u002F\u002Flinear.app","Linear","linear-app",[215,217,218,219],{"seo":9,"name":9,"slug":216},"collaboration",{"seo":9,"name":9,"slug":81},{"seo":9,"name":70,"slug":71},{"seo":9,"name":9,"slug":85},"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":224,"icon":9,"name":225,"slug":226,"tags":227,"cover":237,"tagline":238,"is_featured":3,"date_created":239,"date_updated":9},"https:\u002F\u002Fwww.gimp.org","GIMP","gimp",[228,229,232,233,235],{"seo":9,"name":47,"slug":31},{"seo":9,"name":230,"slug":231},"Open Source","open-source",{"seo":9,"name":9,"slug":75},{"seo":9,"name":9,"slug":234},"svg",{"seo":9,"name":9,"slug":236},"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":241,"icon":9,"name":242,"slug":243,"tags":244,"cover":250,"tagline":251,"is_featured":3,"date_created":252,"date_updated":9},"https:\u002F\u002Fbalsamiq.com","Balsamiq","balsamiq",[245,247,248,249],{"seo":9,"name":9,"slug":246},"wireframe",{"seo":9,"name":9,"slug":81},{"seo":9,"name":9,"slug":216},{"seo":9,"name":70,"slug":71},"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"]