Here is a small PHP function I wrote that emulates a gradient fill of an image.
Disclaimer : there are probably existing alternatives or classes, maybe in PEAR. I didn't check. I wanted to write a function myself, as part of my GD training grounds.
Usage
The function is packaged as a PHP class, the code you need is something like :
- require_once('/path/to/gd-gradient-fill.php');
- $image = new gd_gradient_fill($width,$height,$direction,$startcolor,$endcolor,$step);
The class call needs 5 arguments and accepts an optional 6th :
- integer $width
Width of the image - integer $height
Height of the image - string $direction
The shape or direction of the gradient, which can be any of : vertical, horizontal, ellipse, ellipse2, circle, circle2, rectangle, diamond. - string $startcolor
Gradient start color, 3 or 6 digit hexadecimal ("#ff0" or "#dd4578") - string $endcolor
Gradient end color - Optional : $step
Breaks the gradient smooth blending
Results
Here are a few examples of gradients from color #101040 to #a1a1ff. Hover the image for some unnecessary explanation.
Of course, the function handles non-square images just fine as well.
Get the function
- gd-gradient-fill.txt (download and save as .php)
- gd-gradient-fill.php (highlighted code, copy and paste in a blank file, but do not download as is)
Credits
I started from file header-img.php, part of WordPress core file, which contains a similar hack to draw a gradient fill from lines. I believe this smart code is from Andy Skelton.
If you happen to use this function in any project, be sure to let me know. This makes my day :)
Shorter URL
Want to share or tweet this page? Please use this short URL: http://ozh.in/kw
Ozh thank for your nice work
We implemented your code here
http://irunmywebsite.com
radial gradients in paths for Raphael JS
Changes
http://cloud.github.com/downloads/josepssv/RadialGradientPaths/radialgradient003.txt
We have done a lot of work getting SVG (Vector Graphics) into HTML.
Me and Josep are trying to integrate your work into http://www.irunmywebsite.com/raphael/SVGTOHTML_LIVE.php
We are at 0.04 at time of typing this.
I'm not sure how long this will be useful to us, but it is definitely great you did it.
Charles
im using your script in my project thx nice job
thank you very much, it great and helped me very much. What about if i have more than two colores?
Hi. Can this be modified to have one of the values be transparent so it would start with a color and end with a transparent color.
I know how to do a transparent png image but I tried to change some of the class code and started getting errors.
Anyone else tried this mod?
The constructor of this class returns an instance of the class and not the image data. The return statement you have in the constructor doesn't do anything.
Thanks for this nice script. I have been trying for a while to add some text to the gradient with imagettftext() but I can't get it to work. When I use imagecreatetruecolor() to create the background the picture with text is generated without problems. Does anybody know what I'm doing wrong? Thanks in advance!
Hi,
Thanks for this great class!
I have one question, I'm trying to use it and it works but I want to write a text over the gradient pic, is it possible?
How can I make this?
Alex.
Thank for your nice work!
I have made another version of this tool with support for multiple colors, you can check this on http://www.digitalestudio.es/programacion/dibujar-degradados-con-php-y-gd/
Thanks so much for this!
We're using it to make our charts in pChart (doesn't come native with gradients support, at least not in version 1.x). Took a bit of hacking and modification but I was able to use the meat of your code to adapt it to our charting code.
Great work!
Hello, thanks good work! However the "Class Package" did not work for me. I had to go back to basic functions to be able to mix images with functions like copying the produces resulting filled image into an other image. I had to create the first image with the normal "imagecreatetruecolor" function use your fill function: fill($image1,$direction,$startcolor1,$endcolor1)and copy function (imagecopy)in the same script. So, it worked well.
Hi, I've used your class to implement cross browser linear-gradient support, see:
https://gist.github.com/renekoch/5354463
I tried to use this code but I got errors… The $r,g,b are never initialized so I added:
//my added code
$r = 0;
$g = 0;
$b = 0;
for ( $i = 0; $i step ) {
// old values :
$old_r=$r; — would give an error on first loop
$old_g=$g;
$old_b=$b;
Hello, I have tried many tests, is always wrong.
Maybe that's a GD obsolete? Mine is
GD Version: bundled (2.1.0 compatible)
FreeType Support: 1
FreeType Linkage: with freetype
T1Lib Support:
GIF Read Support: 1
GIF Create Support: 1
JPEG Support: 1
PNG Support: 1
WBMP Support: 1
XPM Support: 1
XBM Support: 1
JIS-mapped Japanese Font Support:
Greetings
Sandra
Italy
Since your last blog post was Jan 2015, I doubt I'll get an answer, but I'll try anyway. What license is this code under? If it were implemented by a project released under, say, the MIT license, would that project be breaching whatever license this code is released under?
It's licensed under the "do what the hell you want to" license (I consider that, since I publish it for anyone to see, it's public domain) but I appreciate your asking :)