Linear Gradient

Linear Gradient that works with Tamagui style props.

import { XStack } from 'tamagui'
import { LinearGradient } from 'tamagui/linear-gradient'
export function LinearGradientDemo() {
return (
<XStack space>
{/* tokens */}
<LinearGradient width="$6" height="$6" borderRadius="$4" colors={['$red10', '$yellow10']} start={[0, 1]} end={[0, 0]} />
{/* theme values */}
<LinearGradient width="$6" height="$6" borderRadius="$4" colors={['$background', '$color']} start={[1, 1]} end={[0, 0]} />


  • Works on native and web.

  • Accepts Tamagui style props and theme colors.

  • Bundles easily with webpack.


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

yarn add @tamagui/linear-gradient

To use this package you'll need to add expo-linear-gradient to your app. This works with vanilla React Native  or Expo.


Because LinearGradient requires a more complex to install native package, we've left it out of the tamagui export until Metro supports async import. Import it either separately or using the path /linear-gradient:

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, that places expo-linear-gradient inside it set to absoluteFill.

API Reference


See the expo docs  for more complete information.

LinearGradient extends YStack, inheriting Stack props and therefore the Tamagui standard props, plus:


  • colors (required)


    Two or more colors.

  • locations

    number[] | null


    [0.0, 1.0]

    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.

  • start

    LinearGradientPoint | null


    { x: 0.5, y: 0.0 }

    For example, { x: 0.1, y: 0.2 } means that the gradient will start 10% from the left and 20% from the top.

  • end

    LinearGradientPoint | null


    { x: 0.5, y: 1.0 }

    For example, { x: 0.1, y: 0.2 } means that the gradient will end 10% from the left and 20% from the bottom.

  • Previous