PHP Gradient

The Gradient package can be used as an intermediate representation of an RGB color gradient.
It means that you can use it as an in-between state when you convert a concreate gradient implementation to another.

Gradient can be also used as a standalone class for working with color gradients in PHP.
It has a very useful getColorAt method to calculate the RGB values at any given point on the gradient.

You can read the full souce of this page in demo.php, click here to visit the repository.

You can click this label to toggle show hide all details .

Basic usage

You can create a new black to white gradient like this:

$grad = new Gradient();
$grad->addStop(0, 0, 0, 0);
$grad->addStop(255, 255, 255, 100);

Then use the getColorAt method to retrieve colors from any location on the gradient:

This feature lets you build simple utilities, like generating darker/lighter variations of colors.
Here's an example using Bootstrap's palette:

$grad = new Gradient();
$grad->addStop(0, 0, 0, 0);         // Black
$grad->addStop(0, 123, 255, 50);    // Bootstrap PRIMARY color
$grad->addStop(255, 255, 255, 100); // White

$grad = new Gradient();
$grad->addStop(0, 0, 0, 0);         // Black
$grad->addStop(40, 167, 69, 50);    // Bootstrap SUCCESS color
$grad->addStop(255, 255, 255, 100); // White

$grad = new Gradient();
$grad->addStop(0, 0, 0, 0);         // Black
$grad->addStop(220, 53, 69, 50);    // Bootstrap DANGER color
$grad->addStop(255, 255, 255, 100); // White

$grad = new Gradient();
$grad->addStop(0, 0, 0, 0);         // Black
$grad->addStop(255, 193, 7, 50);    // Bootstrap WARNING color
$grad->addStop(255, 255, 255, 100); // White

So far so good, but how are we going to actually render a gradient? Just read on...

Css renderer

Rendering a gradient is very simple, just choose one of the bundled renderer classes like CssGradientRenderer, and use it like this:

<?php

$grad = new Gradient();
$grad->addStop(131, 58, 180, 0);
$grad->addStop(253, 29, 29, 50);
$grad->addStop(253, 252, 176, 100);

$render = new CssGradientRenderer($grad);

?>

<div style="width:100%;height:50px;background:<?= $render ?>"></div>
<pre><?= $render ?></pre>

This outputs something similar:

linear-gradient(90deg, rgb(131, 58, 180) 0%, rgb(253, 29, 29) 50%, rgb(253, 252, 176) 100%)

CssGradientRenderer has a setDirection method, you can use this, well, to set the direction of the gradient.
Assuming the gradient is the same as in the previous example, the render will look like this after calling $render->setDirection(45):

(Note that the div was resized to a square, so it's easier to see the direction)

linear-gradient(45deg, rgb(131, 58, 180) 0%, rgb(253, 29, 29) 50%, rgb(253, 252, 176) 100%)

Image renderer

ImageGradientRender has two additional methods, setSize (default is 100x100) and setFormat (default is png).
Let's see the previous example using this renderer:

<?php

$grad = new Gradient();
$grad->addStop(131, 58, 180, 0);
$grad->addStop(253, 29, 29, 50);
$grad->addStop(253, 252, 176, 100);

$render = new ImageGradientRenderer($grad);
$render->setSize(300, 50);

?>

<img src="data:image/png;base64,<?= base64_encode($render) ?>">
<pre><?= substr($render, 0, 20) ?>...</pre>

This outputs the following:

ToggleShowHide example

‰PNG  IHDR ,...

The same image can be rendered in different formats.
This is the output after calling $render->setFormat('gif'):

ToggleShowHide example

GIF87a, 2æ„:¬üŽdü...

Image extractor

An ImageGradientExtractor class is also provided to extract color gradients from images.
In this example we load an image, then pass it to the CSS renderer to replicate the gradient extracted from the image in pure CSS:

$grad   = (new ImageGradientExtractor(__DIR__.'/image1.jpg', 'jpeg'))->extract();
$render = new CssGradientRenderer($grad);

This outputs the following:

ToggleShowHide example

image1.jpg	Source image
	CSS gradient
image2.jpg	Source image
	CSS gradient

If you read images that contain a clear gradient, you're mostly fine with the default settings.

If not, ImageGradientExtractor has a third parameter to set the specific line (Y coordinate) you want to scan while extracting the gradient (you may also set this later by calling setScanPosition).
By default, the middle line of the image is scanned, however you can set it to any positive integer (Y position on the image), or a constant defined by the class.
There is one constant that is particularly interesting, SCAN_AVERAGE, which resamples the image to 1px height (once) and returns the (average) color at the given X from this copy.

Let's see some examples with more sophisticated images, so you can clearly see the differences given by this setting:

ToggleShowHide example

	SCAN_TOP
	SCAN_CENTER (default)
	SCAN_BOTTOM
	SCAN_AVERAGE
	SCAN_TOP
	SCAN_CENTER (default)
	SCAN_BOTTOM
	SCAN_AVERAGE
	SCAN_TOP
	SCAN_CENTER (default)
	SCAN_BOTTOM
	SCAN_AVERAGE

And now, just for fun, let's use setScanPositoin to draw the Mona Lisa to 50 divs filled with linear gradients:

Future plans

I will definetly add more renderers/extractors to the package, as well as simple helper classes to work with gradients.
For now, I'm happy with the results, especially the image-to-css part, as this is what I wanted to achieve in the first place with this project.