LinearGradient

The LinearGradient component creates smooth color transitions between two points in a straight line.

Basic Usage

import { LinearGradient } from 'react-native-nitro-gradients';

function MyComponent() {
  return (
    <LinearGradient
      colors={['#0f172a', '#155e75', '#67e8f9']}
      start={{ x: 0, y: 0 }}
      end={{ x: '100%', y: '100%' }}
      style={{ width: 280, height: 280, borderRadius: 24 }}
    />
  );
}

Props

Prop	Type	Required	Default	Description
colors	ColorValue[]	✅	-	Array of colors for the gradient
start	Vector	❌	{ x: '0%', y: '0%' }	Start point of the gradient, ignored when angle is provided
end	Vector	❌	{ x: '100%', y: '0%' }	End point of the gradient, ignored when angle is provided
angle	number	❌	-	Angle in degrees. When provided, overrides start and end
positions	number[]	❌	Uniform from start to end	Optional array of color positions in the range 0..1
blur	number	❌	0	Gaussian blur radius in pixels applied to the rendered gradient
tileMode	TileMode	❌	"clamp"	Controls gradient edge behavior: "clamp" extends edge colors, "decal" uses transparent

Simple examples

Multi-color gradient with positions

<LinearGradient
  colors={['#1e1b4b', '#7e22ce', '#f0abfc', '#fdf4ff']}
  positions={[0, 0.35, 0.7, 1]}
  start={{ x: 0, y: 0 }}
  end={{ x: '100%', y: '100%' }}
  style={{ width: 360, height: 120, borderRadius: 20 }}
/>

Horizontal gradient

<LinearGradient
  colors={['#fde68a', '#f472b6']}
  start={{ x: 0, y: 0 }}
  end={{ x: '100%', y: 0 }}
  style={{ width: 320, height: 80, borderRadius: 16 }}
/>

Vertical gradient

<LinearGradient
  colors={['#064e3b', '#6ee7b7']}
  start={{ x: 0, y: 0 }}
  end={{ x: 0, y: '100%' }}
  style={{ width: 140, height: 240, borderRadius: 20 }}
/>

Responsive positioning

Percentage-based coordinates

<LinearGradient
  colors={['#312e81', '#818cf8']}
  start={{ x: '20%', y: '30%' }}
  end={{ x: '80%', y: '70%' }}
  style={{ width: 240, height: 240, borderRadius: 24 }}
/>

Explicit dimension control

<LinearGradient
  colors={['#831843', '#fda4af']}
  start={{ x: '25h%', y: '25w%' }}
  end={{ x: '75h%', y: '75w%' }}
  style={{ width: 220, height: 320, borderRadius: 24 }}
/>

Angle-based gradients

Instead of specifying start and end, use angle to define direction directly.

• 0° points right.
• 90° points down.
• 180° points left.
• 270° points up.

When angle is provided, the library computes the correct start and end for you.

<LinearGradient
  colors={['#f59e0b', '#ef4444', '#8b5cf6']}
  angle={45}
  style={{ width: 240, height: 240, borderRadius: 24 }}
/>

Blur

Use blur when you want the gradient to feel more atmospheric and less geometric.

<LinearGradient
  colors={['#b95a33', '#d99f63', '#7cab90']}
  angle={132}
  blur={18}
  style={{ width: 340, height: 220, borderRadius: 28 }}
/>

Demos

Satin Ember

<LinearGradient
  colors={['#b95a33', '#d99f63', '#f4e6c8', '#7cab90']}
  angle={132}
  blur={18}
  style={{ width: 340, height: 220, borderRadius: 28 }}
/>

Tide Fold

<LinearGradient
  colors={['#102034', '#1d4b63', '#4f8d92', '#c9ece0']}
  start={{ x: '0%', y: '18%' }}
  end={{ x: '100%', y: '82%' }}
  blur={14}
  style={{ width: 340, height: 220, borderRadius: 28 }}
/>