Penpot plugins API
    Preparing search index...

    Type Alias Gradient

    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 Gradient = {
        type: "linear" | "radial";
        startX: number;
        startY: number;
        endX: number;
        endY: number;
        width: number;
        stops: { color: string; opacity?: number; offset: number }[];
    }
    Index

    Properties

    type startX startY endX endY width stops

    Properties

    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.
    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.

    Settings

    Member Visibility

    On This Page

    Properties