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

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

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.

63 Blablas

    Pages: « 1 [2] Show All

  1. 51
    josep_ssv Spain »
    said, on 21/Apr/10 at 9:46 pm # :

    Ozh thank for your nice work

    We implemented your code here
    http://irunmywebsite.com
    radial gradients in paths for Raphael JS

    Changes
    http://cloud.github.com/downloads/josepssv/RadialGradientPaths/radialgradient003.txt

  2. 52
    Charles Canada »
    wrote, on 29/Jun/10 at 1:01 am # :

    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.

    Charles

  3. 53
    asd Hungary »
    wrote, on 18/Aug/10 at 1:20 am # :

    im using your script in my project thx nice job

  4. 54
    nona Germany »
    replied, on 28/Aug/10 at 6:58 pm # :

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

  5. 55
    nbts United States »
    replied, on 07/Oct/10 at 2:25 am # :

    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. 56
    Kyle Mulka United States »
    said, on 15/Oct/10 at 10:14 am # :

    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. 57
    Bart Netherlands »
    commented, on 09/Nov/10 at 11:16 pm # :

    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. 58
    Alex France »
    said, on 28/May/11 at 11:19 pm # :

    Hi,

    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?

    Alex.

  9. 59
    Javier Spain »
    replied, on 10/Jun/11 at 2:08 pm # :

    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. 60
    Victor Canada »
    thought, on 09/Nov/11 at 9:38 pm # :

    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. 61
    Cactus France »
    said, on 27/Mar/12 at 11:53 pm # :

    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. 62
    Rene Koch Denmark »
    wrote, on 10/Apr/13 at 4:47 pm # :

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

    https://gist.github.com/renekoch/5354463

  13. 63
    James United States »
    commented, on 22/Oct/13 at 5:37 pm # :

    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
    $old_g=$g;
    $old_b=$b;

Pages: « 1 [2] 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.