Convert PNGs to CSS Gradients with pngtocss

By  on  

CSS gradients are a hot topic right now and why shouldn't they be? CSS gradients save time by not making you create an image, they save a request to that image, and the code to create them is smaller than the image's file size.  If you've been using image-based gradients and are looking to move your web apps to CSS-based gradients, there's a great new project aimed at automating PNG gradients into CSS gradients called pngtocss.  pngtocss is easy to obtain, configure, and use!

Download and Configuration

The pngtocss project is hosted on GitHub, for your forking pleasure.  You can go the GitHub and download a zip or simply clone the project to your machine:

git clone

One you've cloned the repo, navigate to the src directory where you'll find a pngtocss.c file, which you'll have to make. Before making pngtocss, you must confirm that your system has the zlib and libpng libraries installed.  I use MacPorts so I typed:

sudo port install zlib

sudo port install libpng

With those two libraries present, I was ready to make:

make pngtocss.c

If everything installed as it should have, you're ready to start converting PNG gradients to CSS gradients!  To convert your PNG gradient images into CSS gradients, run the following command:

#pngtocss {file}
pngtocss mypng.png

.mypng {
	background-image: -moz-linear-gradient(top, #02469a, #bcf3cb);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#02469a), to(#bcf3cb));
	background-image: -webkit-linear-gradient(top, #02469a, #bcf3cb);
	background-image: -o-linear-gradient(top, #02469a, #bcf3cb);
	background-image: linear-gradient(top, #02469a, #bcf3cb);

That's it!  Pretty sweet!  Like any early project, however, pngtocss isn't perfect and it doesn't support radial gradients yet. pngtocss is, however, a promising start and is an excellent utility for helping developers move from images to CSS.  Cheers to Phillip Tellis for creating this awesome utility!

Track.js Error Reporting

Upcoming Events

Recent Features

  • CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • 5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

Incredible Demos


  1. To bad this doesn’t generate IE gradient filters when available. While IE6 is gone, we still have to support IE7, and while it’s not as bad, it still needs some shims.

    Also, is there no online version of this? Whenever I see a tool that I need to use code to use (looking at you, SASS) it always puts me off.

    • I’m not aware of an online tool, but it wouldn’t be hard to create a PHP script to upload the image, run pngtocss, and spit out the gradient.

    • I guess you should get to it, then. : P

    • Raanan Avidor
    • the Colorzilla Ultimate CSS Gradient maker now allows you to upload images and turn into CSS gradients and outputs
      Webkit (old & new), Mozilla, Opera, IE <=9, IE10, & W3C code:

  2. Typo spotted: make pngtocss

  3. is probably cooler.

    You upload a file and it throws it on a canvas. Then you select the range that you want to make into a gradient.

    Then it reads all the pixel data and gives you a chance to tweak the clarity. Then you get your css gradient syntax. Even handles crazy gradients like my plaid shirt:

    Plus the entire thing runs clientside.

    • Wow, that does look pretty sweet. I’ll check that out.

    • That seems very nice, but does it support IE7+ ?

  4. Will give it a try!

  5. Amazing I should definitely try this one, Of course CSS Gradient is IN

  6. Wow, gradient-scanner is impressive. Would work well as a browser plugin too.

  7. do this support IE 8 or 9 …?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!