RadialGradient

The RadialGradient component creates circular gradients that radiate from a center point.

Basic Usage

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

function MyComponent() {
  return (
    <RadialGradient
      colors={['#fde68a', '#f472b6', '#312e81']}
      center={{ x: '50%', y: '50%' }}
      radius={'60%'}
      style={{ width: 280, height: 280, borderRadius: 24 }}
    />
  );
}

Props

Prop	Type	Required	Default	Description
colors	ColorValue[]	✅	-	Array of colors for the gradient
center	Vector	❌	{ x: '50%', y: '50%' }	Center point of the gradient
radius	RadiusValue	❌	'50%'	Radius of the gradient
positions	number[]	❌	Uniform from center to radius	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

Color positioning

<RadialGradient
  colors={['#fef3c7', '#f97316', '#9a3412', '#1c1917']}
  positions={[0, 0.3, 0.65, 1]}
  radius={'55%'}
  style={{ width: 300, height: 300, borderRadius: 24 }}
/>

Radius control

Absolute radius

<RadialGradient
  colors={['#e0f2fe', '#0284c7']}
  center={{ x: '50%', y: '50%' }}
  radius={150}
  style={{ width: 300, height: 300, borderRadius: 24 }}
/>

Responsive radius

<RadialGradient
  colors={['#fae8ff', '#a855f7']}
  radius={'60w%'}
  style={{ width: 240, height: 240, borderRadius: 24 }}
/>

Center positioning

Centered gradient

<RadialGradient
  colors={['#ecfdf5', '#059669', '#022c22']}
  center={{ x: '50%', y: '50%' }}
  radius={'50%'}
  style={{ width: 260, height: 260, borderRadius: 24 }}
/>

Off-center gradient

<RadialGradient
  colors={['#fef9c3', '#f43f5e', '#4c0519']}
  center={{ x: '25%', y: '30%' }}
  radius={'70%'}
  style={{ width: 300, height: 300, borderRadius: 24 }}
/>

Blur

Blur is useful for halos, glows, and soft background panels.

<RadialGradient
  colors={['#ffe7a3', '#ff7a86', '#2e1b47']}
  positions={[0, 0.32, 1]}
  center={{ x: '35%', y: '30%' }}
  radius={'72%'}
  blur={10}
  style={{ width: 340, height: 260, borderRadius: 28 }}
/>

Demo

Rose Halo

<RadialGradient
  colors={['#f8ddb1', '#da748d', '#472345']}
  positions={[0, 0.34, 1]}
  center={{ x: '35%', y: '28%' }}
  radius={'72%'}
  blur={10}
  style={{ width: 340, height: 260, borderRadius: 28 }}
/>