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
commented, on 13/Sep/07 at 8:16 pm # :
Tiziano » this is a pure CSS issue. Something like the following would work:
Where image.php would be the file that generates your gradient.
Orlando » this requires PHP extension GD, which you probably don't have on your server then.
replied, on 15/Sep/07 at 6:17 pm # :
hi,
I've been testing your script for a while and am also using in some of my work, but during testing with ellipse and cirle it seems that ellipse is the same as circle2 and circle2 is the same as ellipse..
Is this just me?
Thanks
replied, on 21/Oct/07 at 5:51 am # :
hi,
how do i stretch a gradient image to fill up the entire screen to use as background color. Like one whole ellipse filling the entire screen. Great code indeed!
replied, on 07/Feb/08 at 7:22 pm # :
I used it in my site :)
I used to use a static gradient, now I use your script, that either draws the static gradient, or uses the gradient stored in a cookie.
thought, on 04/Apr/08 at 1:19 am # :
This is great, thanks so much! works like a new million dollar bill.
replied, on 27/Jun/08 at 10:13 pm # :
hello, does anyone know how to get a vertical gradient that fades from color to transparant? i can't get it to work :(
replied, on 21/Jul/08 at 11:51 pm # :
Amazing job, this is GD at its best!