Gradient PNG data URI maker reference

As I mentioned when I posted the new version of my AppEngine application, I also added a new feature to the application. When I was implementing the comment bubbles, I learned about data URIs (or data: URIs). Data URI is a Uniform Resource Identifier. URLs are URIs, too, only data URIs do not contain address to the data, but instead the data itself. For example, small images! Data URIs are supported by all major browsers and by Internet Explorer version 8 and higher.

Read more, blog article: Data URIs explained.
Convert any data to data URI: The data: URI kitchen.

I implemented the button gradient for IE9 using gradient PNG data URI. I made the PNG with GIMP, saved without any extra data, run "base64 gradient.png", added "data:image/png;base64," in front of the output and there was my data URI for CSS. Still, quite a lot of work, for example if you change colors, you have to do this all over again. I tried to find a tool to automate this, but did not find, so I implemented it in my Google AppEngine application.

The gradient tool uses url parameters, although I have also made a front end tool for it. Url parameters work like this:

http://avafavico.appspot.com/?c1=C1C1C1&c2=C2C2C2&h=H&w=W

C1C1C1 is top color (or left color in horizontal gradient), 000000-FFFFFF
C2C2C2 is bottom color (or right color in horizontal gradient), 000000-FFFFFF
H is gradient image height, integer 1-4096
W is gradient image width, integer 1-4096

Example: http://avafavico.appspot.com/?c1=ff0000&c2=0000ff&h=10&w=30
Gradient:
Data URI: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAKCAYAAACjd+4vAAAABHNCSVQICAgIfAhkiAAAACVJREFUOI1j/M/A8P8HAyfDdwYOBnrSTAwDBEYtHrV41OKhbzEAzUMfE4HBrHkAAAAASUVORK5CYII=

Usually either H or W is 1 to optimize png size, and image is repeated to make it fill the whole background of an element, in the example h=10 so the image can be seen better, but in production version you would use h=1. H x W cannot be more than 4096, but this should be sufficient.

You don't and cannot embed the call to gradient tool into your template or page. Instead, you use the tool, get the data URI and put that in your template/page.

→ Easy to use front end for gradient tool ←