# Linear Gradient

Linear Gradient — Legend Motion documentation.

Source: https://legend.so/motion/v2/usage/linear-gradient/

Legend Motion v2 documentation. Current documentation version.

To use Linear Gradients you'll also need to install a `linear-gradient` library. There are different libraries for React Native vs. Expo, so choose the right import for your platform:

## [Installation](https://legend.so/motion/v2/usage/linear-gradient/#installation)

### [React Native](https://legend.so/motion/v2/usage/linear-gradient/#react-native)

```bash
npm install react-native-linear-gradient
```

then import

```js
import { MotionLinearGradient } from "@legendapp/motion/linear-gradient";
```

### [Expo](https://legend.so/motion/v2/usage/linear-gradient/#expo)

```bash
npm install expo-linear-gradient
```

then import

```js
import { MotionLinearGradient } from "@legendapp/motion/linear-gradient-expo";
```

### [React Native Web](https://legend.so/motion/v2/usage/linear-gradient/#react-native-web)

```bash
npm install react-native-web-linear-gradient
```

Alias the package in your webpack config:

```js
resolve: {
    alias: {
        'react-native': 'react-native-web',
        ...
        'react-native-linear-gradient': 'react-native-web-linear-gradient',
    }
}
```

then import

```js
import { MotionLinearGradient } from "@legendapp/motion/linear-gradient";
```

## [Usage](https://legend.so/motion/v2/usage/linear-gradient/#usage)

`MotionLinearGradient` has `colors`, `start`, and `end` props that you can animate.

`locations` is supported as a static prop, but is not animatable. The `LinearGradientProps` and `LinearGradientPoint` types are exported from both `@legendapp/motion/linear-gradient` and `@legendapp/motion/linear-gradient-expo`.

```jsx
<MotionLinearGradient
  animateProps={{
    colors: [value ? "#F81FEC" : "blue", value ? "#59B0F8" : "yellow"],
    start: { x: 0, y: 0 },
    end: { x: value ? 1 : 0, y: 1 },
  }}
/>
```

[View Markdown](https://legend.so/motion/v2/usage/linear-gradient.md)[Report a documentation correction](https://github.com/LegendApp/legend-docs/issues/new?title=Docs%3A+Linear+Gradient&body=Page%3A+https%3A%2F%2Flegend.so%2Fmotion%2Fv2%2Fusage%2Flinear-gradient%0A%0AWhat+is+incorrect+or+missing%3F%0A%0AExpected+behavior+or+supporting+source%3A%0A)