O'Reilly

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!

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!

    My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...

  • Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() – this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

  • Create a Quick MooTools Slideshow with Preloading Images

    I've been creating a lot of slideshow posts lately. Why, you ask? Because they help me get chicks. A quick formula for you: The following code snippet will show you how to create a simple slideshow with MooTools; the script will also...

  • Digg-Style Dynamic Share Widget Using MooTools

    I've always seen Digg as a very progressive website. Digg uses experimental, ajaxified methods for comments and mission-critical functions. One nice touch Digg has added to their website is their hover share widget. Here's how to implement that functionality on your site...

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!

Recently on David Walsh Blog

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • Create an Image Preview from a Video

    Visuals are everything when it comes to media.  When I'm trying to decide whether to watch a video on Netflix, it would be awesome to see a trailer of some kind, but alas that isn't available.  When I'm looking to download a video on my computer,...

  • New:  Webdesigner News!

    A new and exciting website has recently been launched for web designers and developers. You likely spend hours every morning browsing through hundreds of posts on your RSS feeds, hoping to stumble across relevant stories. Webdesigner News was built to provide web designers and developers with...