On: 2006/02/02 Viewed: 33914 times
Shorter URL for this page: http://ozh.in/kw

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 :

PHP:
  1. require_once('/path/to/gd-gradient-fill.php');
  2. $image = new gd_gradient_fill($width,$height,$direction,$startcolor,$endcolor,$step);

The class call needs 5 arguments and accepts an optional 6th :

  1. integer $width
    Width of the image
  2. integer $height
    Height of the image
  3. string $direction
    The shape or direction of the gradient, which can be any of : vertical, horizontal, ellipse, ellipse2, circle, circle2, rectangle, diamond.
  4. string $startcolor
    Gradient start color, 3 or 6 digit hexadecimal ("#ff0" or "#dd4578")
  5. string $endcolor
    Gradient end color
  6. 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.

Gradient Fill : Vertical Gradient Fill : Horizontal Fill Gradient Fill : Ellipse Gradient Fill : Rectangle Gradient Fill : Diamond

Of course, the function handles non-square images just fine as well.

Get the function

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

Metastuff

This page "PHP and GD : Emulate Gradient Fill" was posted on 02/02/2006 at 6:37 pm
Watch this discussion : Comments RSS 2.0. You can trackback this post from your own site

38 Blablas

    Pages: [4] 3 2 1 » Show All

  1. 38
    fabian Great Britain (UK) »
    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

  2. 37
    TH Viet Nam »
    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?

  3. 36
    Antnee Europe »
    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.

  4. 35
    Woudloper Netherlands »
    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.

  5. 34
    JohnEke Canada »
    commented, on 25/Nov/08 at 9:46 pm # :

    Testing it on my site... great job!

  6. 33
    Tutorial: Webdesign mit GIMP, HTML &... Germany »
    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 [...]

  7. 32
    Remon Lammers Italy »
    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.

  8. 31
    Foomagoo United States »
    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?

Pages: [4] 3 2 1 » Show All

Leave a Reply

Comment Guidelines or Die

  • HTML: You can use these tags: <a href=""> <em> <i> <b> <strong> <blockquote>
  • Posting code: Post raw code (no <> &lt; etc) within appropriate tags : [php][/php], [css][/css], [html][/html], [js][/js], [sql][/sql], [xml][/xml], or generic [code][code]
  • Gravatars: Curious about the little images next to each commenter's name ? Go to Gravatar.
  • Spam: Various spam plugins on patrol. I'll put pins in a Voodoo doll if you spam me.
  • I will mark as Spam test comments, all comments with SEO names (ie "My Cool Online Shop" instead of "Joe") or containing forum-like signatures.

Close
E-mail It