Gradient Shaders

Creating linear, radial, sweep, and conical gradients in React Native Skia

Gradient shaders allow you to create smooth color transitions. React Native Skia supports four types of gradients: linear, radial, sweep, and two-point conical gradients.

Common Properties

All gradient components share these common properties:

Name	Type	Description
colors	string[]	Colors to distribute between start and end
positions	number[]	Optional relative positions of colors (0-1). Must match the length of colors
mode	TileMode	How to handle areas outside the gradient: clamp, repeat, mirror, or decal (default: clamp)
flags	number	Set to 1 to interpolate colors in premultiplied space (default: 0)
transform	Transform2d	Transform to apply to the gradient (see transformations)

Linear Gradient

Creates a gradient that transitions colors linearly between two points.

Props

Name	Type	Description
start	Point	Starting position of the gradient
end	Point	Ending position of the gradient

Example

import { Canvas, Rect, LinearGradient, vec } from "@shopify/react-native-skia";

const LinearGradientDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={256} height={256}>
        <LinearGradient
          start={vec(0, 0)}
          end={vec(256, 256)}
          colors={["blue", "yellow"]}
        />
      </Rect>
    </Canvas>
  );
};

With Custom Positions

import { Canvas, Rect, LinearGradient, vec } from "@shopify/react-native-skia";

const CustomPositions = () => (
  <Canvas style={{ flex: 1 }}>
    <Rect x={0} y={0} width={256} height={256}>
      <LinearGradient
        start={vec(0, 0)}
        end={vec(256, 0)}
        colors={["red", "yellow", "green"]}
        positions={[0, 0.3, 1]}
      />
    </Rect>
  </Canvas>
);

Radial Gradient

Creates a circular gradient radiating from a center point.

Props

Name	Type	Description
c	Point	Center point of the gradient
r	number	Radius of the gradient

Example

import { Canvas, Rect, RadialGradient, vec } from "@shopify/react-native-skia";

const RadialGradientDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={256} height={256}>
        <RadialGradient
          c={vec(128, 128)}
          r={128}
          colors={["blue", "yellow"]}
        />
      </Rect>
    </Canvas>
  );
};

Multiple Color Stops

import { Canvas, Circle, RadialGradient, vec } from "@shopify/react-native-skia";

const MultiColorRadial = () => (
  <Canvas style={{ flex: 1 }}>
    <Circle cx={128} cy={128} r={128}>
      <RadialGradient
        c={vec(128, 128)}
        r={128}
        colors={["#fff", "#00f", "#000"]}
        positions={[0, 0.5, 1]}
      />
    </Circle>
  </Canvas>
);

Sweep Gradient

Creates a gradient that sweeps around a center point like the hands of a clock.

Props

Name	Type	Description
c	Point	Center of the gradient
start	number	Optional start angle in degrees (default: 0)
end	number	Optional end angle in degrees (default: 360)

Example

import { Canvas, Rect, SweepGradient, vec } from "@shopify/react-native-skia";

const SweepGradientDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={256} height={256}>
        <SweepGradient
          c={vec(128, 128)}
          colors={["cyan", "magenta", "yellow", "cyan"]}
        />
      </Rect>
    </Canvas>
  );
};

Partial Sweep

import { Canvas, Circle, SweepGradient, vec } from "@shopify/react-native-skia";

const PartialSweep = () => (
  <Canvas style={{ flex: 1 }}>
    <Circle cx={128} cy={128} r={100}>
      <SweepGradient
        c={vec(128, 128)}
        start={0}
        end={180}
        colors={["red", "blue"]}
      />
    </Circle>
  </Canvas>
);

Two-Point Conical Gradient

Creates a gradient between two circles, useful for creating spotlight or cone effects.

Props

Name	Type	Description
start	Point	Center of the start circle
startR	number	Radius of the start circle
end	Point	Center of the end circle
endR	number	Radius of the end circle

