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 :)
Related posts
Shorter URL
Want to share or tweet this page? Please use this short URL: http://ozh.in/kw
Pages: [4] 3 2 1 » Show All
said, on 21/Jun/09 at 9:54 pm # :
It is something to do with the fact it creates the image and not returns the image
said, on 19/Jun/09 at 11:29 am # :
Nice! ...but, much more better if the script has the ability to draw gradients on a background image :)
Do you have plan to add this feature to your script in future?
replied, on 14/Apr/09 at 1:51 pm # :
This is brilliant, thanks. I've embedded this in to a website where users can change the colour-scheme, but parts are gradient images, and I had to provide a selection before.
Now I have users set their own. I create and save the gradients however, and delete any that don't exist in the database, rather than create them every time.
wrote, on 26/Nov/08 at 12:23 am # :
Great stuff you have created and I want to use it for an additional Kubrick version of a WordPress thema or has someone else already did something like this?
Would it also be possible to add support for diagonally gradient fill from either topleft to rightbottom or vice versa? Or aren't you doing anything more with this code? I also took a look at the PEAR Image package which also contains gradient fill, but the main disadvantage I found of PEAR is that is to large and it is not being maintained since 2006.
commented, on 25/Nov/08 at 9:46 pm # :
Testing it on my site... great job!
pingback on 16/Nov/08 at 7:16 pm # :
[...] der Code zum generieren des Farbverlaufs enthalten. Benutzt wird die Klasse gradient.class.php von Planet OZH. Diese erzeugt den passenden Farbverlauf und muss dazu wieder in das selbe Verzeichnis gedownloaded [...]
wrote, on 13/Nov/08 at 1:36 pm # :
Hi,
Thanks for this. I think I will use it as a plugin to render text fills in my Dynamic Text Replacement (DTR) script called True Font Family. The upcoming version will allow user plugins and effects. Already made the normal gradient fills myself, but these circle, rectangle and diamond look real nice also!
Cheers and thanks for this.
said, on 11/Nov/08 at 9:58 pm # :
I'm trying to use this class for generating an image background but I'm unable to write text into the image when this generates the background. Any idea why?