{"id":29807,"date":"2017-04-17T21:01:25","date_gmt":"2017-04-17T13:01:25","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=29807"},"modified":"2022-07-15T17:06:38","modified_gmt":"2022-07-15T09:06:38","slug":"blend-your-own-css-gradient","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/blend-your-own-css-gradient\/","title":{"rendered":"Blend Your Own CSS Gradients with This Free Web App"},"content":{"rendered":"<p>Every web designer should know about <strong>CSS3 gradients<\/strong>. They\u2019ve been around for years and they\u2019re widely supported by all major browsers.<\/p>\n<p>And now, free web apps such as <strong><a target=\"_blank\" href=\"http:\/\/www.colinkeany.com\/blend\/\" rel=\"noopener\">Blend<\/a><\/strong> let you create CSS3 gradients on the fly with <strong>in-browser visual editors<\/strong>. You can choose between <strong>linear & radial gradients<\/strong> while tinkering with colors to blend.<\/p>\n<p>The initial page loads with <strong>two solid colors<\/strong> on either side. You can use the <strong>color palette<\/strong> to flip between hues or enter a <strong>manual HEX code<\/strong> if you know the color you want. Once you\u2019ve got two colors you like, click the <strong>\u201cLet\u2019s blend\u201d button<\/strong> in the center.<\/p>\n<p class=\"note\"> <strong>Read Also:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-linear-gradient\/\">CSS3 Linear Gradients [CSS3 Tips]<\/a><\/p>\n<p>Both colors blend together into a CSS3 gradient with <strong>editable options<\/strong> near the top of the page. You can choose between <strong>linear gradients<\/strong> & <strong>radial gradients<\/strong>, and if you\u2019re using the linear style you can <strong>drag the center location<\/strong> all across the page.<\/p>\n<p>Plus, while you\u2019re <strong>in blend mode<\/strong> you can still go back to <strong>change the colors<\/strong> at the bottom. This is like the perfect code-free CSS3 gradient generator that every designer needs.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/blend-your-own-css-gradient\/02-blend-css-linear-gradient.jpg\" alt=\"blending css3 gradients\" width=\"1000\" height=\"633\"><\/figure>\n<p>Once you have two colors you like, you can click the <strong>code bracket icon<\/strong> in the top-right corner. This brings up a <strong>window with CSS code<\/strong> that you can copy\/paste into your stylesheets.<\/p>\n<p>Blend is a free tool created by NYC designer <a target=\"_blank\" href=\"http:\/\/www.colinkeany.com\/\" rel=\"noopener\">Colin Keany<\/a>. It\u2019s also <strong>hosted on his site<\/strong>, although I do not see a link to GitHub or any free source code anywhere. But he did write <strong><a target=\"_blank\" href=\"http:\/\/www.colinkeany.com\/case-studies\/blend\/\" rel=\"noopener\">a case study<\/a><\/strong> detailing his process creating Blend with all its handy features.<\/p>\n<p>Unfortunately, the current version <strong>does not support more than two colors<\/strong>. But I\u2019m crossing my fingers for multi-color options in the future.<\/p>\n<p>Since you can\u2019t download a local copy, I recommend bookmarking <a target=\"_blank\" href=\"http:\/\/www.colinkeany.com\/blend\/\" rel=\"noopener\">Blend<\/a> for future use. It\u2019s the perfect way to <strong>test gradients<\/strong> without repeatedly editing your stylesheet.<\/p>\n<p>And, if you want to share your ideas or just say thanks for this gradient tool you can tweet Colin <a target=\"_blank\" href=\"https:\/\/twitter.com\/colinkeany\" rel=\"noopener\">@colinkeany<\/a>.<\/p>\n<p class=\"note\"> <strong>Read Also:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-circular-elliptical-gradient\/\">CSS3 Circular and Elliptical Gradients [CSS3 Tips]<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Every web designer should know about CSS3 gradients. They\u2019ve been around for years and they\u2019re widely supported by all major browsers. And now, free web apps such as Blend let you create CSS3 gradients on the fly with in-browser visual editors. You can choose between linear &#038; radial gradients while tinkering with colors to blend.&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[507],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Blend Your Own CSS Gradients with This Free Web App - Hongkiat<\/title>\n<meta name=\"description\" content=\"Every web designer should know about CSS3 gradients. They&#039;ve been around for years and they&#039;re widely supported by all major browsers. And now, free web\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/blend-your-own-css-gradient\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Blend Your Own CSS Gradients with This Free Web App\" \/>\n<meta property=\"og:description\" content=\"Every web designer should know about CSS3 gradients. They&#039;ve been around for years and they&#039;re widely supported by all major browsers. And now, free web\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/blend-your-own-css-gradient\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-17T13:01:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-15T09:06:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/blend-your-own-css-gradient\/02-blend-css-linear-gradient.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blend-your-own-css-gradient\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blend-your-own-css-gradient\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Blend Your Own CSS Gradients with This Free Web App\",\"datePublished\":\"2017-04-17T13:01:25+00:00\",\"dateModified\":\"2022-07-15T09:06:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blend-your-own-css-gradient\\\/\"},\"wordCount\":356,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blend-your-own-css-gradient\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/blend-your-own-css-gradient\\\/02-blend-css-linear-gradient.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blend-your-own-css-gradient\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blend-your-own-css-gradient\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blend-your-own-css-gradient\\\/\",\"name\":\"Blend Your Own CSS Gradients with This Free Web App - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blend-your-own-css-gradient\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blend-your-own-css-gradient\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/blend-your-own-css-gradient\\\/02-blend-css-linear-gradient.jpg\",\"datePublished\":\"2017-04-17T13:01:25+00:00\",\"dateModified\":\"2022-07-15T09:06:38+00:00\",\"description\":\"Every web designer should know about CSS3 gradients. They've been around for years and they're widely supported by all major browsers. And now, free web\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blend-your-own-css-gradient\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blend-your-own-css-gradient\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blend-your-own-css-gradient\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/blend-your-own-css-gradient\\\/02-blend-css-linear-gradient.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/blend-your-own-css-gradient\\\/02-blend-css-linear-gradient.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/blend-your-own-css-gradient\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blend Your Own CSS Gradients with This Free Web App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Blend Your Own CSS Gradients with This Free Web App - Hongkiat","description":"Every web designer should know about CSS3 gradients. They've been around for years and they're widely supported by all major browsers. And now, free web","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/blend-your-own-css-gradient\/","og_locale":"en_US","og_type":"article","og_title":"Blend Your Own CSS Gradients with This Free Web App","og_description":"Every web designer should know about CSS3 gradients. They've been around for years and they're widely supported by all major browsers. And now, free web","og_url":"https:\/\/www.hongkiat.com\/blog\/blend-your-own-css-gradient\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-04-17T13:01:25+00:00","article_modified_time":"2022-07-15T09:06:38+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/blend-your-own-css-gradient\/02-blend-css-linear-gradient.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/blend-your-own-css-gradient\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/blend-your-own-css-gradient\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Blend Your Own CSS Gradients with This Free Web App","datePublished":"2017-04-17T13:01:25+00:00","dateModified":"2022-07-15T09:06:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/blend-your-own-css-gradient\/"},"wordCount":356,"commentCount":1,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/blend-your-own-css-gradient\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/blend-your-own-css-gradient\/02-blend-css-linear-gradient.jpg","keywords":["CSS"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/blend-your-own-css-gradient\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/blend-your-own-css-gradient\/","url":"https:\/\/www.hongkiat.com\/blog\/blend-your-own-css-gradient\/","name":"Blend Your Own CSS Gradients with This Free Web App - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/blend-your-own-css-gradient\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/blend-your-own-css-gradient\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/blend-your-own-css-gradient\/02-blend-css-linear-gradient.jpg","datePublished":"2017-04-17T13:01:25+00:00","dateModified":"2022-07-15T09:06:38+00:00","description":"Every web designer should know about CSS3 gradients. They've been around for years and they're widely supported by all major browsers. And now, free web","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/blend-your-own-css-gradient\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/blend-your-own-css-gradient\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/blend-your-own-css-gradient\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/blend-your-own-css-gradient\/02-blend-css-linear-gradient.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/blend-your-own-css-gradient\/02-blend-css-linear-gradient.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/blend-your-own-css-gradient\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Blend Your Own CSS Gradients with This Free Web App"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7KL","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29807","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=29807"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29807\/revisions"}],"predecessor-version":[{"id":60462,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29807\/revisions\/60462"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=29807"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=29807"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=29807"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=29807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}