{"id":472,"date":"2006-02-02T18:37:59","date_gmt":"2006-02-02T16:37:59","guid":{"rendered":"http:\/\/frenchfragfactory.net\/ozh\/my-projects\/images-php-gd-gradient-fill\/"},"modified":"2009-08-04T17:32:19","modified_gmt":"2009-08-04T15:32:19","slug":"images-php-gd-gradient-fill","status":"publish","type":"page","link":"https:\/\/planetozh.com\/blog\/my-projects\/images-php-gd-gradient-fill\/","title":{"rendered":"PHP and GD : Emulate Gradient Fill"},"content":{"rendered":"

Here is a small PHP function I wrote that emulates a gradient fill of an image.
\nDisclaimer<\/em> : 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.<\/p>\n

Usage<\/h2>\n

The function is packaged as a PHP class, the code you need is something like :<\/p>\n

\n\n\t\t
\n\n\t\t
\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t
php<\/div>\n\n\t\t\n\t\t
\n\n\t<\/div>\n\t\n\t
\n\t\t
  1. require_once<\/span>(<\/span>'\/path\/to\/gd-gradient-fill.php'<\/span>)<\/span>;<\/span> <\/div><\/li>\n
  2. $image<\/span> =<\/span> new<\/span> gd_gradient_fill(<\/span>$width<\/span>,<\/span>$height<\/span>,<\/span>$direction<\/span>,<\/span>$startcolor<\/span>,<\/span>$endcolor<\/span>,<\/span>$step<\/span>)<\/span>;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n

    The class call needs 5 arguments and accepts an optional 6th :<\/p>\n

      \n
    1. integer $width<\/strong>
      \nWidth of the image<\/li>\n
    2. integer $height<\/strong>
      \nHeight of the image<\/li>\n
    3. string $direction<\/strong>
      \nThe shape or direction of the gradient, which can be any of : vertical, horizontal, ellipse, ellipse2, circle, circle2, rectangle, diamond.<\/li>\n
    4. string $startcolor<\/strong>
      \nGradient start color, 3 or 6 digit hexadecimal ("#ff0" or "#dd4578")<\/li>\n
    5. string $endcolor<\/strong>
      \nGradient end color<\/li>\n
    6. Optional : $step<\/strong>
      \nBreaks the gradient smooth blending<\/li>\n<\/ol>\n

      Results<\/h2>\n

      Here are a few examples of gradients from color #101040 to #a1a1ff. Hover the image for some unnecessary explanation.<\/p>\n


      <\/p>\n

      Of course, the function handles non-square images just fine as well.<\/p>\n

      Get the function<\/h2>\n