Visit Blend


Create and customize beautiful CSS3 gradients.

Note: Blend has recently been updated and the case study below is based on the original release. An updated case study is in the works! In the meantime, check out the new and improved Blend! Or check out the original Blend.

About Blend

Like many of my projects, Blend started off as a completely different idea. The plan was originally to create a simple color palette selector, with a very basic option for creating gradients.

However, after a bit of exploration into the idea, I realized there wasn't a simple, modern tool for generating custom gradients based on the user's preferences. With the opportunity to create a useful tool that designers and developers would love, I shifted my focus and Blend was born.

Developing the Idea

The hardest part of the process, after settling on the idea itself, was trying to figure out a simple solution for generating the gradient. I took to CodePen to put together a prototype to see if I could accomplish the gradient effect I was after.

First prototype for generating the gradient. View it on CodePen

After finding some success within the first prototype, I pushed forward with the idea and continued to explore how to make it something people would love.

Once I got the prototype up and running with a simple interface to pair, I ran some very impromptu user-testing within my trusty circle of teammates at DigitalOcean and got my first round of feedback. The results were not great.

The feedback, while productive and important, meant I had to head back to the drawing board. There were several pieces missing to make the tool a fundamentally sound product that not only looked and worked well, but that also offered a valuable solution to a common problem designers face fairly often; producing beautiful, semantic and cross-browser code for CSS-based gradients.

Hello World

Several attempts later at improving the experience and some additional feedback from the team, I finally had something I was excited about. Not only was the UI clean and simple, but it successfully solved the problem. Blend was ready for it's debut.

The plan for it's release wasn't that extravagant. A simple link to Blend on Designer News was all I had really planned for until my Creative Director suggested posting it up on Product Hunt, too. So I did.

Submitting to Product Hunt

As shameful as this may sound, I had actually never used Product Hunt before that day. I had clicked into the site a couple of times and poked around, but never really got too hooked on it. So when it came time to submit Blend, I of course made a mistake while typing the link and what I had actually linked to was a dead-end on my site. Not a good start.

Enter the amazing and incredibly helpful Product Hunt team, in particular, Pierrick Turelier. I had sent a frantic email explaining that I was trying to update my product's link and was having trouble getting it done. Pierrick quickly responded and had updated the link to direct users to the correct page.

With a working link and a couple of additional screenshots (thanks to Pierrick), Blend was queued up to make a big impact on the Product Hunt community.

The Results

There wasn't much that could prepare me for the exposure Blend had received within the first 24 hours of being shared. Within the first day of posting Blend, I had received almost 11,000 page views. Within the week, the page views had reached 35,000. Of those page views, 26,000 were unique visitors.

Blend spent the whole day at the top spot on Designer News, as well as the number three spot on Product Hunt. When all was said-and-done, Blend had received over 600 upvotes on Product Hunt and 50 upvotes on Designer News. The feedback was extremely positive with a lot of fantastic suggestions, that, when completed (soon) and released, will push Blend even further towards being the go-to tool for generating beautiful CSS3 gradients for designers and developers.

Twitter Love

These are some of my favorite tweets about Blend:

What I've Learned

There have been a lot of things that I've learned from working on Blend. However, the biggest takeaway that I've gotten out of this experience has been that focusing on the people who will gain the most from the products I make must always remain at top of the priority list. A beautiful UI, a simple experience and a great product are all very important to the success of the things you want to make, but without considering the people you are making those things for, you'll find that it is difficult getting people on board with what you're trying to accomplish.

For that, I would like to express a very resounding thank you to all of those who have embraced Blend and have made it a part of their regular routine when designing the future of the web. You can look forward to some very exciting new features that should make Blend an even more powerful tool very soon!


Get in touch to say hello, talk about design or whatever you want!