Treehouse

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 https://github.com/bluesmoon/pngtocss.git

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

#output:
.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!

ydkjs-3.png

Recent Features

  • Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?...

  • Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

  • Downloadify:  Client-Side File Generation Using JavaScript and Flash

    The following tools is in its very beta stages and works intermittently. Its so damn useful that I had to show it off now though! I recently stumbled upon Downloadify, a client-side file generation tool based on JavaScript and Flash ActionScript code. A...

  • LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Discussion

  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:

      http://www.colorzilla.com/gradient-editor/

  2. Typo spotted: make pngtocss

  3. http://gradient-scanner.com/ 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: http://paulirish.com/i/a400.png

    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!