New to Kendo UI for VueStart a free 30-day trial

LinearGradient

Represents a linear color gradient (see example).

NameTypeDefaultDescription

options

GradientOptions

The configuration of this linear gradient.

stops

GradientStop[]

The color stops of the gradient.

Constructors

LinearGradient

(options?: GradientOptions)

Creates a new linear gradient.

Parameters

options?

GradientOptions

The configuration of this linear gradient.

Methods

addStop

Adds a color stop to the gradient.

The color can be in any of the following formats:

| Format | Description | --- | --- | --- | red | The basic or extended CSS color name | #ff0000 | The Hex RGB value | rgb(255, 0, 0) | The RGB value

Specifying 'none', 'transparent', or ' ' (an empty string) clears the fill.

Parameters

offset

number

The stop offset from the start of the element. Ranges from zero (the start of the gradient) to one (the end of the gradient).

color

string

The color of the stop.

opacity

number

The fill opacity. Ranges from zero (completely transparent) to one (completely opaque).

Returns

GradientStop

  • The new gradient color stop.

end

Gets the end point of the gradient.

Returns

Point

  • The current end point of the gradient.

end

Sets the end point of the gradient. The end point of the gradient. Coordinates are relative to the shape bounding box. For example, [0, 0] is top left and [1, 1] is bottom right.

Parameters

end

number[] | Point

The end point of the gradient.

removeStop

Removes a color stop from the gradient.

Parameters

stop

GradientStop

The gradient color stop to remove.

start

Gets the start point of the gradient.

Returns

Point

  • The current start point of the gradient.

start

Sets the start point of the gradient. The start point of the gradient. Coordinates are relative to the shape bounding box. For example, [0, 0] is top left and [1, 1] is bottom right.

Parameters

start

number[] | Point

The end point of the gradient.

In this article
ConstructorsLinearGradientMethods
Not finding the help you need?
Contact Support