Skip to content
Read in a gradient from a png file and spit out CSS for it
C Makefile
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
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

You can’t perform that action at this time.