Type Alias Gradient

Gradient: {
    type: "linear" | "radial";
    startX: number;
    startY: number;
    endX: number;
    endY: number;
    width: number;
    stops: {
        color: string;
        opacity?: number;
        offset: number;
    }[];
}

Represents a gradient configuration in Penpot. A gradient can be either linear or radial and includes properties to define its shape, position, and color stops.

Type declaration

type: "linear" | "radial"
Specifies the type of gradient.
- 'linear': A gradient that transitions colors along a straight line.
- 'radial': A gradient that transitions colors radiating outward from a central point.
Example
```
const gradient: Gradient = { type: 'linear', startX: 0, startY: 0, endX: 100, endY: 100, width: 100, stops: [{ color: '#FF5733', offset: 0 }] };
```
startX: number
The X-coordinate of the starting point of the gradient.
startY: number
The Y-coordinate of the starting point of the gradient.
endX: number
The X-coordinate of the ending point of the gradient.
endY: number
The Y-coordinate of the ending point of the gradient.
width: number
The width of the gradient. For radial gradients, this could be interpreted as the radius.
stops: {
    color: string;
    opacity?: number;
    offset: number;
}[]
An array of color stops that define the gradient.

Type Alias Gradient

Type declaration

type: "linear" | "radial"

Example

startX: number

startY: number

endX: number

endY: number

width: number

stops: { color: string; opacity?: number; offset: number; }[]

Settings

stops: {
color: string;
opacity?: number;
offset: number;
}[]