[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en-US":3,"blog-categories-en-US":3,"resource-ruri-gradiator-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":54,"alternatives-ruri-gradiator-en-US":119,"related-resources-ruri-gradiator-en-US":240},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},766,"Ruri Gradiator","ruri-gradiator","https:\u002F\u002Fruri.design\u002Fgradiator",null,"Advanced CSS gradient editor with a unique grid interface","Ruri Gradiator is an advanced CSS gradient editor featuring a unique grid-based interface. Users can create multi-stop gradients with precise position control by placing color points on an interactive grid. The tool offers real-time preview, CSS code export, and one-click clipboard copying, making it perfect for web designers and developers who need custom gradients.",{"title":13,"meta_description":14},"Ruri Gradiator -- Advanced CSS gradient editor with a unique grid i...","Ruri Gradiator is an advanced CSS gradient editor featuring a unique gridbased interface. Users can create multistop gradients with precise position control ...",[16,17,18,19,20,21],"Grid-based gradient editor with precise color point positioning","Multi-stop gradient support with unlimited color stops","Real-time preview of the gradient output","CSS code generation with one-click copy to clipboard","Adjustable gradient angle and color interpolation","Export gradient as CSS or data URL",[23,24,25],"Intuitive grid interface makes gradient creation visual and fun","Precise control over each color stop position","Free to use with no account required",[27,28],"No option to save gradients for later use","Limited to linear gradients only","Best for web designers and developers who want fine-grained control over CSS gradient creation with a visual and intuitive interface.","089f81a2-3082-45c0-bce5-ffc9875cb87b.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],{"name":47,"slug":31},"Free",{"name":49,"slug":50},"Colors","colors",{"name":52,"slug":53},"Gradient","gradient",[55,87,97,107],{"id":56,"url":57,"icon":9,"name":58,"slug":59,"tags":60,"cover":83,"tagline":84,"is_featured":85,"date_created":86,"date_updated":9},858,"https:\u002F\u002Fwww.genspark.ai\u002F","Genspark Design","genspark-design",[61,64,66,69,71,73,75,77,79,81],{"seo":9,"name":62,"slug":63},"AI Powered","ai-powered",{"seo":9,"name":9,"slug":65},"ai",{"seo":9,"name":67,"slug":68},"Freemium","freemium",{"seo":9,"name":9,"slug":70},"free-trial",{"seo":9,"name":9,"slug":72},"image-editing",{"seo":9,"name":9,"slug":74},"video",{"seo":9,"name":9,"slug":76},"animation",{"seo":9,"name":9,"slug":78},"prototyping",{"seo":9,"name":9,"slug":80},"no-code",{"seo":9,"name":9,"slug":82},"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":88,"url":89,"icon":9,"name":90,"slug":91,"tags":92,"cover":94,"tagline":95,"is_featured":85,"date_created":96,"date_updated":9},857,"https:\u002F\u002Folivia-tsui.github.io\u002Fct\u002F","World's Best Scale Tool","worlds-best-scale-tool",[93],{"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":98,"url":99,"icon":9,"name":100,"slug":101,"tags":102,"cover":104,"tagline":105,"is_featured":85,"date_created":106,"date_updated":9},856,"https:\u002F\u002Fwww.tints.dev\u002F","Tailwind CSS Color Generator","tailwind-css-color-generator",[103],{"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":108,"url":109,"icon":9,"name":110,"slug":111,"tags":112,"cover":116,"tagline":117,"is_featured":85,"date_created":118,"date_updated":9},855,"https:\u002F\u002Fscreensiz.es\u002F","Screensiz.es","screensiz-es",[113,114],{"seo":9,"name":47,"slug":31},{"seo":9,"name":9,"slug":115},"inspiration","b56672d4-1eab-4481-a3f5-4440977fb881.webp","Device screen sizes and viewport reference","2026-06-24T04:30:50.994519+00:00",[120,126,132,138,144,150,156,162,168,174,180,186,192,198,204,210,216,222,228,234],{"url":121,"name":122,"slug":123,"cover":124,"tagline":125},"https:\u002F\u002Fpigment.shapefactory.co","Pigment","pigment","3aa8318c-dc03-4e6b-b429-d73c051ed65b.webp","Simple online color palette generator for designers",{"url":127,"name":128,"slug":129,"cover":130,"tagline":131},"https:\u002F\u002Fsimple.ink","Simple.ink","simple-ink","78540c8e-358f-4b18-9a7b-1b0ce10e876f.webp","Beautiful design documentation and handoff platform",{"url":133,"name":134,"slug":135,"cover":136,"tagline":137},"https:\u002F\u002Fqingtu.co","Qingtu","qingtu","9156c0a4-af28-4a33-9c0b-d0ed3bd0f747.webp","Screenshot beautification, annotation and sharing tool",{"url":139,"name":140,"slug":141,"cover":142,"tagline":143},"https:\u002F\u002Fsame.energy","Same.energy","same-energy","5eb9b4be-0beb-4dbc-a53a-54bc632ad38b.webp","AI-powered visual search for similar style and composition",{"url":145,"name":146,"slug":147,"cover":148,"tagline":149},"https:\u002F\u002Fgradientora.com","Gradientora","gradientora","959a8972-2b17-440a-b385-778609d07df7.webp","A curated collection of 1100+ gradients for every design project",{"url":151,"name":152,"slug":153,"cover":154,"tagline":155},"https:\u002F\u002Fcraft.do","Craft","craft","e707cffb-90dd-42a0-87be-73c208e9cfe3.webp","Beautiful document creation for Mac, iOS and Web",{"url":157,"name":158,"slug":159,"cover":160,"tagline":161},"https:\u002F\u002Fvectormaker.co","Vectormaker","vectormaker","3ffa729b-d51b-4bc1-b2df-536a43336b87.webp","Convert PNG images to SVG vectors online",{"url":163,"name":164,"slug":165,"cover":166,"tagline":167},"https:\u002F\u002Fd.design","堆友 \u002F D.design","d-design","5b070c3d-05b2-451a-915b-e34ffb995d20.webp","Alibaba's 3D scene and avatar editor for everyone",{"url":169,"name":170,"slug":171,"cover":172,"tagline":173},"https:\u002F\u002Fslantt.co","Slantt","slantt","13aa2788-c462-4897-b95b-510d1c56657e.webp","Add 3D perspective effects to flat images online",{"url":175,"name":176,"slug":177,"cover":178,"tagline":179},"https:\u002F\u002Fmagicpattern.design","MagicPattern","magicpattern","bc5a27ac-20f5-443c-9d44-c9d453c9f5b3.webp","Create stunning patterns, gradients, and blobs in minutes",{"url":181,"name":182,"slug":183,"cover":184,"tagline":185},"https:\u002F\u002Fgoodpalette.io","Goodpalette","goodpalette","1c508913-1ea0-4383-9122-91c1c93faecb.webp","Generate accessible color palettes for UI design",{"url":187,"name":188,"slug":189,"cover":190,"tagline":191},"https:\u002F\u002Fmeshgradient.com","Mesh Gradient","mesh-gradient","de892395-dc05-42ff-83f9-913d028370cc.webp","Create beautiful mesh gradient backgrounds for your designs",{"url":193,"name":194,"slug":195,"cover":196,"tagline":197},"https:\u002F\u002Fchecklist.design","Checklist Design","checklist-design","8e09f24a-d01a-4ef4-b71e-fbc3a6cef962.webp","Curated checklists for every stage of design",{"url":199,"name":200,"slug":201,"cover":202,"tagline":203},"https:\u002F\u002Fimgsrc.io","Imgsrc.io","imgsrc","4298aa03-dd1f-4968-aa01-addaeef24d5b.webp","Brand mockup generator for social-ready images",{"url":205,"name":206,"slug":207,"cover":208,"tagline":209},"https:\u002F\u002Fstudio.morflax.com","Morflax Studio","morflax-studio","f580b0df-2038-4020-8691-72b9ec0646b7.webp","Online 3D product visualization and design tool",{"url":211,"name":212,"slug":213,"cover":214,"tagline":215},"https:\u002F\u002Fatmos.style","Atmos","atmos-color","9b5710cd-372d-46e9-997f-76a6df7e01d6.webp","Suite of online color tools for UI designers",{"url":217,"name":218,"slug":219,"cover":220,"tagline":221},"https:\u002F\u002Fpixelover.io","Pixelover","pixelover","db4709c5-3246-4f7e-ab89-1057c960c83f.webp","Online color picker and image overlay tool",{"url":223,"name":224,"slug":225,"cover":226,"tagline":227},"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":229,"name":230,"slug":231,"cover":232,"tagline":233},"https:\u002F\u002Fcsshero.org\u002Fmesher","CSS Hero Mesher","css-hero-mesher","c8e938c6-095b-4b0f-b2b4-e24a18bec17d.webp","Create beautiful mesh gradient backgrounds with CSS",{"url":235,"name":236,"slug":237,"cover":238,"tagline":239},"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",[241,254,271],{"url":242,"icon":9,"name":243,"slug":244,"tags":245,"cover":251,"tagline":252,"is_featured":3,"date_created":253,"date_updated":9},"https:\u002F\u002Flinear.app","Linear","linear-app",[246,248,249,250],{"seo":9,"name":9,"slug":247},"collaboration",{"seo":9,"name":9,"slug":78},{"seo":9,"name":67,"slug":68},{"seo":9,"name":9,"slug":82},"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":255,"icon":9,"name":256,"slug":257,"tags":258,"cover":268,"tagline":269,"is_featured":3,"date_created":270,"date_updated":9},"https:\u002F\u002Fwww.gimp.org","GIMP","gimp",[259,260,263,264,266],{"seo":9,"name":47,"slug":31},{"seo":9,"name":261,"slug":262},"Open Source","open-source",{"seo":9,"name":9,"slug":72},{"seo":9,"name":9,"slug":265},"svg",{"seo":9,"name":9,"slug":267},"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":272,"icon":9,"name":273,"slug":274,"tags":275,"cover":281,"tagline":282,"is_featured":3,"date_created":283,"date_updated":9},"https:\u002F\u002Fbalsamiq.com","Balsamiq","balsamiq",[276,278,279,280],{"seo":9,"name":9,"slug":277},"wireframe",{"seo":9,"name":9,"slug":78},{"seo":9,"name":9,"slug":247},{"seo":9,"name":67,"slug":68},"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"]