# Gradient

The Gradient object.

Example:Applying a linear gradient color containing evenly distributed color stops:

```jsx
// Define two points which we will be using to construct
// the path and to position the gradient color:
var topLeft = view.center - [80, 80];
var bottomRight = view.center + [80, 80];

// Create a rectangle shaped path between
// the topLeft and bottomRight points:
var path = new Path.Rectangle({
    topLeft: topLeft,
    bottomRight: bottomRight,
    // Fill the path with a gradient of three color stops
    // that runs between the two points we defined earlier:
    fillColor: {
        gradient: {
            stops: ['yellow', 'red', 'blue']
        },
        origin: topLeft,
        destination: bottomRight
    }
});
```

Example:Create a circle shaped path at the center of the view, using 40% of the height of the view as its radius and fill it with a radial gradient color:

```jsx
var path = new Path.Circle({
    center: view.center,
    radius: view.bounds.height * 0.4
});

// Fill the path with a radial gradient color with three stops:
// yellow from 0% to 5%, mix between red from 5% to 20%,
// mix between red and black from 20% to 100%:
path.fillColor = {
    gradient: {
        stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
        radial: true
    },
    origin: path.position,
    destination: path.bounds.rightCenter
};
```

## Properties

* `stops`

  The gradient stops on the gradient ramp.

  * Type:
  * Array of `GradientStop` objects
* `radial`

  Specifies whether the gradient is radial or linear.

  * Type:
  * `Boolean`

## Methods

* `clone()`
  * Returns:
  * `Gradient` — a copy of the gradient
* `equals(gradient)`

  Checks whether the gradient is equal to the supplied gradient.

  * Parameters:
  * `gradient:` `Gradient`
  * Returns:
  * `Boolean` — `true` if they are equal, `false` otherwise


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://paperjs.typogram.co/styling/gradient.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.