I've browsed around and can't find what I'm looking for. I am experienced in Photoshop and Illustrator both to a certain degree, but would prefer something in Illustrator (scaling vector image).

How do you go about designing and creating such a smooth gradient as in the following image? Are there any tools or methods for helping with color selection? Also, the subtle "blocking" or "sectioning" throughout where there a little slice of similar, but different colors? Just looking for an overall methodology in the design and creation of these commonly popular designs.

Bonus: Anyone seen any HTML5- or CSS-only implementations?

Thanks as always, geniuses!

Example smooth gradient.

  • 1
    I would recommend you look into the Crystallize and Mosaic filters in photoshop, located under Filters -> Pixelate
    – Hanna
    May 10, 2015 at 21:11
  • @Johannes, that is a fantastic solution that I never even thought of attempting. Thanks. May 10, 2015 at 21:14

3 Answers 3


1. Draw a gradient.

enter image description here

2. Convert it to a smart object.

3. Apply FilterPixelateCrystallise.

enter image description here

4. Add a Gradient Map adjustment layer on top

enter image description here

5. You can now adjust the Crystallise values, if you’d like.

enter image description here

Sure, it’s not using HTML or CSS, but the technique does use a gradient map. Gradient maps are the best.

enter image description here

Please note that this example could have been built many ways. It could have just been a bitmap layer with a gradient, then the filter applied. That would give the same result, but not allow for easy editing later. The gradient map was used for precise control and flexibility.


I ran across this resource: http://williamngan.github.io/kubist/ It's a web app that generates cubist-like artwork in SVG format. Reading the creator's "How it works" article is also quite fascinating. While this is not a direct answer to your question, it does provide some ideas on how to accomplish the smooth "mosaic"-like gradient effect you're looking for. And,as the Kubist web app demonstrates, it can be done in HTML with the use of SVG graphics.


I've used an app called Dmesh http://dmesh.thedofl.com/ for creating very custom triangulation gradients and images. Its a free app for windows and mac (and iphone). Launch the app and drag and drop any image onto it and wherever you click it will form a vertices. You can then export the final image as a SVG and open it up in illustrator for further editing. Great tool!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.