# GradientStop

The GradientStop object.

## Constructors

* `GradientStop([color[, offset]])`

  Creates a GradientStop object.

  * Parameters:
  * `color:` `Color` — the color of the stop — optional, default: `new Color(0, 0, 0)`
  * `offset:` `Number` — the position of the stop on the gradient ramp as a value between `0` and `1`; `null` or `undefined` for automatic assignment. — optional, default: `null`
  * Returns:
  * `GradientStop`

## Properties

* `offset`

  The ramp-point of the gradient stop as a value between `0` and `1`.

  * Type:
  * `Number`

  Example:Animating a gradient's ramp points:

  ```jsx
  // 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:
  var path = new Path.Circle({
      center: view.center,
      radius: view.bounds.height * 0.4
  });

  path.fillColor = {
      gradient: {
          stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
          radial: true
      },
      origin: path.position,
      destination: path.bounds.rightCenter
  };

  var gradient = path.fillColor.gradient;

  // This function is called each frame of the animation:
  function onFrame(event) {
      var blackStop = gradient.stops[2];
      // Animate the offset between 0.7 and 0.9:
      blackStop.offset = Math.sin(event.time * 5) * 0.1 + 0.8;

      // Animate the offset between 0.2 and 0.4
      var redStop = gradient.stops[1];
      redStop.offset = Math.sin(event.time * 3) * 0.1 + 0.3;
  }
  ```
* `color`

  The color of the gradient stop.

  * Type:
  * `Color`

  Example:Animating a gradient's ramp points:

  ```jsx
  // 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:
  var path = new Path.Circle({
      center: view.center,
      radius: view.bounds.height * 0.4
  });

  path.fillColor = {
      gradient: {
          stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]],
          radial: true
      },
      origin: path.position,
      destination: path.bounds.rightCenter
  };

  var redStop = path.fillColor.gradient.stops[1];
  var blackStop = path.fillColor.gradient.stops[2];

  // This function is called each frame of the animation:
  function onFrame(event) {
      // Animate the offset between 0.7 and 0.9:
      blackStop.offset = Math.sin(event.time * 5) * 0.1 + 0.8;

      // Animate the offset between 0.2 and 0.4
      redStop.offset = Math.sin(event.time * 3) * 0.1 + 0.3;
  }
  ```

## Methods

* `clone()`
  * Returns:
  * `GradientStop` — a copy of the gradient-stop


---

# 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/gradientstop.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.