Design Ideas Logo
Colorstopper: Designer Gradients

Colorstopper: Designer Gradients

Narciso Carlos Jr
July 15, 2017
No Comments

Colorstopper is a curated library of designer gradients that reference the retro styles of the 80's and 90's. It exists as a free resource of CSS code snippets and a downloadable .Sketch file. Everything is free to use and available at www.colorstopper.com



I had the idea to take iconic movies / posters / comics from the 80's and 90's and distill them down to highly detailed gradients. I wanted to see if I could give a gradient a unique character, almost how a paint swatch or perfume scent can have their own recipe or identity. It was a personal challenge. The result was a fun collection that keeps growing.


The first tool was definitely Google. I searched for tons of references from the 80's and 90's so that I could have a raw collection of color to play with. (Thank you Sorayama, Heavy Metal Magazine, Jean Giraud, Tron, Knighrider, He-Man and company.)

Then, I built a swatch library of all the colors I found from the reference images. With that library in place, I made as many gradients as I could until I came up with a nice amount of designs that felt unique from one another.

After cleaning the suite up a bit, I exported them as CSS code from Sketch app and used http://www.colorzilla.com/gradient-editor/ to make sure it was clean code and would work cross-browser. After the cleaning, I made a quick website to house them as well as Sketch file version.





Response has been very positive. I was featured on a few Sketch app resource communities like www.sketchappsources.com (3k views + 600 downloads thank you.)

Response has also been funny, because it's an odd project. People would say "Cool but what the heck do I use it for?" ?

Head over to the site and grab yourself some free downloads. And don't be afraid to make weird stuff ?

Narciso Carlos Jr

I am a UX / UI Designer & Digital Art Director living in Los Angeles.

Leave a Reply

Your email address will not be published. Required fields are marked *