Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Read in a gradient from a png file and spit out CSS for it
Branch: master
Pull request Compare This branch is 2 commits ahead, 5 commits behind bluesmoon:master.

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.

pngtocss takes in a png file with a gradient in it and spits out the necessary CSS to draw that gradient.

It only works with:

  • 24 bit PNGs
  • only linear gradients
  • horizontal gradients
  • vertical gradients
  • diagonal gradients
  • multi-colour support only for horizontal and vertical

It does not support:

  • radial gradients
  • angular gradients (except for perfect diagonal)
  • more than 2 colours on diagonal gradients
  • alpha transparency


See the examples/ directory for all the pngs that I've tested this with. Feel free to submit your own (keep them small).

See the src/ directory for the source code.

It's written in C, and uses libpng and zlib. You'll need both of those to compile it. Also, I wrote it on Mac OS X where the deps are included out of the box. You may need to play with the Makefile if you're using a different OS. Sorry, I don't have the time to test, but if you submit a pull request, I'll merge it.


BSD Licensed


2011 Philip Tellis -- --


Everything I know about reading a PNG I got from Chapter 13 of the libpng book:

The CSS gradient syntax came from these wonderful sites:


Nicole tweeted about the absence of a tool to convert images to gradients:

Screenshot of Nicole's tweet

I realised that I knew neither what CSS gradients were, nor how to read a PNG file, so figured that this was a good opportunity to learn both at once. I decided to write it in C because I hadn't written C code in a very long time.

Patches welcome.

Things I learnt

  • The average of two colours will be closer to one than to the other.


Talk about pngtocss on the discussion page

Something went wrong with that request. Please try again.