> ## Documentation Index
> Fetch the complete documentation index at: https://learn.workflow.dog/llms.txt
> Use this file to discover all available pages before exploring further.

# Generate Gradient

> Create a linear or radial gradient image from a list of colors.

**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:

```text theme={null}
#111827
#4f46e5
#ec4899
```

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