[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-categories-en-US":3,"categories-en-US":3,"resource-ui-gradients-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":49,"alternatives-ui-gradients-en-US":115,"related-resources-ui-gradients-en-US":176},true,{"id":5,"name":6,"slug":7,"url":8,"date_updated":9,"images_other":10,"tagline":11,"description":12,"seo":13,"features":16,"pros":20,"cons":25,"best_for":28,"cover":29,"icon":30,"pricing":31,"platform":10,"github_url":10,"twitter_url":10,"discord_url":10,"dribbble_url":10,"pricing_tiers":32,"views_count":33,"featured_rank":10,"categories":34,"tags":39,"files":10},158,"uiGradients","ui-gradients","https:\u002F\u002Fuigradients.com\u002F","2025-11-11T09:34:16.698+00:00",null,"A Simple and Pure Gradient Inspiration Library","uiGradients is an incredibly simple online resource dedicated to providing a collection of high-quality, two-color gradient schemes. It is beloved by designers for its minimalist design and pure, inspirational presentation.\nPure Inspiration Discovery: The core experience of uiGradients is all about \"discovery.\" It has no complex editor, only a massive, full-screen display of a single gradient background. You can click the left and right arrows to browse through hundreds of beautifully named, community-contributed gradient schemes, much like flipping through an art book.\nOne-Click Code Copying: When you find a gradient you like, you simply click the code icon in the top-right corner. It instantly generates the CSS code for that gradient and automatically copies it to your clipboard for immediate use in your projects.\nMultiple Formats and Orientations: It not only provides CSS code but also allows you to download the gradient as a .JPG image file. Additionally, you can change the gradient's orientation (top-to-bottom, left-to-right, etc.) on the fly and generate the corresponding code.",{"title":14,"meta_description":15},"uiGradients - A Simple and Pure Gradient Inspiration Library | DesignToolMark","uiGradients is an incredibly simple online resource dedicated to providing a collection of highquality, twocolor gradient schemes. It is beloved by designers...",[17,18,19],"1.  Pure Inspiration Discovery: The core experience of uiGradients is all about \"discovery.\" It has no complex editor, only a massive, full-screen display of a single gradient background. You can click the left and right arrows to browse through hundreds of beautifully named, community-contributed gradient schemes, much like flipping through an art book.","2.  One-Click Code Copying: When you find a gradient you like, you simply click the code icon in the top-right corner. It instantly generates the CSS code for that gradient and automatically copies it to your clipboard for immediate use in your projects.","3.  Multiple Formats and Orientations: It not only provides CSS code but also allows you to download the gradient as a `.JPG` image file. Additionally, you can change the gradient's orientation (top-to-bottom, left-to-right, etc.) on the fly and generate the corresponding code.",[21,22,23,24],"Extensive icon library","Color palette generation","Export to CSS\u002Fdesign tools","Streamlines workflow",[26,27],"Limited to color generation only","May require learning curve","1.  Pure Inspiration Discovery: The core experience of uiGradients is all about \"discovery.\" It has no complex editor, only a massive, full-screen display of a single gradient background. You can click the left and right arrows to browse through hundreds of beautifully named, community-contributed gradient schemes, much like flipping through an art book. 2.  One-Click Code Copying: When you find a gradient you like, you simply click the code icon in the top-right corner. It instantly generates the CSS code for that gradient and automatically copies it to your clipboard for immediate use in your projects. 3.  Multiple Formats and Orientations: It not only provides CSS code but also allows you to download the gradient as a `.JPG` image file. Additionally, you can change the gradient's orientation (top-to-bottom, left-to-right, etc.) on the fly and generate the corresponding code.","81454a0a-ce43-4d26-bc07-5aed0f372832.png","c5269d39-6d84-4199-833d-b30255005595.svg","free",{"free":3},0,[35],{"name":36,"slug":37,"sub_categories":38},"Colors & Palettes","colors-palettes",[],[40,43,46],{"name":41,"slug":42},"Colors","colors",{"name":44,"slug":45},"Freebie","freebie",{"name":47,"slug":48},"Gradient","gradient",[50,82,92,102],{"id":51,"url":52,"icon":10,"name":53,"slug":54,"tags":55,"cover":78,"tagline":79,"is_featured":80,"date_created":81,"date_updated":10},858,"https:\u002F\u002Fwww.genspark.ai\u002F","Genspark Design","genspark-design",[56,59,61,64,66,68,70,72,74,76],{"seo":10,"name":57,"slug":58},"AI Powered","ai-powered",{"seo":10,"name":10,"slug":60},"ai",{"seo":10,"name":62,"slug":63},"Freemium","freemium",{"seo":10,"name":10,"slug":65},"free-trial",{"seo":10,"name":10,"slug":67},"image-editing",{"seo":10,"name":10,"slug":69},"video",{"seo":10,"name":10,"slug":71},"animation",{"seo":10,"name":10,"slug":73},"prototyping",{"seo":10,"name":10,"slug":75},"no-code",{"seo":10,"name":10,"slug":77},"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":83,"url":84,"icon":10,"name":85,"slug":86,"tags":87,"cover":89,"tagline":90,"is_featured":80,"date_created":91,"date_updated":10},857,"https:\u002F\u002Folivia-tsui.github.io\u002Fct\u002F","World's Best Scale Tool","worlds-best-scale-tool",[88],{"seo":10,"name":10,"slug":42},"eb5afb81-91ac-496d-96b6-bd870afbc2a8.webp","Advanced color scale and palette generation tool","2026-06-24T04:31:04.697212+00:00",{"id":93,"url":94,"icon":10,"name":95,"slug":96,"tags":97,"cover":99,"tagline":100,"is_featured":80,"date_created":101,"date_updated":10},856,"https:\u002F\u002Fwww.tints.dev\u002F","Tailwind CSS Color Generator","tailwind-css-color-generator",[98],{"seo":10,"name":10,"slug":42},"bd6eba7c-091e-4cfa-83c6-a7f3392e1032.webp","Tailwind CSS 11-color palette generator and API","2026-06-24T04:30:57.92162+00:00",{"id":103,"url":104,"icon":10,"name":105,"slug":106,"tags":107,"cover":112,"tagline":113,"is_featured":80,"date_created":114,"date_updated":10},855,"https:\u002F\u002Fscreensiz.es\u002F","Screensiz.es","screensiz-es",[108,110],{"seo":10,"name":109,"slug":31},"Free",{"seo":10,"name":10,"slug":111},"inspiration","b56672d4-1eab-4481-a3f5-4440977fb881.webp","Device screen sizes and viewport reference","2026-06-24T04:30:50.994519+00:00",[116,122,128,134,140,146,152,158,164,170],{"url":117,"name":118,"slug":119,"cover":120,"tagline":121},"https:\u002F\u002Fcolornamer.netlify.app\u002F","Color Namer","color-namer","screenshots\u002Fcolor-namer.webp","An interesting tool that finds a vivid, descriptive name for any hex color code.",{"url":123,"name":124,"slug":125,"cover":126,"tagline":127},"https:\u002F\u002Fcoolors.co\u002F","Coolors","coolors","93a28b44-64ce-471d-b308-115b863a4c77.webp","Your Ultimate Color Palette Generator",{"url":129,"name":130,"slug":131,"cover":132,"tagline":133},"https:\u002F\u002Fhuemint.com\u002F","Huemint","huemint","screenshots\u002Fhuemint.webp","The AI Color Palette Generator for Real-World Use Cases",{"url":135,"name":136,"slug":137,"cover":138,"tagline":139},"https:\u002F\u002Fcolorhunt.co\u002F","Colorhunt","colorhunt","96432e34-3989-435b-9bf3-a88b067709d4.webp","Color Hunt is a hand-picked gallery of color palettes. Fueled by its community, it offers an endless stream of trendy, high-quality schemes—perfect for designers seeking quick color inspiration.",{"url":141,"name":142,"slug":143,"cover":144,"tagline":145},"https:\u002F\u002Fcolor.adobe.com\u002F","Adobe Color","adobe-color","screenshots\u002Fadobe-color.webp","Adobe Color is a professional color tool deeply integrated into the Adobe ecosystem, combining color theory with powerful accessibility features for systematic color management.",{"url":147,"name":148,"slug":149,"cover":150,"tagline":151},"https:\u002F\u002Fcssgradient.io\u002F","CSS Gradient","css-gradient","0407c84f-2e37-415a-aa9f-a51b5afa2f23.webp","CSS Gradient transforms the task of writing complex CSS gradients into a simple, efficient, visual process, making it an essential code generator for front-end developers and designers.",{"url":153,"name":154,"slug":155,"cover":156,"tagline":157},"https:\u002F\u002Fcolors.eva.design\u002F","Eva Design System","eva-design-system","364a20cc-8836-4e8e-a54a-a5003a2faed5.webp","A deep learning color generator providing multi-gradient color schemes for brand and semantic colors.",{"url":159,"name":160,"slug":161,"cover":162,"tagline":163},"https:\u002F\u002Fwww.happyhues.co\u002F","Happy Hues","happy-hues","06ef73ee-10b3-439b-ac96-a85df6f400b9.webp","Learn Color Palettes in a Real-World Context",{"url":165,"name":166,"slug":167,"cover":168,"tagline":169},"http:\u002F\u002Fcolormind.io\u002F","Colormind","colormind","3b9fbb79-3f40-41ea-8b33-2d681fccc65a.webp","Colormind is a color scheme generator that uses deep learning. It can learn color styles from photographs, movies, and popular art.",{"url":171,"name":172,"slug":173,"cover":174,"tagline":175},"https:\u002F\u002Fbrandcolors.net\u002F","BrandColors","brand-colors","screenshots\u002Fbrand-colors.webp","The Official Color Code Library for the World's Biggest Brands",[177,188,191],{"url":178,"icon":10,"name":179,"slug":180,"tags":181,"cover":185,"tagline":186,"is_featured":3,"date_created":187,"date_updated":10},"https:\u002F\u002Fcolorhunt.co","Color Hunt","color-hunt",[182,183,184],{"seo":10,"name":10,"slug":42},{"seo":10,"name":109,"slug":31},{"seo":10,"name":10,"slug":48},"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":84,"icon":10,"name":85,"slug":86,"tags":189,"cover":89,"tagline":90,"is_featured":80,"date_created":91,"date_updated":10},[190],{"seo":10,"name":10,"slug":42},{"url":94,"icon":10,"name":95,"slug":96,"tags":192,"cover":99,"tagline":100,"is_featured":80,"date_created":101,"date_updated":10},[193],{"seo":10,"name":10,"slug":42}]