New to Kendo UI for Vue? Start a free 30-day trial

RadialGradient

A radial color gradient.

options RadialGradientOptions

The configuration of this radial gradient.

stops GradientStop[]

The color stops of the gradient.

Constructors

RadialGradient (options?: RadialGradientOptions)

Creates a new radial color gradient instance.

Parameters

options? RadialGradientOptions

The configuration of this radial 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.

center

Gets the center point of the gradient.

Returns

Point - The current radius of the gradient.

center

Sets the center 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

center Point | number[]

The center point of the gradient.

radius

Gets the radius of the gradient.

Returns

number - The current radius of the gradient.

radius

Sets the radius of the gradient.

Parameters

radius number

The new radius of the gradient.

removeStop

Removes a color stop from the gradient.

Parameters

stop GradientStop

The gradient color stop to remove.