Create Vertical and Horizontal Gradients in PHP

PHP GD Image Functions are a great way to customize images, add copyright information, add text, resize and a lot of other functions. But what I’ve noticed a lot is people using flat colors for the images they create. Now, I know “Flat Design” is in, but some gradient is nice. I figured most people don’t want to try to setup gradients or think it is too difficult.

I’m going to share some code I wrote recently for a website on how to create gradients in PHP using the normal GD Image functions. The function uses HTML Hex Codes for the color values and then converts them over to an array that has the RGB values. It’s a lot easier to just pass a 6 character string instead of 2 arrays as parameters for a function.

So without further ado, below I have 3 sets of code to help get you started. The first set of code is the full function that you can just copy and paste into your image library.

<?php
	/*
	bool image_gradientrect(resource $image, int $x1, int $y1, int $x2, int $y2, string $HexColorCodeStart, string $HexColorCodeEnd);
	*/
	function image_gradientrect($img,$x,$y,$x1,$y1,$start,$end) {
		if($x > $x1 || $y > $y1) {
			return false;
		}
		$s = array(
			hexdec(substr($start,0,2)),
			hexdec(substr($start,2,2)),
			hexdec(substr($start,4,2))
		);
		$e = array(
			hexdec(substr($end,0,2)),
			hexdec(substr($end,2,2)),
			hexdec(substr($end,4,2))
		);
		$steps = $y1 - $y;
		for($i = 0; $i < $steps; $i++) {
			$r = $s[0] - ((($s[0]-$e[0])/$steps)*$i);
			$g = $s[1] - ((($s[1]-$e[1])/$steps)*$i);
			$b = $s[2] - ((($s[2]-$e[2])/$steps)*$i);
			$color = imagecolorallocate($img,$r,$g,$b);
			imagefilledrectangle($img,$x,$y+$i,$x1,$y+$i+1,$color);
		}
		return true;
	}

This will create a simple vertical linear gradient between the two colors. The process in which this works is fairly simple, but I will explain it below.

1. Check if Rectangle Positions are positive values.
2. Convert the End and Start hex color codes to a RGB array.
3. Figure the amount of steps for the gradient. Just the End Y minus the Starting Y positions.
4. We loop through each row for the set Y positions.
5. We convert the RGB arrays to the new color for that row in the gradient. We grab the single Color (red for instance). And then we minus that red value (0-255) against the starting red minus the ending red color. That value is then divided by the steps multipied by the row we are currently on. A simple expression for this is $red - ( ( ( $red - $red2) / $steps ) * $position).
6. We do the color conversion for the red, green, and blue values.
7. We draw a single height rectangle for that row using the color we created, and then loop again.

Horizontal Gradient

Doing the same thing but horizontal is really simple, you just need to modify the $steps variable and the imagefilledrectangle function.

$steps = $x1 - $x;
imagefilledrectangle($img,$x+$i,$y,$x1+$i+1,$y1,$color);

<?php
	/* Include the above function here */

	$imgWidth = 300;
	$imgHeight = 150;
	$img = imagecreatetruecolor($imgWidth,$imgHeight);

	image_gradientrect($img,0,0,$imgWidth,$imgHeight,'ff0000','0000ff');
	/* Show In Browser as Image */
	header('Content-Type: image/png');
	imagepng($img);

	/* Save as a File */
	imagepng($img,'save.png');

	/* Some Cleanup */
	imagedestroy($img);

Now if you run this program through a terminal or open it in a web browser (depending on what code you decide to use) you should see a red to blue gradient either vertical or horizontal.