close
Shot by #<User:0x000055c60af9a5f8>

Art by Ryan Hammond

How to create dreamy color blurs in Adobe Illustrator

Ever wonder how designers create those blurry gradient-like effects in Adobe Illustrator? Today, we’re sharing a quick and easy design tutorial to help you achieve the same look and feel. These dreamy color transitions have become quite the trend this year in graphic and web design, and it’s easy to see why.

Unlike traditional gradients that we are accustomed to creating using the Gradient Tool, this new technique makes use of Adobe Illustrator’s Mesh Tool—allowing for way more control and an infinite amount of unique color possibilities. Take a look at some examples:

  1. Gradation 04 color mixing flat noise sky blur gradient color gradient identity branding
  2. Datalands Site information illustration art data data viz dataviz infographic creative design datalands
  3. Color Play background design branding design identity visual identity branding noise blur color gradient

Row 1: Ryan Hammond, Script & Seal, Ryan Hammond for Herefor Studio.


How it’s done

We asked designer and partner at Herefor, Ryan Hammond, to break down his process for creating these blurry looking gradients. Ryan was kind enough to share his technique as well as a step-by-step visual of the process. Let’s take a closer look:

1. Start with a base color applied to a shape, then using the Mesh Tool in Adobe Illustrator, begin adding color. A color can be applied to any anchor point once you initiate the Mesh Tool within that shape (the hot-key for the Mesh Tool is ‘U’). You can create a more complex gradient by adding anchor points.

2. The process beyond that is a bit of a hybrid between finger-painting and watercolor. You can push and pull color through the shape, but overworking or using certain colors can turn it into mud. You can always delete anchor points within the shape if it gets out of control.

3. That’s it! I sometimes apply a little texture to it in Photoshop afterward.

1d44d08d756a9b1a996ac5e0eddf9752


Examples to inspire your designs

Now that you know how to start creating dreamy color blurs in Adobe Illustrator, here’s a curated collection of examples to inspire your next design. The color blur effect looks wonderful in many different applications from graphic design to branding, UI design, and more. We encourage you to keep experimenting with all of the endless possibilities!

  1. HM Architecture Concept typography elegant blur fade color architecture mobile ios concept ux ui
  2. Art exhibition art app white typography service clear ui  ux design uiux blue simple design clean animate web ux design daily 100 uidesign ux ui dribbble design
  3. Nike | UI Mobile Version blurred blur cart checkout shopping cart buy color gradient style shop mob responsive mobile app mobile
  4. Another thing movement mint primary blurs gradient color identity branding
  5. Cotton Lake gradient cotton minnesota lake minimal graphic logo typography simplistic
  6. Be (seltzer) water, my friend. seltzer brand logo script monogram gradient branding can
  7. Please please type script blue red texture gradient
  8. Evolum chakras emotion festive minimal growth colorfull brand meditation flow evolution logo design identity branding logo
  9. spike: homepage site website webinar web design web visual identity teach promo product page product design online memberships landing page landing identity e-learning education edtech courses app

Row 1: Kyle McDowell 🤘🏼, Valery Cheplygin, Giga Tamarashvili for Bold Monkey. Row 2: Ryan Hammond for Herefor Studio, Aleisha Samek, John Oates for Focus Lab. Row 3: Jacob Etter, Omnium, Vladimir Gruev for heartbeat.


MORE GRADIENT RESOURCES

Find more Process stories on our blog Courtside. Have a suggestion? Contact stories@dribbble.com.


Previous
Next