Read in a gradient from a png file and spit out CSS for it
C Makefile
Switch branches/tags
Nothing to show
Latest commit 3509711 Oct 14, 2016 @bluesmoon committed on GitHub Merge pull request #15 from derekcecillewis/add-alpha-support
Remove portfile
Failed to load latest commit information.
examples add support for alpha transparency Feb 14, 2016
src make the exit status portable Mar 3, 2016 Add support for alpha channel Oct 13, 2016
tweet.png skitch no longer exists May 12, 2015

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


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 1.6.25 and zlib 1.2.8. You'll need both of those to compile it. Also, I wrote it on MacOSX, so I installed the libraries using ports. 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