Free design tools for UI & UX designers

<!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8">  <script async src="https://www.googletagmanager.com/gtag/js?id=G-32XGNVLTZH"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-32XGNVLTZH'); </script>  <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="Web tools for design, including gradients, accessibility, and data visualization."> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="google-site-verification" content="hT0REfh6cLm7Tq1EE8RcDGVhOZ5JUZHCrnKQKmryF0w" /> <link rel="canonical" href="https://learnui.design/tools/">  <link rel="icon" href="/favicon.png">  <meta name="twitter:image:src" content="https://learnui.designhttps://learnui.design/tools/img/twitter-card-tools.png" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@erikdkennedy" /> <meta name="twitter:title" content="Free tools for UI & UX designers" /> <meta name="twitter:description" content="Web tools for design, including gradients, accessibility, and data visualization." />  <meta property="og:image" content="https://learnui.designhttps://learnui.design/tools/img/twitter-card-tools.png" /> <meta property="og:url" content="https://learnui.design/tools/" /> <meta property="og:title" content="Free tools for UI & UX designers" /> <meta property="og:type" content="website" /> <meta property="og:description" content="Web tools for design, including gradients, accessibility, and data visualization." /> <title>Free design tools for UI & UX designers - Learn UI Design</title>  <link rel="preload" href="/Fonts/rajdhani-600.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/Fonts/rajdhani-700.woff2" as="font" type="font/woff2" crossorigin>  <link rel="stylesheet" href=/css/tools-styles-main.css>  <script> (function (d) { var config = { kitId: 'rbq4wdf', scriptTimeout: 3000, async: true }, h = d.documentElement, t = setTimeout(function () { h.className = h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive"; }, config.scriptTimeout), tk = d.createElement("script"), f = false, s = d.getElementsByTagName("script")[0], a; h.className += " wf-loading"; tk.src = 'https://use.typekit.net/' + config.kitId + '.js'; tk.async = true; tk.onload = tk.onreadystatechange = function () { a = this.readyState; if (f || a && a != "complete" && a != "loaded") return; f = true; clearTimeout(t); try { Typekit.load(config); } catch (e) { } }; s.parentNode.insertBefore(tk, s); })(document); </script>  <meta name="theme-color" content="#232323">  <style type="text/css"> @font-face { font-family: "Avenir Next W01_n4"; src: url("/Fonts/e9167238-3b3f-4813-a04a-a384394eed42.eot?#iefix") format("eot") } @font-face { font-family: "Avenir Next W01"; src: url("/Fonts/e9167238-3b3f-4813-a04a-a384394eed42.eot?#iefix"); src: url("/Fonts/e9167238-3b3f-4813-a04a-a384394eed42.eot?#iefix") format("eot"), url(/Fonts/2cd55546-ec00-4af9-aeca-4a3cd186da53.woff2) format("woff2"), url("/Fonts/1e9892c0-6927-4412-9874-1b82801ba47a.woff") format("woff"), url("/Fonts/46cf1067-688d-4aab-b0f7-bd942af6efd8.ttf") format("truetype"); font-weight: 400; font-style: normal; } @font-face { font-family: "Avenir Next W01_i4"; src: url("/Fonts/d1fddef1-d940-4904-8f6c-17e809462301.eot?#iefix") format("eot") } @font-face { font-family: "Avenir Next W01"; src: url("/Fonts/d1fddef1-d940-4904-8f6c-17e809462301.eot?#iefix"); src: url("/Fonts/d1fddef1-d940-4904-8f6c-17e809462301.eot?#iefix") format("eot"), url("/Fonts/7377dbe6-f11a-4a05-b33c-bc8ce1f60f84.woff2") format("woff2"), url("/Fonts/92b66dbd-4201-4ac2-a605-4d4ffc8705cc.woff") format("woff"), url("/Fonts/18839597-afa8-4f0b-9abb-4a30262d0da8.ttf") format("truetype"); font-weight: 400; font-style: italic; } @font-face { font-family: "Avenir Next W01_n6"; src: url("/Fonts/12d643f2-3899-49d5-a85b-ff430f5fad15.eot?#iefix") format("eot") } @font-face { font-family: "Avenir Next W01"; src: url("/Fonts/12d643f2-3899-49d5-a85b-ff430f5fad15.eot?#iefix"); src: url("/Fonts/12d643f2-3899-49d5-a85b-ff430f5fad15.eot?#iefix") format("eot"), url("/Fonts/aad99a1f-7917-4dd6-bbb5-b07cedbff64f.woff2") format("woff2"), url("/Fonts/91b50bbb-9aa1-4d54-9159-ec6f19d14a7c.woff") format("woff"), url("/Fonts/a0f4c2f9-8a42-4786-ad00-fce42b57b148.ttf") format("truetype"); font-weight: 600; font-style: normal; } @font-face { font-family: "Avenir Next W01_i6"; src: url("/Fonts/770d9a7e-8842-4376-9319-8f2c8b8e880d.eot?#iefix") format("eot") } @font-face { font-family: "Avenir Next W01"; src: url("/Fonts/770d9a7e-8842-4376-9319-8f2c8b8e880d.eot?#iefix"); src: url("/Fonts/770d9a7e-8842-4376-9319-8f2c8b8e880d.eot?#iefix") format("eot"), url("/Fonts/687932cb-145b-4690-a21d-ed1243db9e36.woff2") format("woff2"), url("/Fonts/bc350df4-3100-4ce1-84ce-4a5363dbccfa.woff") format("woff"), url("/Fonts/bc13ae80-cd05-42b4-b2a9-c123259cb166.ttf") format("truetype"); font-weight: 600; font-style: italic; } </style>  <script async src="https://js.sparkloop.app/team_f00743092ecf.js" data-sparkloop></script>  <script>!function (t, e) { var o, n, p, r; e.__SV || (window.posthog = e, e._i = [], e.init = function (i, s, a) { function g(t, e) { var o = e.split("."); 2 == o.length && (t = t[o[0]], e = o[1]), t[e] = function () { t.push([e].concat(Array.prototype.slice.call(arguments, 0))); }; } (p = t.createElement("script")).type = "text/javascript", p.async = !0, p.src = s.api_host + "/static/array.js", (r = t.getElementsByTagName("script")[0]).parentNode.insertBefore(p, r); var u = e; for (void 0 !== a ? u = e[a] = [] : a = "posthog", u.people = u.people || [], u.toString = function (t) { var e = "posthog"; return "posthog" !== a && (e += "." + a), t || (e += " (stub)"), e; }, u.people.toString = function () { return u.toString(1) + ".people (stub)"; }, o = "capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onSessionId".split(" "), n = 0; n < o.length; n++)g(u, o[n]); e._i.push([i, s, a]); }, e.__SV = 1); }(document, window.posthog || []); posthog.init('phc_IVbfFirMI2bQ30AXl48R8A79IXkDDY7zfKhXpZwMiBx', { api_host: 'https://app.posthog.com' })</script> </head> <body class=""> <a href="#content" class="skip-to-content">Skip to content</a> <header > <div class="header__logo"> <a href="/" aria-label="Learn UI Design"> <svg xmlns="http://www.w3.org/2000/svg" width="227" height="48" viewBox="0 0 227 48" alt="Learn UI Design"> <defs> <linearGradient id="logo-and-text-a" x1="50%" x2="50%" y1="0%" y2="100%"> <stop offset="0%" stop-color="#FF9F2F" /> <stop offset="100%" stop-color="#FF6026" /> </linearGradient> </defs> <g fill="none" fill-rule="evenodd"> <path fill="#FFF" d="M78.7452267,17.1764789 L76,17.1764789 L76,30.7065246 L84.4317676,30.7065246 L84.4317676,28.3926907 L78.7452267,28.3926907 L78.7452267,17.1764789 Z M86.089224,17.1764789 L86.089224,30.7065246 L94.5209916,30.7065246 L94.5209916,28.3926907 L88.8344507,28.3926907 L88.8344507,24.8631135 L93.9327288,24.8631135 L93.9327288,22.5492796 L88.8344507,22.5492796 L88.8344507,19.5099215 L94.5209916,19.5099215 L94.5209916,17.1764789 L86.089224,17.1764789 Z M98.158933,30.7065246 L98.982501,28.1377768 L103.512125,28.1377768 L104.335693,30.7065246 L107.257399,30.7065246 L102.551296,17.1764789 L99.9237216,17.1764789 L95.2176187,30.7065246 L98.158933,30.7065246 Z M101.237509,21.0590137 L102.766992,25.8239429 L99.7080252,25.8239429 L101.237509,21.0590137 Z M119.13102,30.7065246 L116.326967,24.9415486 C117.797624,24.333677 118.640801,23.1375425 118.640801,21.3139276 C118.640801,18.568701 116.699533,17.1764789 113.58174,17.1764789 L108.738376,17.1764789 L108.738376,30.7065246 L111.483603,30.7065246 L111.483603,25.3925501 L113.679784,25.3925501 L116.111271,30.7065246 L119.13102,30.7065246 Z M111.483603,23.0787162 L111.483603,19.5099215 L113.326826,19.5099215 C114.954354,19.5099215 115.895574,19.9020968 115.895574,21.3139276 C115.895574,22.7257585 114.954354,23.0787162 113.326826,23.0787162 L111.483603,23.0787162 Z M128.612372,17.1764789 L128.612372,25.6670728 L123.318007,17.1764789 L121.04339,17.1764789 L121.04339,30.7065246 L123.651356,30.7065246 L123.651356,22.3335832 L128.926112,30.7065246 L131.220338,30.7065246 L131.220338,17.1764789 L128.612372,17.1764789 Z M146.869162,17.1764789 L146.869162,25.23568 C146.869162,27.5495139 146.10442,28.5691695 144.418066,28.5691695 C142.731713,28.5691695 141.966971,27.5495139 141.966971,25.23568 L141.966971,17.1764789 L139.221745,17.1764789 L139.221745,25.23568 C139.221745,29.2162587 141.417926,30.8830034 144.418066,30.8830034 C147.418207,30.8830034 149.614388,29.2162587 149.614388,25.2160712 L149.614388,17.1764789 L146.869162,17.1764789 Z M155.428902,17.1764789 L152.683676,17.1764789 L152.683676,30.7065246 L155.428902,30.7065246 L155.428902,17.1764789 Z M168.410935,30.7065246 C171.469902,30.7065246 173.607257,29.1182149 173.607257,24.823896 L173.607257,23.0591074 C173.607257,18.7451798 171.469902,17.1764789 168.410935,17.1764789 L163.606788,17.1764789 L163.606788,30.7065246 L168.410935,30.7065246 Z M168.410935,28.3926907 L166.352015,28.3926907 L166.352015,19.5099215 L168.410935,19.5099215 C170.23455,19.5099215 170.86203,20.7256648 170.86203,23.0591074 L170.86203,24.823896 C170.86203,27.1573387 170.23455,28.3926907 168.410935,28.3926907 Z M176.068672,17.1764789 L176.068672,30.7065246 L184.50044,30.7065246 L184.50044,28.3926907 L178.813899,28.3926907 L178.813899,24.8631135 L183.912177,24.8631135 L183.912177,22.5492796 L178.813899,22.5492796 L178.813899,19.5099215 L184.50044,19.5099215 L184.50044,17.1764789 L176.068672,17.1764789 Z M195.707363,19.2157901 C194.746534,17.7255242 193.119007,17 190.962043,17 C187.746206,17 186.334375,18.6667448 186.334375,20.8040998 C186.334375,23.0394987 187.667771,24.3140682 190.334563,25.0199836 C192.530744,25.5886377 193.099398,26.1180743 193.099398,27.0592949 C193.099398,27.8828629 192.569961,28.5691695 191.00126,28.5691695 C189.609038,28.5691695 188.78547,28.118168 188.059946,27.216165 L185.961809,28.6672133 C187.157943,30.2359143 188.805079,30.8830034 191.177739,30.8830034 C194.354359,30.8830034 195.844625,29.1574324 195.844625,26.9416423 C195.844625,24.5493733 194.570055,23.4905002 191.746393,22.7845848 C189.942387,22.3335832 189.079602,21.862973 189.079602,20.8040998 C189.079602,19.882488 189.7463,19.3138339 190.981652,19.3138339 C192.354265,19.3138339 193.06018,19.7648354 193.648443,20.6864472 L195.707363,19.2157901 Z M201.031658,17.1764789 L198.286432,17.1764789 L198.286432,30.7065246 L201.031658,30.7065246 L201.031658,17.1764789 Z M208.924701,23.6669791 L208.924701,25.980813 L211.199317,25.980813 C211.042447,27.6083402 210.414967,28.5691695 208.865875,28.5691695 C207.277565,28.5691695 206.434388,27.4906876 206.434388,24.9023311 L206.434388,22.9806724 C206.434388,20.3923158 207.277565,19.3138339 208.865875,19.3138339 C210.238488,19.3138339 210.964012,20.1374019 211.199317,21.3727539 L213.826891,21.3727539 C213.415107,18.6079185 211.709145,17 208.865875,17 C205.826517,17 203.689161,18.8040061 203.689161,23.17676 L203.689161,24.9023311 C203.689161,29.0397798 205.826517,30.8830034 208.865875,30.8830034 C211.924841,30.8830034 213.8465,29.0397798 213.8465,24.9023311 L213.8465,23.6669791 L208.924701,23.6669791 Z M223.876898,17.1764789 L223.876898,25.6670728 L218.582532,17.1764789 L216.307916,17.1764789 L216.307916,30.7065246 L218.915881,30.7065246 L218.915881,22.3335832 L224.190638,30.7065246 L226.484863,30.7065246 L226.484863,17.1764789 L223.876898,17.1764789 Z" /> <path fill="#4B4B4B" d="M48.003127,0.000151951537 C55.2880286,5.47353401 60,14.1864971 60,24 C60,33.8139507 55.2875986,42.5272612 48.0021297,48.0005973 L11.9978703,48.0005973 C4.71240142,42.5272612 0,33.8139507 0,24 C0,14.1864971 4.71197138,5.47353401 11.996873,0.000151951537 Z" /> <path fill="url(#logo-and-text-a)" d="M24,14.9933977 C24,14.4447593 24.4437166,14 24.9998075,14 L28.0001925,14 C28.5523709,14 29,14.4474894 29,14.9985024 L29,27.0000004 L39.0044225,27.0000002 C39.5542648,27.0000002 40,27.4437168 40,27.9998076 L40,31.0001927 C40,31.5523711 39.5553691,32.0000002 38.9991283,32.0000002 L27.0094776,32.0000002 C25.347389,32.0000002 24,30.6470746 24,29.0074604 L24,14.9933977 Z" /> <rect width="3" height="5" x="29" y="27" fill="#232323" opacity=".3" /> </g> </svg> </a> </div> <ul class="header__nav"> <li> <a href="/" class="header__link" >UI<span class="mobile-lg"> Course</span></a> </li> <li> <a href="/courses/learn-ux-design.html" class="header__link" >UX<span class="mobile-lg"> Course</span></a> </li> <li> <a href="/courses/landing-page-academy.html" class="header__link" >LP<span class="mobile-lg"> Course</span></a> </li> <li> <a href="/blog/" class="header__link" >Blog</a> </li> <li class="header__menu-parent" aria-haspopup="true"> <a href="/tools/" class="header__link header__link--active" >Tools</a> <ul class="header__menu" aria-label="submenu"> <li><a href="/tools/data-color-picker.html"> <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_2969_1865)"> <rect width="28" height="28" rx="1" fill="#244754"/> <rect x="22" y="-2" width="8" height="33" fill="#FFA620"/> <rect x="6" y="6" width="8" height="33" fill="#C07ED9"/> <rect x="14" y="2" width="8" height="37" fill="#FF6C89"/> <rect x="-2" y="11" width="8" height="20" fill="#008FCE"/> <g opacity="0.8" clip-path="url(#clip1_2969_1865)"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.06667 6H14C14.9907 6 15.4861 6 15.9024 6.05055C19.0692 6.43507 21.5649 8.93081 21.9494 12.0976C22 12.5139 22 13.0093 22 14C22 14.9907 22 15.4861 21.9494 15.9024C21.5649 19.0692 19.0692 21.5649 15.9024 21.9494C15.4861 22 14.9907 22 14 22H7.06667C6.56384 22 6.31242 22 6.15621 21.8438C6 21.6876 6 21.4362 6 20.9333V7.06667C6 6.56384 6 6.31242 6.15621 6.15621C6.31242 6 6.56384 6 7.06667 6ZM10 10H14.8C16.5673 10 18 11.4327 18 13.2V14.8C18 16.5673 16.5673 18 14.8 18H10V10Z" fill="white"/> <path opacity="0.3" d="M10 10L6 10L6 21.4667C6 21.7612 6.23879 22 6.53334 22H10V10Z" fill="#4B4B4B"/> </g> </g> <defs> <clipPath id="clip0_2969_1865"> <rect width="28" height="28" rx="1" fill="white"/> </clipPath> <clipPath id="clip1_2969_1865"> <rect width="16" height="16" fill="white" transform="translate(6 6)"/> </clipPath> </defs> </svg> <span>Data Visualization Color Picker</span> </a></li> <li><a href="/tools/accessible-color-generator.html"> <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_2971_18)"> <rect x="-1" y="9" width="10" height="30" transform="rotate(-90 -1 9)" fill="#F68BCC"/> <rect x="-1" y="19" width="10" height="30" transform="rotate(-90 -1 19)" fill="#F06DB0"/> <rect x="-1" y="29" width="10" height="30" transform="rotate(-90 -1 29)" fill="#E94B92"/> <path opacity="0.8" d="M11.2608 6.74373C11.4142 6.29868 11.8332 6 12.304 6H16.4828L11.222 21.2563C11.0685 21.7013 10.6496 22 10.1788 22H6.77386C6.39488 22 6.12873 21.6267 6.25227 21.2684L11.2608 6.74373Z" fill="white"/> <path opacity="0.8" d="M16.4828 6L14.5518 11.7931L17.6146 21.237C17.7622 21.6919 18.186 22 18.6643 22H22.0153C22.405 22 22.6718 21.6071 22.5282 21.2449L16.4828 6Z" fill="white"/> <path opacity="0.3" d="M16.4828 6L17.3104 8.2069L15.3793 14.2759L14.5518 11.7931L16.4828 6Z" fill="#4B4B4B"/> </g> <defs> <clipPath id="clip0_2971_18"> <rect width="28" height="28" rx="1" fill="white"/> </clipPath> </defs> </svg> <span>Accessible Color Generator</span> </a></li> <li><a href="/tools/gradient-generator.html"> <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="28" height="28" rx="1" fill="url(#paint0_linear_2971_32)"/> <g opacity="0.8" clip-path="url(#clip0_2971_32)"> <mask id="mask0_2971_32" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="6" y="6" width="16" height="16"> <path d="M7.55992 21.0315C8.74003 22 10.4934 22 14 22C17.5066 22 19.26 22 20.4401 21.0315C20.6561 20.8542 20.8542 20.6561 21.0315 20.4401C22 19.26 22 17.5066 22 14C22 10.4934 22 8.74003 21.0315 7.55992C20.8542 7.34388 20.6561 7.14579 20.4401 6.96849C19.26 6 17.5066 6 14 6C10.4934 6 8.74003 6 7.55992 6.96849C7.34388 7.14579 7.14579 7.34388 6.96849 7.55992C6 8.74003 6 10.4934 6 14C6 17.5066 6 19.26 6.96849 20.4401C7.14579 20.6561 7.34388 20.8542 7.55992 21.0315Z" fill="url(#paint1_linear_2971_32)"/> </mask> <g mask="url(#mask0_2971_32)"> <path fill-rule="evenodd" clip-rule="evenodd" d="M14 22C10.4934 22 8.74003 22 7.55992 21.0315C7.34388 20.8542 7.14579 20.6561 6.96849 20.4401C6 19.26 6 17.5066 6 14C6 10.4934 6 8.74003 6.96849 7.55992C7.14579 7.34388 7.34388 7.14579 7.55992 6.96849C8.74003 6 10.4934 6 14 6C17.5066 6 19.26 6 20.4401 6.96849C20.6561 7.14579 20.8542 7.34388 21.0315 7.55992C21.5302 8.16759 21.7721 8.92724 21.8895 10H17.5555H16.6667H10V18H18.6667L16.6666 14H17.5555V14H22C22 17.5066 22 19.26 21.0315 20.4401C20.8542 20.6561 20.6561 20.8542 20.4401 21.0315C19.26 22 17.5066 22 14 22Z" fill="white"/> <path opacity="0.3" d="M10 10H6V18H10V10Z" fill="#4B4B4B"/> <path opacity="0.3" d="M18.6667 18H16L18 22H20.6666L18.6667 18Z" fill="#4B4B4B"/> </g> </g> <defs> <linearGradient id="paint0_linear_2971_32" x1="0" y1="28" x2="28" y2="0" gradientUnits="userSpaceOnUse"> <stop stop-color="#FF00CC"/> <stop offset="0.333333" stop-color="#FF367A"/> <stop offset="0.666667" stop-color="#FF952F"/> <stop offset="1" stop-color="#FFDE0A"/> </linearGradient> <linearGradient id="paint1_linear_2971_32" x1="7.77778" y1="22" x2="20.6667" y2="7.33333" gradientUnits="userSpaceOnUse"> <stop stop-color="#5BBBD9"/> <stop offset="0.142857" stop-color="#48BFD9"/> <stop offset="0.285714" stop-color="#00C9CF"/> <stop offset="0.428571" stop-color="#11D2AD"/> <stop offset="0.571429" stop-color="#70D775"/> <stop offset="0.714286" stop-color="#B6D33B"/> <stop offset="0.857143" stop-color="#EACA0E"/> <stop offset="1" stop-color="#FFC400"/> </linearGradient> <clipPath id="clip0_2971_32"> <rect width="16" height="16" fill="white" transform="translate(6 6)"/> </clipPath> </defs> </svg> <span>Gradient Generator</span> </a></li> <li><a href="/tools/mesh-gradient-generator.html"> <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g clip-path="url(#clip0_2971_34)"> <g clip-path="url(#clip1_2971_34)"> <path d="M36.2 -0.875H-35.8V35.125H36.2V-0.875Z" fill="black"/> <g filter="url(#filter0_f_2971_34)"> <path d="M13.64 -12.875H-19.96V28.165H13.64V-12.875Z" fill="#8024C7"/> <path d="M29.3134 -4.50235H0.0768433V36.7916H29.3134V-4.50235Z" fill="#1172FA"/> <path d="M51.1146 -19.8333H11.9301V23.1048H51.1146V-19.8333Z" fill="#FF0197"/> <path d="M31.2427 14.9154H8.47681V47.7128H31.2427V14.9154Z" fill="#009DE5"/> <path d="M26.5698 17.5024H-12.1376V47.6412H26.5698V17.5024Z" fill="#FFAF1A"/> <path d="M27.8525 50.8635L2.48669 25.8521L-16.5325 45.1409L8.83335 70.1522L27.8525 50.8635Z" fill="#6760F2"/> </g> </g> <g style="mix-blend-mode:overlay" opacity="0.5"> <rect width="28" height="28" fill="url(#pattern0_2971_34)"/> </g> <g opacity="0.8"> <rect x="5" y="6" width="3.86207" height="16" fill="white"/> <path d="M5 6H9.41379L15.4828 22H11.6207L5 6Z" fill="white"/> <path d="M22.1035 6H17.6897L11.6207 22H15.4828L22.1035 6Z" fill="white"/> <path opacity="0.3" d="M5 11.5172V6L8.86207 15.3793V20.8966L5 11.5172Z" fill="#4B4B4B"/> <path opacity="0.3" d="M13.5 17L14.5 14.5L16.5 19.5L15.4828 22L13.5 17Z" fill="#4B4B4B"/> <rect x="18.2414" y="6" width="3.86207" height="16" fill="white"/> <path opacity="0.3" d="M22.1035 11.5172V6L18.2414 15.3793V20.8966L22.1035 11.5172Z" fill="#4B4B4B"/> </g> </g> <defs> <filter id="filter0_f_2971_34" x="-39.16" y="-39.0333" width="109.475" height="128.385" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feFlood flood-opacity="0" result="BackgroundImageFix"/> <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/> <feGaussianBlur stdDeviation="9.6" result="effect1_foregroundBlur_2971_34"/> </filter> <pattern id="pattern0_2971_34" patternContentUnits="objectBoundingBox" width="1" height="1"> <use xlink:href="#image0_2971_34" transform="translate(-0.25 -0.0357143) scale(0.0333929)"/> </pattern> <clipPath id="clip0_2971_34"> <rect width="28" height="28" rx="1" fill="white"/> </clipPath> <clipPath id="clip1_2971_34"> <rect width="72" height="36" fill="white" transform="translate(-35.8 -0.875)"/> </clipPath> </defs> </svg> <span>Mesh Gradient Generator</span> </a></li> <li><a href="/tools/typography-tutorial.html"> <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="28" height="28" rx="1" fill="url(#paint0_linear_2971_35)"/> <rect opacity="0.8" x="7" y="6" width="14.5455" height="3.39394" fill="white"/> <rect opacity="0.8" x="7" y="18.6061" width="14.5455" height="3.39394" fill="white"/> <rect opacity="0.8" x="12.3333" y="9.39392" width="3.87879" height="9.21212" fill="white"/> <rect opacity="0.3" x="12.3333" y="9.39392" width="3.87879" height="2.42424" fill="#4B4B4B"/> <rect opacity="0.3" x="12.3333" y="17.6364" width="3.87879" height="0.969697" fill="#4B4B4B"/> <defs> <linearGradient id="paint0_linear_2971_35" x1="14" y1="0" x2="14" y2="28" gradientUnits="userSpaceOnUse"> <stop stop-color="#0080A2"/> <stop offset="1" stop-color="#4AC4E2"/> </linearGradient> </defs> </svg> <span>Interactive Typography Tutorial</span> </a></li> </ul> </li> <li> <a href="/newsletter.html" class="header__btn">Join 60k+ readers</a> </li> </ul> </header> <a href="/" class="open-alert"> <img src="../img/alert-circle.svg" class="open-alert__icon" alt="Alert"> <p>Learn UI Design is now open for enrollments – for <strong class="countdown__days">--</strong> days <strong class="countdown__hours">--</strong> hr <strong class="countdown__minutes">--</strong> min <strong class="countdown__seconds">--</strong> sec <span class="open-alert__action">Get More Info</span></p> <span class="open-alert__close"><img src="../img/x.svg" alt="Close"></span> </a> <main id="content" class="support-page"> <h1>Tools for Designers</h1> <div class="tools"> <a href="/tools/gradient-generator.html" class="card--light tool-card media"> <img src="/img/tools-list-gradient.svg"> <div> <h2>Gradient Generator</h2> <p>Easily create visually-smooth <strong>linear, radial, & conic gradients</strong>. Export as CSS or SVG (to use in Figma, etc).</p> </div> </a> <a href="/tools/mesh-gradient-generator.html" class="card--light tool-card media"> <img src="/tools/img/tools-list-mesh.svg"> <div> <h2>Mesh Gradient Generator</h2> <p>Create <strong>noisy, blurred, 2-D mesh gradients</strong>. One-click export to SVG or paste into Figma.</p> </div> </a> <a href="/tools/data-color-picker.html" class="card--light tool-card media"> <img src="/tools/img/tools-list-data.svg"> <div> <h2>Data Visualization Color Picker</h2> <p>Create color palettes for charts and graphs. Includes <strong>single-color, two-color, and multi-color palettes</strong>.</p> </div> </a> <a href="/tools/accessible-color-generator.html" class="card--light tool-card media"> <img src="/img/tools-list-a11y.svg"> <div> <h2>Accessible Color Generator</h2> <p>Find the <strong>closest color variations</strong> to your brand color that meet contrast guidelines. </p> </div> </a> <a href="/tools/typography-tutorial.html" class="card--light tool-card media"> <img src="/img/tools-list-itt.svg"> <div> <h2>Interactive Typography Tutorial</h2> <p>A gamified mini-lesson to develop your font-picking and text-styling skills.</p> </div> </a> </div> </main> <footer class="site-footer"> <div class="content-wrapper"> <a href="/" class="footer__img"><img src="/img/footer-logo.svg" alt="Learn UI Design"></a> <div class="footer__cols"> <div class="footer__col"> <h4>Courses</h4> <ul> <li><a href="/">Learn UI Design</a></li> <li><a href="/courses/learn-ux-design.html">Learn UX Design</a></li> <li><a href="/courses/landing-page-academy.html">Landing Page Academy</a></li> </ul> </div> <div class="footer__col"> <h4>Free Tools</h4> <ul> <li><a href="/tools/data-color-picker.html">Data Visualization Color Picker</a></li> <li><a href="/tools/accessible-color-generator.html">Accessible Color Generator</a></li> <li><a href="/tools/gradient-generator.html">Gradient Generator</a></li> <li><a href="/tools/mesh-gradient-generator.html">Mesh Gradient Generator</a></li> <li><a href="/tools/typography-tutorial.html">Interactive Typography Tutorial</a></li> </ul> </div> <div class="footer__col"> <h4>Blog</h4> <ul> <li><a href="/blog/">Home</a></li> <li><a href="/blog/#start-here">Featured Posts</a></li> <li><a href="/blog/#beginner">Beginner Posts</a></li> <li><a href="/blog/#advanced">Advanced Topics</a></li> </ul> </div> <div class="footer__col"> <h4>Other</h4> <ul> <li><a href="/newsletter.html">Design Hacks</a></li> <li><a href="https://x.com/erikdkennedy">𝕏</a></li> <li><a href="https://linkedin.com/in/erikdkennedy">LinkedIn</a></li> </ul> </div> </div> <p class="footer__copyright">©2025 Kennedy Design, Inc. · Made in 🌧 Seattle</p> </div> </footer> <div class="toast"></div> <script src=/js/vendor/jquery-3.0.0.min.js></script> <script src=/js/vendor/jquery.cssAnimateAuto.min.js></script> <script src=/js/vendor/isFontAvailable.min.js></script> <script src=/js/vendor/floatl.js></script> <script src=/js/main.js></script> <script src=/js/utm.js></script> <script src="js/min/chroma.min.js"></script> <script src="/js/vendor/culori.min.js"></script> <script src="js/min/jscolor.min.js"></script> <script src="js/min/clipboard.min.js"></script> <script src="js/min/filesaver.min.js"></script> <script src="../js/main.js"></script> <script> function sendFineChange(jscolorElement) { var fineChange = new CustomEvent("finechange", { detail: { color: jscolorElement.toHEXString() } }); jscolorElement.targetElement.dispatchEvent(fineChange); } </script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-6444473-11', 'auto'); ga('send', 'pageview'); </script> <script src=/js/vendor/countdown.min.js></script> </body> </html>

CINXE.COM

Free design tools for UI & UX designers - Learn UI Design