---
title: Linear Gradient
description: Linear gradients that work with Tamagui style props
name: linear-gradient
component: LinearGradient
package: linear-gradient
demoName: LinearGradient
---

<HeroContainer>
  <LinearGradientDemo />
</HeroContainer>

```tsx hero template=LinearGradient

```

<Highlights
  features={[
    'Works on native and web.',
    'Accepts Tamagui style props and theme colors.',
    'Bundles easily with webpack.',
  ]}
/>

## Installation

LinearGradient is already installed in `tamagui`, or you can install it independently:

```bash
npm install @tamagui/linear-gradient
```

### Native Setup

On native, LinearGradient uses `expo-linear-gradient` for rendering. This works with vanilla React Native or Expo.

#### Step 1: Install expo-linear-gradient

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

#### Step 2: Import the setup module

In your app's entry file (index.js or App.tsx), before any Tamagui imports:

```tsx
import '@tamagui/native/setup-expo-linear-gradient'
```

That's it! LinearGradient will automatically detect and use expo-linear-gradient when available.

#### Without expo-linear-gradient

If you don't set up expo-linear-gradient, LinearGradient will log a warning on native. On web, LinearGradient uses CSS gradients and doesn't require any additional setup.

## Usage

Because LinearGradient requires a native package, it is not included in the main `tamagui` export. Import it either separately or using the path `/linear-gradient`:

```tsx
import { LinearGradient } from '@tamagui/linear-gradient'
import { LinearGradient } from 'tamagui/linear-gradient'
```

LinearGradient is a YStack that accepts all Tamagui style props as well as theme colors. It places `expo-linear-gradient` inside set to `absoluteFill`.

## API Reference

### LinearGradient

See the [expo docs](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) for more complete information.

#### Alternative: backgroundImage style prop

For most gradients, use the [`backgroundImage` style prop](/docs/intro/styles#backgroundimage):

```tsx
<View backgroundImage="linear-gradient(to bottom, $background, $color)" />
```

Use `<LinearGradient>` for precise color stop control.

---

LinearGradient extends YStack, inheriting [Stack props](/docs/components/stacks) and therefore the [Tamagui standard props](/docs/intro/props), plus:

<PropsTable
  data={[
    {
      name: 'colors',
      required: true,
      type: 'string[]',
      description: `Two or more colors.`,
    },
    {
      name: 'locations',
      required: false,
      type: 'number[] | null',
      description: `An array that contains numbers ranging from 0 to 1, inclusive, and is the same length as the colors property. Each number indicates a color-stop location where each respective color should be located.`,
      default: '[0.0, 1.0]',
    },
    {
      name: 'start',
      required: false,
      type: 'LinearGradientPoint | null',
      default: '{ x: 0.5, y: 0.0 }',
      description: `For example, { x: 0.1, y: 0.2 } means that the gradient will start 10% from the left and 20% from the top.`,
    },
    {
      name: 'end',
      required: false,
      type: 'LinearGradientPoint | null',
      default: '{ x: 0.5, y: 1.0 }',
      description: `For example, { x: 0.1, y: 0.2 } means that the gradient will end 10% from the left and 20% from the bottom.`,
    },
  ]}
/>