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-2.png

Recent Features

  • Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • CSS Circles

    A while back I shared a clever technique for creating triangles with only CSS. Over the past year, I've found CSS triangles incredibly effective, especially when looking to create tooltips or design elements with a likewise pointer pattern. There's another common shape...

  • dwImageProtector Plugin for jQuery

    I've always been curious about the jQuery JavaScript library. jQuery has captured the hearts of web designers and developers everywhere and I've always wondered why. I've been told it's easy, which is probably why designers were so quick to adopt it NOT that designers...

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!