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 :)
Pages: [1] 2 » Show All
said, on 07/Jun/06 at 3:09 pm # :
Hi There,
While trying your gradient functions, i noticed that when you render an image wider than 256 pixels, the colors are incorrect.
Try rendering this:
$image = imagecreate(500,100);
gd_gradient_fill($image,'horizontal','#fff','#000');
You'll see it does not end black, but gray.
Could you please help me in finding out why?
Regards,
Sander
commented, on 09/Jun/06 at 12:01 am # :
This is fixed in version 1.1 uploaded today
wrote, on 11/Jul/06 at 10:15 am # :
Will you please tell me how to code a gradient figure with light in the middle and color at the ends (half one type - the other half opposite type). I would appriciate your help. Regards.
wrote, on 17/Jul/06 at 3:31 pm # :
How did you do these corners on this form, this is totally awesome. I'm using your library to create a server side dynamic gradient generator, that I could also adopt to create soft shadows of any color dynamically, on the fly. I plan to implement caching as well.
thought, on 17/Jul/06 at 3:53 pm # :
I'm having a problem, no matter what I do - it comes out as an ellipse. Some type of caching issue?;
$img=imagecreate(100,50);
require_once('gd-gradient-fill.php');
gd_gradient_fill($img,'hoizontal','#fff','#000');
header("Content-type: image/jpeg");
imagejpeg($img);
thought, on 25/Jul/06 at 7:32 am # :
Ozh is offline.. but maybe i can answer some questions ;)
@Sergey Choob: I don't understand that, but try with ellipse and setting well the colors.
@Thomas Devol[1]: it's a propietary addition of mozilla/firefox, that maybe will be implemented later as standard :)
By now: -moz-border-radius: unit; -moz-border-radius-topleft: unit; -moz-border-radius-bottomleft: unit;
and so.
@Thomas Devol[2]: there says "hoizontal". Typo.
said, on 05/Aug/06 at 7:56 pm # :
Hello!
And what about transparency?
How to create .png image with gradient from color to transparency?
replied, on 12/Aug/06 at 9:01 pm # :
I am trying to draw a gradient bar on a bar-graph, and the techniques I've tried so far basically allocate the colours as they draw the bar.
However, I hace found that when the graph requires 2 or more bars, the second stops - investigation suggests that the image simply runs out of colours!
With my limited knowledge of PHP, the class appears to return an image rather than adding to an existing one - so can I use this class to add gradiated bars to my chart, or will it need some alterations to the code?
wrote, on 29/Aug/06 at 7:54 am # :
I modified the last line in the switch cases for circle2 and ellipse in the fill method so
that the gradient fades into transparency. I found it useful. Maybe you will.
$eCol = imagecolorallocate( $im, $r1, $g1, $b1 );
imagecolortransparent($im,$eCol);
imagefill($im, 0, 0, $eCol); // make this transparent
Thanks for the library. It's great!
thought, on 22/Dec/06 at 9:17 pm # :
Instead of tracking colors and dealing with allocation issues, try one of these two options:
$fill = imagecolorresolve( $im, $r, $g, $b );
That one should do the best job of find you your color... but for gradients it may not be good. Instead, this might be best:
$fill = imagecolorexact( $im, $r, $g, $b );
if ($fill === -1){
$fill = imagecolorallocate( $im, $r, $g, $b );
if ($fill === -1){
$fill = imagecolorclosest( $im, $r, $g, $b );
}
}
I use other libraries that do this to excellent effect (GD::Graph in perl for instance).
thought, on 13/Jun/07 at 2:52 pm # :
Hi,
thank you for that class, it works realy great.
I had first the same problem like Thomas Devol posted on July 06, all created pictures comes out as eclipse.
Now I recognize the problem, if you test it you have to
comment the line 48 in the file gd-gradient-fill.php, than it works fine.
Best Regards from Berlin
Willy
said, on 13/Jun/07 at 9:09 pm # :
Willy » well yeah, that line serves as an example :)
replied, on 26/Jun/07 at 8:19 am # :
Hi!
I wanted to make a simple gradient across the top inch or so of my blog, fading from light grey into white. I knew recent versions of WP have a gradient-maker script, so I googled for some information on it. Google, in its infinite wisdom, brought me here instead.
Tada! :)
Thanks so much for the script.
-joe
replied, on 29/Jun/07 at 2:45 pm # :
This module is so cool. But does anyone know how to get it to fill diagonally?
wrote, on 18/Jul/07 at 5:55 pm # :
Rectangle render doesn't work properly. This works better:
imagefilledrectangle ($im, $i, $i*$height/$width, $width-$i+1, $height-($i*$height/$width) + 1, $fill);
line 216
Thanks
Jack
thought, on 25/Jul/07 at 6:26 pm # :
Rectangle render Problem. This works even better:
said, on 30/Aug/07 at 10:55 am # :
Hi Ozh,
Thanks for providing this great class. I find it very helpful to fill an entire image. I am trying to fill a gradient polygon ON an image, like a diagonal banner or a sash for a beauty pageant, done dynamically. For example, to fill within the [code]$coords=array(0, 0, 249, 249, 249,164,85,0);[code] with an image size 250px by 250px. I thought it would be simple to do but after 4 hours my eyes are really heavy.
Thanks.
said, on 30/Aug/07 at 11:03 am # :
Thomas » I guess simplest way of doing so is first generate the gradient image, then merge it with your original image with imagecopymerge
wrote, on 13/Sep/07 at 12:47 am # :
Hi, great piece of code.
I'm trying to use the generated image as a table cell background, but i'm not able to do it.
How can i do it?
Thanks in advance.
commented, on 13/Sep/07 at 6:13 pm # :
Hello Guys I'm kind of new in PHP and I'm just trying to use this library but I get this error
Unable to create an image.
Can you give an idea what it could cause this problem.
THANKS