meo-canvas - v8.1.0
    Preparing search index...

    Type Alias Gradient

    Gradient:
        | {
            colors: readonly string[];
            direction: GradientDirection;
            type: "linear"
            | Linear;
        }
        | {
            colors: readonly string[];
            direction?: GradientDirection;
            type: "radial"
            | Radial;
        }
        | {
            at?: { x?: number
            | `${number}%`; y?: number | `${number}%` };
            colors: readonly string[];
            from?: number;
            type: "conic" | Conic;
        }

    A gradient, as a background fill or as the alpha of a Mask.

    Colours are spread evenly from the first to the last; a single colour sits at the midpoint. A radial gradient runs from the node's centre to the corner, so it covers the whole box, and a conic gradient sweeps clockwise from twelve o'clock, as CSS does.

    Type Declaration

    • {
          colors: readonly string[];
          direction: GradientDirection;
          type: "linear" | Linear;
      }
      • colors: readonly string[]

        Stops in order, spread evenly from the first to the last.

      • direction: GradientDirection

        Which way the run goes — a named edge-to-edge direction, or explicit endpoints.

      • type: "linear" | Linear

        A straight run between two points.

    • {
          colors: readonly string[];
          direction?: GradientDirection;
          type: "radial" | Radial;
      }
      • colors: readonly string[]

        Stops in order, from the centre outwards.

      • Optionaldirection?: GradientDirection

        Unused for a radial gradient, which always runs centre to corner.

      • type: "radial" | Radial

        A run outward from the node's centre, reaching the corners.

    • {
          at?: { x?: number | `${number}%`; y?: number | `${number}%` };
          colors: readonly string[];
          from?: number;
          type: "conic" | Conic;
      }
      • Optionalat?: { x?: number | `${number}%`; y?: number | `${number}%` }

        The point the sweep turns about, as a fraction of the box or a percentage of it. CSS at <position>.

        the centre of the box
        • Optionalx?: number | `${number}%`

          Distance from the left edge — 0.25 and '25%' mean the same thing.

        • Optionaly?: number | `${number}%`

          Distance from the top edge.

      • colors: readonly string[]

        Stops in order, spread evenly around the sweep. The first and last meet at the seam.

      • Optionalfrom?: number

        Where the sweep starts, in degrees clockwise from twelve o'clock. CSS from <angle>.

        Degrees.

        0 (twelve o'clock)
      • type: "conic" | Conic

        A sweep around a centre, the stops running clockwise from twelve o'clock.

    Settings
    Member Visibility