[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-categories-en-US":3,"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":129,"related-resources-ruri-gradiator-en-US":250},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,76,90,103],{"id":56,"url":57,"icon":9,"name":58,"slug":59,"tags":60,"cover":72,"tagline":73,"is_featured":74,"date_created":75,"date_updated":9},862,"https:\u002F\u002Fdeveloper.apple.com\u002Fdesign\u002Fresources\u002F","Apple Design Resources","apple-design-resources",[61,62,64,66,68,70],{"seo":9,"name":47,"slug":31},{"seo":9,"name":9,"slug":63},"fonts",{"seo":9,"name":9,"slug":65},"icons",{"seo":9,"name":9,"slug":67},"mockups",{"seo":9,"name":9,"slug":69},"ui-kits",{"seo":9,"name":9,"slug":71},"design-systems","39af338d-2e06-4c05-bfcb-b33066ed9bb7.webp","Official Apple design templates, UI kits, fonts, and tools",false,"2026-07-16T01:44:01.585569+00:00",{"id":77,"url":78,"icon":9,"name":79,"slug":80,"tags":81,"cover":87,"tagline":88,"is_featured":74,"date_created":89,"date_updated":9},861,"https:\u002F\u002Fferalui.dev\u002Fgradients","FeralUI Gradient Builder","feralui-gradients",[82,83,86],{"seo":9,"name":47,"slug":31},{"seo":9,"name":84,"slug":85},"Open Source","open-source",{"seo":9,"name":9,"slug":50},"7ebaf15a-33a1-4f03-bd92-88ad52b886e5.webp","Playful, physics-driven gradient builder for Tailwind CSS","2026-07-16T01:39:25.742464+00:00",{"id":91,"url":92,"icon":9,"name":93,"slug":94,"tags":95,"cover":100,"tagline":101,"is_featured":74,"date_created":102,"date_updated":9},860,"https:\u002F\u002Fviewport-ui.design\u002F","Viewport UI","viewport-ui",[96,97,98],{"seo":9,"name":47,"slug":31},{"seo":9,"name":9,"slug":69},{"seo":9,"name":9,"slug":99},"inspiration","7a4e7938-e9b1-4f8b-9886-37b683ddd8f6.webp","UI curated experiences for your inspiration","2026-07-07T06:28:48.469215+00:00",{"id":104,"url":105,"icon":9,"name":106,"slug":107,"tags":108,"cover":126,"tagline":127,"is_featured":74,"date_created":128,"date_updated":9},859,"https:\u002F\u002F21st.dev\u002F","21st.dev","21st-dev",[109,112,114,115,118,119,120,122,124],{"seo":9,"name":110,"slug":111},"AI Powered","ai-powered",{"seo":9,"name":9,"slug":113},"ai",{"seo":9,"name":47,"slug":31},{"seo":9,"name":116,"slug":117},"Freemium","freemium",{"seo":9,"name":9,"slug":69},{"seo":9,"name":9,"slug":71},{"seo":9,"name":9,"slug":121},"prototyping",{"seo":9,"name":9,"slug":123},"no-code",{"seo":9,"name":9,"slug":125},"productivity","79e67612-7a6f-45be-a799-e872786fc4ed.webp","Hand-crafted React components and templates — not AI slop","2026-07-07T06:23:36.061553+00:00",[130,136,142,148,154,160,166,172,178,184,190,196,202,208,214,220,226,232,238,244],{"url":131,"name":132,"slug":133,"cover":134,"tagline":135},"https:\u002F\u002Fpigment.shapefactory.co","Pigment","pigment","3aa8318c-dc03-4e6b-b429-d73c051ed65b.webp","Simple online color palette generator for designers",{"url":137,"name":138,"slug":139,"cover":140,"tagline":141},"https:\u002F\u002Fsimple.ink","Simple.ink","simple-ink","78540c8e-358f-4b18-9a7b-1b0ce10e876f.webp","Beautiful design documentation and handoff platform",{"url":143,"name":144,"slug":145,"cover":146,"tagline":147},"https:\u002F\u002Fqingtu.co","Qingtu","qingtu","9156c0a4-af28-4a33-9c0b-d0ed3bd0f747.webp","Screenshot beautification, annotation and sharing tool",{"url":149,"name":150,"slug":151,"cover":152,"tagline":153},"https:\u002F\u002Fsame.energy","Same.energy","same-energy","5eb9b4be-0beb-4dbc-a53a-54bc632ad38b.webp","AI-powered visual search for similar style and composition",{"url":155,"name":156,"slug":157,"cover":158,"tagline":159},"https:\u002F\u002Fgradientora.com","Gradientora","gradientora","959a8972-2b17-440a-b385-778609d07df7.webp","A curated collection of 1100+ gradients for every design project",{"url":161,"name":162,"slug":163,"cover":164,"tagline":165},"https:\u002F\u002Fcraft.do","Craft","craft","e707cffb-90dd-42a0-87be-73c208e9cfe3.webp","Beautiful document creation for Mac, iOS and Web",{"url":167,"name":168,"slug":169,"cover":170,"tagline":171},"https:\u002F\u002Fvectormaker.co","Vectormaker","vectormaker","3ffa729b-d51b-4bc1-b2df-536a43336b87.webp","Convert PNG images to SVG vectors online",{"url":173,"name":174,"slug":175,"cover":176,"tagline":177},"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":179,"name":180,"slug":181,"cover":182,"tagline":183},"https:\u002F\u002Fslantt.co","Slantt","slantt","13aa2788-c462-4897-b95b-510d1c56657e.webp","Add 3D perspective effects to flat images online",{"url":185,"name":186,"slug":187,"cover":188,"tagline":189},"https:\u002F\u002Fmagicpattern.design","MagicPattern","magicpattern","bc5a27ac-20f5-443c-9d44-c9d453c9f5b3.webp","Create stunning patterns, gradients, and blobs in minutes",{"url":191,"name":192,"slug":193,"cover":194,"tagline":195},"https:\u002F\u002Fgoodpalette.io","Goodpalette","goodpalette","1c508913-1ea0-4383-9122-91c1c93faecb.webp","Generate accessible color palettes for UI design",{"url":197,"name":198,"slug":199,"cover":200,"tagline":201},"https:\u002F\u002Fmeshgradient.com","Mesh Gradient","mesh-gradient","de892395-dc05-42ff-83f9-913d028370cc.webp","Create beautiful mesh gradient backgrounds for your designs",{"url":203,"name":204,"slug":205,"cover":206,"tagline":207},"https:\u002F\u002Fchecklist.design","Checklist Design","checklist-design","8e09f24a-d01a-4ef4-b71e-fbc3a6cef962.webp","Curated checklists for every stage of design",{"url":209,"name":210,"slug":211,"cover":212,"tagline":213},"https:\u002F\u002Fimgsrc.io","Imgsrc.io","imgsrc","4298aa03-dd1f-4968-aa01-addaeef24d5b.webp","Brand mockup generator for social-ready images",{"url":215,"name":216,"slug":217,"cover":218,"tagline":219},"https:\u002F\u002Fstudio.morflax.com","Morflax Studio","morflax-studio","f580b0df-2038-4020-8691-72b9ec0646b7.webp","Online 3D product visualization and design tool",{"url":221,"name":222,"slug":223,"cover":224,"tagline":225},"https:\u002F\u002Fatmos.style","Atmos","atmos-color","9b5710cd-372d-46e9-997f-76a6df7e01d6.webp","Suite of online color tools for UI designers",{"url":227,"name":228,"slug":229,"cover":230,"tagline":231},"https:\u002F\u002Fpixelover.io","Pixelover","pixelover","db4709c5-3246-4f7e-ab89-1057c960c83f.webp","Online color picker and image overlay tool",{"url":233,"name":234,"slug":235,"cover":236,"tagline":237},"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":239,"name":240,"slug":241,"cover":242,"tagline":243},"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":245,"name":246,"slug":247,"cover":248,"tagline":249},"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",[251,264,280],{"url":252,"icon":9,"name":253,"slug":254,"tags":255,"cover":261,"tagline":262,"is_featured":3,"date_created":263,"date_updated":9},"https:\u002F\u002Flinear.app","Linear","linear-app",[256,258,259,260],{"seo":9,"name":9,"slug":257},"collaboration",{"seo":9,"name":9,"slug":121},{"seo":9,"name":116,"slug":117},{"seo":9,"name":9,"slug":125},"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":265,"icon":9,"name":266,"slug":267,"tags":268,"cover":277,"tagline":278,"is_featured":3,"date_created":279,"date_updated":9},"https:\u002F\u002Fwww.gimp.org","GIMP","gimp",[269,270,271,273,275],{"seo":9,"name":47,"slug":31},{"seo":9,"name":84,"slug":85},{"seo":9,"name":9,"slug":272},"image-editing",{"seo":9,"name":9,"slug":274},"svg",{"seo":9,"name":9,"slug":276},"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":281,"icon":9,"name":282,"slug":283,"tags":284,"cover":290,"tagline":291,"is_featured":3,"date_created":292,"date_updated":9},"https:\u002F\u002Fbalsamiq.com","Balsamiq","balsamiq",[285,287,288,289],{"seo":9,"name":9,"slug":286},"wireframe",{"seo":9,"name":9,"slug":121},{"seo":9,"name":9,"slug":257},{"seo":9,"name":116,"slug":117},"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"]