<!--
{
  "availability" : [
    "MapKit JS: 5.45.0 -"
  ],
  "documentType" : "symbol",
  "framework" : "MapKitJS",
  "identifier" : "/documentation/MapKitJS/LineGradient/LineGradientConstructor",
  "metadataVersion" : "0.1.0",
  "role" : "Constructor",
  "symbol" : {
    "kind" : "Constructor",
    "modules" : [
      "MapKit JS"
    ],
    "preciseIdentifier" : "instctr/mapkit.LineGradient/LineGradientConstructor"
  },
  "title" : "new LineGradient(colorStops)"
}
-->

# new LineGradient(colorStops)

Creates a style that renders a gradient along the length of a line.

```
constructor(colorStops?: Record<number, string>);
```

## Parameters

`options`

A JavaScript object with unit distance values as keys with matched CSS colors.

## Discussion

The unit distance keys must be a number between `0` and `1`. A value of `0` represents the beginning of the polyline and a value of `1` represents the end. The associated values are CSS colors.

The following example creates a new gradient that progresses from `blue` at the start of the line to `red` at the end:

```javascript
overlay.style.lineGradient = new mapkit.LineGradient({
    0: "blue",
    1: "red"
});
```

If the start or end of the line doesn’t have a defined color, the gradient uses the style’s [`strokeColor`](/documentation/MapKitJS/Style/strokeColor) as a default.

You can extend gradients programatically with [`addColorStop(offset, color)`](/documentation/MapKitJS/LineGradient/addColorStop) and [`addColorStopAtIndex(index, color)`](/documentation/MapKitJS/LineGradient/addColorStopAtIndex).

---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)