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


The function is packaged as a PHP class, the code you need is something like :

  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


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


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 :)

Shorter URL

Want to share or tweet this page? Please use this short URL: http://ozh.in/kw


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.

66 Blablas

  1. josep_ssv says:

    Ozh thank for your nice work

    We implemented your code here
    radial gradients in paths for Raphael JS


  2. Charles says:

    We have done a lot of work getting SVG (Vector Graphics) into HTML.

    Me and Josep are trying to integrate your work into http://www.irunmywebsite.com/raphael/SVGTOHTML_LIVE.php

    We are at 0.04 at time of typing this.

    I'm not sure how long this will be useful to us, but it is definitely great you did it.


  3. asd says:

    im using your script in my project thx nice job

  4. nona says:

    thank you very much, it great and helped me very much. What about if i have more than two colores?

  5. nbts says:

    Hi. Can this be modified to have one of the values be transparent so it would start with a color and end with a transparent color.

    I know how to do a transparent png image but I tried to change some of the class code and started getting errors.

    Anyone else tried this mod?

  6. Kyle Mulka says:

    The constructor of this class returns an instance of the class and not the image data. The return statement you have in the constructor doesn't do anything.

  7. Bart says:

    Thanks for this nice script. I have been trying for a while to add some text to the gradient with imagettftext() but I can't get it to work. When I use imagecreatetruecolor() to create the background the picture with text is generated without problems. Does anybody know what I'm doing wrong? Thanks in advance!

  8. Alex says:


    Thanks for this great class!

    I have one question, I'm trying to use it and it works but I want to write a text over the gradient pic, is it possible?

    How can I make this?


  9. Javier says:

    Thank for your nice work!

    I have made another version of this tool with support for multiple colors, you can check this on http://www.digitalestudio.es/programacion/dibujar-degradados-con-php-y-gd/

  10. Victor says:

    Thanks so much for this!
    We're using it to make our charts in pChart (doesn't come native with gradients support, at least not in version 1.x). Took a bit of hacking and modification but I was able to use the meat of your code to adapt it to our charting code.

    Great work!

  11. Cactus says:

    Hello, thanks good work! However the "Class Package" did not work for me. I had to go back to basic functions to be able to mix images with functions like copying the produces resulting filled image into an other image. I had to create the first image with the normal "imagecreatetruecolor" function use your fill function: fill($image1,$direction,$startcolor1,$endcolor1)and copy function (imagecopy)in the same script. So, it worked well.

  12. Rene Koch says:

    Hi, I've used your class to implement cross browser linear-gradient support, see:


  13. James says:

    I tried to use this code but I got errors… The $r,g,b are never initialized so I added:

    //my added code
    $r = 0;
    $g = 0;
    $b = 0;

    for ( $i = 0; $i step ) {
    // old values :
    $old_r=$r; — would give an error on first loop

  14. Sandra says:

    Hello, I have tried many tests, is always wrong.
    Maybe that's a GD obsolete? Mine is
    GD Version: bundled (2.1.0 compatible)
    FreeType Support: 1
    FreeType Linkage: with freetype
    T1Lib Support:
    GIF Read Support: 1
    GIF Create Support: 1
    JPEG Support: 1
    PNG Support: 1
    WBMP Support: 1
    XPM Support: 1
    XBM Support: 1
    JIS-mapped Japanese Font Support:

  15. Aaron Mason says:

    Since your last blog post was Jan 2015, I doubt I'll get an answer, but I'll try anyway. What license is this code under? If it were implemented by a project released under, say, the MIT license, would that project be breaching whatever license this code is released under?

  16. Ozh says:

    It's licensed under the "do what the hell you want to" license (I consider that, since I publish it for anyone to see, it's public domain) but I appreciate your asking :)

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
Gravatars: Curious about the little images next to each commenter's name ? Go to Gravatar and sign for a free account
Spam: Various spam plugins may be activated. I'll put pins in a Voodoo doll if you spam me.