pixi.js
    Preparing search index...

    Interface LinearGradientOptions

    Options specific to linear gradients. A linear gradient creates a smooth transition between colors along a straight line defined by start and end points.

    interface LinearGradientOptions {
        colorStops?: { color: ColorSource; offset: number }[];
        end?: PointData;
        start?: PointData;
        textureSize?: number;
        textureSpace?: TextureSpace;
        type?: "linear";
        wrapMode?: WRAP_MODE;
    }

    Hierarchy (View Summary)

    Index

    Properties

    colorStops? end? start? textureSize? textureSpace? type? wrapMode?

    Properties

    colorStops?: { color: ColorSource; offset: number }[]

    Array of colors stops to use in the gradient

    end?: PointData

    The end point of the gradient. This point defines where the gradient ends. It is represented as a PointData object containing x and y coordinates. The coordinates are in local space by default (0-1), but can be in global space if specified.

    start?: PointData

    The start point of the gradient. This point defines where the gradient begins. It is represented as a PointData object containing x and y coordinates. The coordinates are in local space by default (0-1), but can be in global space if specified.

    textureSize?: number

    The size of the texture to use for the gradient - this is for advanced usage. The texture size does not need to match the size of the object being drawn. Due to GPU interpolation, gradient textures can be relatively small! Consider using a larger texture size if your gradient has a lot of very tight color steps

    textureSpace?: TextureSpace

    Whether coordinates are 'global' or 'local'

    type?: "linear"

    The type of gradient. Must be 'linear' for linear gradients.

    wrapMode?: WRAP_MODE

    The wrap mode of the gradient. This can be 'clamp-to-edge' or 'repeat'.

    'clamp-to-edge'

    Settings

    Member Visibility

    On This Page

    Properties