Example

import { Canvas, Rect, TwoPointConicalGradient, vec } from "@shopify/react-native-skia";

const TwoPointConicalGradientDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={256} height={256}>
        <TwoPointConicalGradient
          start={vec(128, 128)}
          startR={128}
          end={vec(128, 16)}
          endR={16}
          colors={["blue", "yellow"]}
        />
      </Rect>
    </Canvas>
  );
};

Tile Modes

Control how gradients behave outside their defined bounds:

Clamp (Default)

Extends the edge colors:

<LinearGradient
  start={vec(50, 128)}
  end={vec(206, 128)}
  colors={["red", "blue"]}
  mode="clamp"
/>

Repeat

Repeats the gradient:

<LinearGradient
  start={vec(0, 128)}
  end={vec(64, 128)}
  colors={["red", "blue"]}
  mode="repeat"
/>

Mirror

Mirrors the gradient:

<LinearGradient
  start={vec(0, 128)}
  end={vec(64, 128)}
  colors={["red", "blue"]}
  mode="mirror"
/>

Decal

Draws the gradient only within bounds, transparent elsewhere:

<LinearGradient
  start={vec(50, 128)}
  end={vec(206, 128)}
  colors={["red", "blue"]}
  mode="decal"
/>

Transforming Gradients

Apply transformations to gradients:

import { Canvas, Rect, LinearGradient, vec } from "@shopify/react-native-skia";

const TransformedGradient = () => (
  <Canvas style={{ flex: 1 }}>
    <Rect x={0} y={0} width={256} height={256}>
      <LinearGradient
        start={vec(0, 0)}
        end={vec(256, 0)}
        colors={["red", "blue"]}
        transform={[{ rotate: Math.PI / 4 }]}
      />
    </Rect>
  </Canvas>
);

Color Interpolation

By default, gradients interpolate in unpremultiplied space. Set flags={1} to interpolate in premultiplied space:

<RadialGradient
  c={vec(128, 128)}
  r={128}
  colors={["rgba(255, 0, 0, 1)", "rgba(0, 0, 255, 0)"]}
  flags={1}
/>

Advanced Examples

Rainbow Circle

import { Canvas, Circle, SweepGradient, vec } from "@shopify/react-native-skia";

const Rainbow = () => (
  <Canvas style={{ flex: 1 }}>
    <Circle cx={128} cy={128} r={100}>
      <SweepGradient
        c={vec(128, 128)}
        colors={[
          "red",
          "yellow",
          "green",
          "cyan",
          "blue",
          "magenta",
          "red"
        ]}
      />
    </Circle>
  </Canvas>
);

Metallic Effect

import { Canvas, Rect, LinearGradient, vec } from "@shopify/react-native-skia";

const MetallicEffect = () => (
  <Canvas style={{ flex: 1 }}>
    <Rect x={20} y={20} width={216} height={216}>
      <LinearGradient
        start={vec(0, 0)}
        end={vec(0, 216)}
        colors={[
          "#555",
          "#ddd",
          "#888",
          "#fff",
          "#888",
          "#ddd",
          "#555"
        ]}
        positions={[0, 0.2, 0.4, 0.5, 0.6, 0.8, 1]}
      />
    </Rect>
  </Canvas>
);

Spotlight Effect

import { Canvas, Rect, TwoPointConicalGradient, vec } from "@shopify/react-native-skia";

const Spotlight = () => (
  <Canvas style={{ flex: 1 }}>
    <Rect x={0} y={0} width={256} height={256}>
      <TwoPointConicalGradient
        start={vec(128, 50)}
        startR={10}
        end={vec(128, 200)}
        endR={150}
        colors={["white", "black"]}
      />
    </Rect>
  </Canvas>
);

See Also

• Color Shaders - Solid colors and blending
• Image Shaders - Using images as shaders
• Perlin Noise - Procedural noise shaders
• Transformations - Transform matrices