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

  • 5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

  • WordPress-Style Comment Controls Using MooTools or jQuery

    WordPress has a nice little effect on the Admin Dashboard where it shows and hides the comment control links when you mouseover and mouseout of the record's container. Here's how to achieve that effect using MooTools or jQuery. The XHTML Notice that we place the links into...


  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!