Build gradient types

Choose gradient geometry from how the value should move: along an axis, away from a center, or around a center. Stop colors and interpolation control the color path; geometry controls where that path appears.

Create a linear gradient

Use Gradient::linear() with an angle and two or more colors when evenly distributed stops are sufficient:

use PhpColor\Color\Gradient\Gradient;

$gradient = Gradient::linear(
    135.0,
    '#667eea',
    '#764ba2',
    '#f093fb',
);

echo $gradient->toCss();

The angle is expressed in degrees. PHPColor assigns the three implicit stops to 0.0, 0.5, and 1.0, then emits a linear-gradient(...) CSS function. With no colors, Gradient::linear() returns a GradientBuilder instead of a finished gradient.

Use the builder when the construction reads more clearly as a sequence:

use PhpColor\Color\Gradient\Gradient;

$gradient = Gradient::linear(135.0)
    ->from('#667eea')
    ->via('#764ba2')
    ->to('#f093fb')
    ->build();

from(), via(), and to() place stops at 0.0, 0.5, and 1.0. build() returns the corresponding gradient object.

Create radial gradients

The radial builder controls shape, size, and center:

use PhpColor\Color\Gradient\Gradient;
use PhpColor\Color\Gradient\RadialSize;

$gradient = Gradient::radial()
    ->circle()
    ->size(RadialSize::ClosestSide)
    ->at('top left')
    ->from('#ffffff')
    ->to('#2563eb')
    ->build();

echo $gradient->toCss();

The default radial configuration is an ellipse sized to the farthest corner and positioned at the center. circle() selects a circle. shape() also accepts RadialShape::Circle, RadialShape::Ellipse, 'circle', or 'ellipse'.

size() accepts RadialSize or a string. The enum contains ClosestSide, FarthestSide, ClosestCorner, and FarthestCorner. The builder passes string values through to CSS output, so prefer the enum for the four supported keywords.

For a centered gradient with default geometry and implicit stops, the shorter facade call is sufficient:

use PhpColor\Color\Gradient\Gradient;

$gradient = Gradient::radial('#ffffff', '#2563eb');

Create conic gradients

A conic gradient rotates colors around a center point:

use PhpColor\Color\Gradient\Gradient;

$gradient = Gradient::conic(45.0)
    ->at('center')
    ->stops('#ef4444', '#eab308', '#22c55e', '#3b82f6')
    ->build();

echo $gradient->toCss();

The angle is the starting angle in degrees. The default is 0.0, and the default position is center. As with the other builders, stops() evenly distributes plain color arguments from the start to the end.

Keep geometry and color interpolation separate

Changing a radial size or conic starting angle does not change the interpolation space. Use the builder's in() method to select Oklab or linear-light sRGB for sampled colors.

PHPColor serializes gradient values; it does not inspect the rendered box, browser support, banding, or contrast of text placed over the gradient. Verify the CSS in its actual component dimensions.

Continue with Interpolate and sample gradients, Build and sample gradients, or the gradient classes in API Reference.