---
title: new LineGradient(colorStops)
framework: mapkitjs
role: symbol
role_heading: Constructor
path: mapkitjs/linegradient/linegradientconstructor
---

# new LineGradient(colorStops)

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

## Declaration

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

## Parameters

- `options`: A JavaScript object with unit distance values as keys with matched CSS colors.

## Discussion

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: 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 as a default. You can extend gradients programatically with addColorStop(offset, color) and addColorStopAtIndex(index, color).

## See Also

### Creating a Line Gradient

- [addColorStop(offset, color)](mapkitjs/linegradient/addcolorstop.md)
- [addColorStopAtIndex(index, color)](mapkitjs/linegradient/addcolorstopatindex.md)