Generate Gradient

Generate Gradient creates a new image without requiring an input file. Supply one or more colors, choose a gradient type, and set the output dimensions and format.

Inputs

Input	Type	Required	Description
Width	Positive number	Yes	Output width in pixels. Defaults to `800`.
Height	Positive number	Yes	Output height in pixels. Defaults to `600`.
Type	`linear` or `radial`	Yes	Gradient geometry. Defaults to `linear`.
Angle	Number	For linear gradients	Direction from `0` to `360` degrees. Defaults to `0`.
Color Stops	List of strings	Yes	One or more colors. Two entries are shown by default.
Format	`png`, `jpeg`, or `webp`	Yes	Output encoding. Defaults to `png`.

Color stops are placed at even intervals. With three colors, for example, they appear at 0%, 50%, and 100%. A single color produces a solid fill rather than a gradient. Use CSS-compatible color strings such as #ff006e. Linear angles are normalized to one full rotation before rendering. Angle is hidden for a radial gradient, which is centered in the image.

Output

Output	Type	Description
Gradient Image	File	The generated image, named `gradient-{type}-{width}x{height}.{format}`.

JPEG and WebP are encoded at quality 90. PNG uses its normal lossless encoding.

Example: make a three-color background

Set the size to 1600 by 900, choose linear, set Angle to 135, and add these color stops in order:

#111827
#4f46e5
#ec4899

The colors are spaced evenly from the first edge of the gradient to the last.

Overview

Fundamentals

Web, Files & Data

AI

Scraping & Rendering

Google Workspace

Email, CRM & Scheduling

Databases & Tables

Microsoft

Inputs

Output

Example: make a three-color background

​Inputs

​Output

​Example: make a three-color background

Inputs

Output

Example: make a three-color background