{"id":32406,"date":"2016-02-16T05:00:42","date_gmt":"2016-02-16T13:00:42","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=32406"},"modified":"2024-04-10T06:16:21","modified_gmt":"2024-04-10T13:16:21","slug":"infographic-the-missing-guide-to-gradients","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/infographic-the-missing-guide-to-gradients","title":{"rendered":"The Missing Guide To Gradients"},"content":{"rendered":"

As far as design elements go, gradients are hot right now. Color fading from one hue to another is a treatment that can be seen on everything from app title screens to website backgrounds to all over tees. But like any other trend in design, they’re best used in moderation. We’ve put together this guide to using gradients in your next project. Let us know what you think in the comments.
\n\"Gradients-Infographic-01_S\"<\/p>\n

<\/span>Get Inspired<\/span><\/h2>\n

\nThere’s a wide variety of inspiring gradient-based designs out there on the web. Take a look out there and you’ll find a veritable rainbow of gradient goodness. Like this web site for Aussie design studio Pixel Palace<\/a>, the portfolio of Designer\/Developer Erik Zuuring<\/a>, or the homepage of digital production agency Symodd<\/a>.
\nDribbble is also a great resource for gradient inspiration. This roundup of shots<\/a> tagged with “Gradients” provide interesting starting points to create your own.
\n\"Missing-Guide-to-Gradients-4\"
\nSimilarly, regularly running a Behance search<\/a> on projects that use gradients can be a great source of novel ideas to try:
\n\"Missing-Guide-to-Gradients-5\"\n<\/p>\n

<\/span>Learn The Lingo<\/span><\/h2>\n

\nTo help you get the most out of gradients in your graphic design, it’s helpful to know a few key terms. Here are some that you might see pop up when creating or applying gradients:\n<\/p>\n

<\/span>Color Stops<\/span><\/h3>\n

\nA gradient can be thought of as the shortest distance between two colors, A and B. Color stops are the two colors that the gradient is formed between.\n<\/p>\n

<\/span>Opacity Stops<\/span><\/h3>\n

\nJust as you can define the color of a gradient stop, some formats (like SVG) let you define the opacity (or ‘see-through’ quality) of a color.\n<\/p>\n

<\/span>Midpoint<\/span><\/h3>\n

\nThis is useful in determining where you want your gradient to start switching colors. Not to be confused with the midpoint of your shape or line, which can be different.\n<\/p>\n

<\/span>Linear Gradient<\/span><\/h3>\n

\nA gradient that switches colors in a single direction, usually horizontally or vertically.\n<\/p>\n

<\/span>Angular Gradient<\/span><\/h3>\n

\nA gradient that switches colors around an angled line.\n<\/p>\n

<\/span>Radial Gradient<\/span><\/h3>\n

\nA gradient that switches colors from the outside to the inside (or vice versa).\n<\/p>\n

<\/span>Diamond Gradient<\/span><\/h3>\n

\nA gradient with a diamond-shaped point at the center.\n<\/p>\n

<\/span>Banding<\/span><\/h3>\n

\nWhen creating gradients, sometimes you might notice that your gradient forms into strips of color, or ‘bands’. This is an unwanted effect that happens because the computer sometimes doesn’t know how to smoothly gradiate from one color to the next. To counter this, try adding a small amount of noise to your images.\n<\/p>\n

<\/span>How To Apply A Gradient<\/span><\/h2>\n

\nNext up, let’s see how to create a basic gradient. We’ll show you by using Adobe Illustrator, although almost any graphic design app should contain a similar feature.\n<\/p>\n

    \n
  1. To apply a gradient, first look for the gradient tool. Fittingly, the tool for this in Illustrator is designated by a square gradient icon. <\/li>\n

    \n\"Missing-Guide-to-Gradients-3\"<\/p>\n

  2. You’ll need to apply the gradient to an object, like a shape or some type. <\/li>\n

    \n\"Missing-Guide-to-Gradients-1\"<\/p>\n

  3. In the options area, you’ll be able to play with the colors within your gradient, the midpoint, and also the direction in which your gradient flows. <\/li>\n

    \n\"Missing-Guide-to-Gradients-2\"\n<\/ol>\n

    \nIf it’s a gradient you’ll be using again in the future, it’s wise to save your style as a swatch. Note, you can also create gradients in CSS, although you might need to be handy with code.\n<\/p>\n

    <\/span>Gradient Goodness<\/span><\/h2>\n

    \nHere are a few tips to keep in mind when putting together your gradients:
    \nFirst up, like most things when it comes to design, it’s best to keep gradients simple. It’s best to use gradients as a subtle background element, or as a one-off to give something emphasis. Next, try and restrict your gradients to two or three contrasting colors. There are exceptions, but gradients with too many colors will end up looking like you’ve fallen in love with the rainbow filter in Photoshop. Gradients that are monotone or duotone (one or two colors) also work nicely. <\/p><\/p>\n","protected":false},"excerpt":{"rendered":"

    As far as design elements go, gradients are hot right now. Color fading from one hue to another is a treatment that can be seen on everything from app title screens to website backgrounds to all over tees. But like any other trend in design, they’re best used in moderation. We’ve put together this guide […]<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[74],"tags":[385],"topics":[],"class_list":["post-32406","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-gradients"],"acf":[],"yoast_head":"\nThe Missing Guide To Gradients - Creative Market Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativemarket.com\/blog\/infographic-the-missing-guide-to-gradients\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Missing Guide To Gradients\" \/>\n<meta property=\"og:description\" content=\"As far as design elements go, gradients are hot right now. Color fading from one hue to another is a treatment that can be seen on everything from app\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativemarket.com\/blog\/infographic-the-missing-guide-to-gradients\" \/>\n<meta property=\"og:site_name\" content=\"Creative Market Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crtvmrkt\" \/>\n<meta property=\"article:published_time\" content=\"2016-02-16T13:00:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-10T13:16:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/02\/10030119\/Gradients-Infographic-01_S1.jpg.webp\" \/>\n<meta name=\"author\" content=\"Peter M\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:site\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Peter M\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/infographic-the-missing-guide-to-gradients\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/infographic-the-missing-guide-to-gradients\",\"name\":\"The Missing Guide To Gradients - Creative Market Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/infographic-the-missing-guide-to-gradients#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/infographic-the-missing-guide-to-gradients#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2016\\\/02\\\/10030119\\\/Gradients-Infographic-01_S1.jpg.webp\",\"datePublished\":\"2016-02-16T13:00:42+00:00\",\"dateModified\":\"2024-04-10T13:16:21+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#\\\/schema\\\/person\\\/cb099a319207bed698f73f7e84899674\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/infographic-the-missing-guide-to-gradients#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativemarket.com\\\/blog\\\/infographic-the-missing-guide-to-gradients\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/infographic-the-missing-guide-to-gradients#primaryimage\",\"url\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2016\\\/02\\\/10030119\\\/Gradients-Infographic-01_S1.jpg.webp\",\"contentUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2016\\\/02\\\/10030119\\\/Gradients-Infographic-01_S1.jpg.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/infographic-the-missing-guide-to-gradients#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Missing Guide To Gradients\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\",\"name\":\"Creative Market Blog\",\"description\":\"Creative Market Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"The Missing Guide To Gradients - Creative Market Blog","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:\/\/creativemarket.com\/blog\/infographic-the-missing-guide-to-gradients","og_locale":"en_US","og_type":"article","og_title":"The Missing Guide To Gradients","og_description":"As far as design elements go, gradients are hot right now. Color fading from one hue to another is a treatment that can be seen on everything from app","og_url":"https:\/\/creativemarket.com\/blog\/infographic-the-missing-guide-to-gradients","og_site_name":"Creative Market Blog","article_publisher":"https:\/\/www.facebook.com\/crtvmrkt","article_published_time":"2016-02-16T13:00:42+00:00","article_modified_time":"2024-04-10T13:16:21+00:00","og_image":[{"url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/02\/10030119\/Gradients-Infographic-01_S1.jpg.webp","type":"","width":"","height":""}],"author":"Peter M","twitter_card":"summary_large_image","twitter_creator":"@creativemarket","twitter_site":"@creativemarket","twitter_misc":{"Written by":"Peter M","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativemarket.com\/blog\/infographic-the-missing-guide-to-gradients","url":"https:\/\/creativemarket.com\/blog\/infographic-the-missing-guide-to-gradients","name":"The Missing Guide To Gradients - Creative Market Blog","isPartOf":{"@id":"https:\/\/creativemarket.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativemarket.com\/blog\/infographic-the-missing-guide-to-gradients#primaryimage"},"image":{"@id":"https:\/\/creativemarket.com\/blog\/infographic-the-missing-guide-to-gradients#primaryimage"},"thumbnailUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/02\/10030119\/Gradients-Infographic-01_S1.jpg.webp","datePublished":"2016-02-16T13:00:42+00:00","dateModified":"2024-04-10T13:16:21+00:00","author":{"@id":"https:\/\/creativemarket.com\/blog\/#\/schema\/person\/cb099a319207bed698f73f7e84899674"},"breadcrumb":{"@id":"https:\/\/creativemarket.com\/blog\/infographic-the-missing-guide-to-gradients#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativemarket.com\/blog\/infographic-the-missing-guide-to-gradients"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creativemarket.com\/blog\/infographic-the-missing-guide-to-gradients#primaryimage","url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/02\/10030119\/Gradients-Infographic-01_S1.jpg.webp","contentUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/02\/10030119\/Gradients-Infographic-01_S1.jpg.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/creativemarket.com\/blog\/infographic-the-missing-guide-to-gradients#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativemarket.com\/blog\/"},{"@type":"ListItem","position":2,"name":"The Missing Guide To Gradients"}]},{"@type":"WebSite","@id":"https:\/\/creativemarket.com\/blog\/#website","url":"https:\/\/creativemarket.com\/blog\/","name":"Creative Market Blog","description":"Creative Market Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creativemarket.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/32406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/comments?post=32406"}],"version-history":[{"count":0,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/32406\/revisions"}],"wp:attachment":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/media?parent=32406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/categories?post=32406"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/tags?post=32406"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/topics?post=32406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}