Create and customize beautiful CSS3 gradients.

UX • Interface Design • Prototyping • Code

Blend is a simple UI for creating beautiful CSS3 gradients. It was built as an alternative solution to the outdated gradient generators currently on the web. Blend allows you to combine any two colors, in any format, to generate a linear or radial gradient.

Condensed Version

Blend is a personal project of mine which 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.

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. I made a quick prototype to determine if it was possible, and once I realized there was an opportunity to create a useful tool that designers and developers would love, I shifted my focus and Blend was born.

Blend v1 was received extremely well by the design and developer communities and exceeded 35,000 page views within the first week, a level of virality I had never experienced before with any of my personal projects. Along with the positive reception of the project, I also received some great feedback which was used to develop the current version, Blend v2.

Uncondensed Version

Blend

Blend is a personal project of mine which 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.

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.

Rapid Feedback

Once I got the prototype up and running with a simple interface to pair, I put Blend in front of my trusty circle of teammates at DigitalOcean and I got my first round of feedback. The results were not great.

  • It wasn't immediately clear what they were supposed to do
  • The interface contained a lot of wasted space
  • The range of colors to choose from was limited
  • Some of the iconography didn't do a good enough job representing the function

The feedback was productive and important, but it meant I had to go back to the drawing board. Several pieces were missing for Blend to be considered a fundamentally sound product that not only looked good and worked well, but that also offered a valuable solution to the common struggle of producing semantic and cross-browser code for CSS-based gradients.

Releasing Blend

After several rounds of iterating on the interface, 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.

Considering this was my first personal product release, there was not too much of a plan for how I would promote Blend. I chose to post it on Designer News as well as Product Hunt and left it at that.

Stats & Results

By the end of the first day, Blend had the #1 spot on Designer News with over 50 upvotes, and was #2 on Product Hunt with over 600 upvotes.

The traffic to the site was unlike anything I had personally ever experienced before. Within the first 24 hours of being shared, Blend had received almost 11,000 page views, and within the week, the page views had reached 35,000.

Twitter Love

Below are some of the notable tweets I received after releasing Blend. Dreamweaver was an especially great one to see considering that was the software I first used to teach myself how to code. It felt sort of like things had come full circle, summed up with a single tweet.

What I've Learned

There are a lot of things that I've learned from working on Blend, but the biggest lesson I've learned is that focusing on your users must always be at top of your priority list. A beautiful UI, a simple experience and a great overall product are all very important to the success of the things you want to make, but the real success is seeing someone get true value out of the work you have done.

Get in touch to say hello!

Made with my