Gradient text fill using GD - PHP

Question

I need a function that renders gradient on a text using GD

something like

function gradientText($text,$font,$color1,$color2)
{
    ..
}

score 1 · Accepted Answer · answered May 19 '14 at 14:44

I suggest you try to build that function based your own needs. You will want to center the text vertically/horizontal, change font size, etc...

Start on this function by Christopher Kramer, code is also below this answer...

http://www.php.net/manual/en/function.imagefill.php#93920

then you can use imagettfbbox if you want to use custom font files. http://www.php.net/manual/en/function.imagettfbbox.php

Here is a sample image I generated using those 2 functions. Sample generated image

Pasting Chris' code of gradient here for reference:

<?php

function gradient($w=100, $h=100, $c=array('#FFFFFF','#FF0000','#00FF00','#0000FF'), $hex=true) {

 /*
 Generates a gradient image

 Author: Christopher Kramer

 Parameters:
 w: width in px
 h: height in px
 c: color-array with 4 elements:
    $c[0]:   top left color
    $c[1]:   top right color
    $c[2]:   bottom left color
    $c[3]:   bottom right color

 if $hex is true (default), colors are hex-strings like '#FFFFFF' (NOT '#FFF')
 if $hex is false, a color is an array of 3 elements which are the rgb-values, e.g.:
 $c[0]=array(0,255,255);

 */

 $im=imagecreatetruecolor($w,$h);

 if($hex) {  // convert hex-values to rgb
  for($i=0;$i<=3;$i++) { 
   $c[$i]=hex2rgb($c[$i]);
  }
 }

 $rgb=$c[0]; // start with top left color
 for($x=0;$x<=$w;$x++) { // loop columns
  for($y=0;$y<=$h;$y++) { // loop rows
   // set pixel color 
   $col=imagecolorallocate($im,$rgb[0],$rgb[1],$rgb[2]);
   imagesetpixel($im,$x-1,$y-1,$col);
   // calculate new color  
   for($i=0;$i<=2;$i++) {
    $rgb[$i]=
      $c[0][$i]*(($w-$x)*($h-$y)/($w*$h)) +
      $c[1][$i]*($x     *($h-$y)/($w*$h)) +
      $c[2][$i]*(($w-$x)*$y     /($w*$h)) +
      $c[3][$i]*($x     *$y     /($w*$h));
   }
  }
 }
 return $im;
}

function hex2rgb($hex)
 {
 $rgb[0]=hexdec(substr($hex,1,2));
 $rgb[1]=hexdec(substr($hex,3,2));
 $rgb[2]=hexdec(substr($hex,5,2));
 return($rgb);
 }

// usage example

$image=gradient(300, 300, array('#000000', '#FFFFFF', '#FF0000', '#0000FF'));

header('Content-type: image/png');
imagepng($image);
imagedestroy($image);

score 0 · Answer 2 · answered Sep 07 '13 at 15:34

Using GD

http://planetozh.com/blog/my-projects/images-php-gd-gradient-fill/ offers a class to create a gradient with GD.

Gradient can be linear (horizontal or vertical), radial, rectangle, diamond. That's the same options you would find on Adobe Photoshop.

The class methods fill rectangular areas with a gradient, so you could achieve a rather great gradient effect with the following method:

create a gradient rectangle with this class
write your text in the specified font
mix them:
1. you could cut the gradient picture with the shape of the text picture
2. you could apply the gradient picture as a pattern for the text picture

Using ImageMagick

Instead to use GD, I would use ImageMagick.

See http://www.imagemagick.org/Usage/fonts/#gradient for a sample of how to use ImageMagick to achieve that, and http://www.imagemagick.org/Usage/canvas/#gradient for all the gradients options.

Gradient text fill using GD - PHP

2 Answers2