On: 2006/02/02 Viewed: 41169 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.


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.

50 Blablas

    Pages: [5] 4 3 2 1 » Show All

  1. 50
    Mike United States »
    commented, on 18/Feb/10 at 5:54 pm # :

    Any example of handling non-square image using this function? I have a rounded corner image and would like to use this function to get the gradient effect. Thanks.

  2. 49
    Matt Motherway United States »
    wrote, on 19/Dec/09 at 3:17 am # :

    Ah, jumped the gun.

    just needed to add these to the fill method:

    imagealphablending($im, false);
    imagesavealpha($im, true);

    Works like a charm!

  3. 48
    Matt Motherway United States »
    commented, on 19/Dec/09 at 3:08 am # :

    Ozh-

    Great piece of code. Anyway you can post a fix to get transparency? I thought I could just change imagecolorallocate to imagecolorallocatealpha and pass 0-127, but it's not working. I know it's in truecolor mode and I can generate transparent PNGs with imagefill.

    Any ideas? Thanks!

  4. 47
    Philip Great Britain (UK) »
    said, on 01/Dec/09 at 2:22 am # :

    I may be the last one to the party, but boy, am I enjoying myself! Fantastic class, and to mirror the comments above, written in '06 and going strong in '09.

    Any chance for the updated code guys?

    thx

  5. 46
    Stefan Germany »
    thought, on 20/Oct/09 at 7:05 pm # :

    Is there a chance to get the class with the transparency option?

    This could help me very much.

    Thank you very much in advance.

    Best Regards

    Stefan

  6. 45
    Marcus Vinicius e Sá Brazil »
    replied, on 09/Oct/09 at 4:35 pm # :

    Amendment to work on my server,
    because of the "Notice - undefined variable.

    line 190

    / / Marcus Alteracao
    $ r = isset ($ r)? $ r: NULL;
    $ g = isset ($ g)? $ g: NULL;
    $ b = isset ($ b)? $ b: NULL;

    Congratulations for the class and initiative.

    Marcus Sá
    Brazil

  7. 44
    Mike United States »
    wrote, on 25/Sep/09 at 8:08 pm # :

    Ok, the refactoring to add the ability to use "transparent" as the starting or ending color is done.

    Ozh, I'll email you the revised code for review and posting.

  8. 43
    Mike United States »
    replied, on 23/Sep/09 at 12:58 am # :

    Great tool!

    A transparency option would be nice though. I'm still new at php scripting, but shouldn't it be possible to pass a special value for the either of the color codes (start color or end color) so that the functions recogize that value as indicating "transparent"?

    For example, instead of using #ff0000 and #0000ff to fade from red to blue, you could use #ff0000 and "transparent" to fade from red to transparent. The color values would have to be checked for the "transparent" value some time before the call to hex2rgb. Also, the fill function would have to be modified accordingly.

  9. 42
    James Stansfield Canada »
    commented, on 13/Aug/09 at 3:24 pm # :

    Nicely done. However, I removed the $this->display from the class constructor so that I can choose to grab the image $obj->image; instead for further processing.

    Very nice function, written in '06, still standing in '09.

  10. 41
    Ozh France »
    replied, on 04/Aug/09 at 5:32 pm # :

    nico » You're right about the alt stuff. Fixed!

Pages: [5] 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