Skip to main content
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:
NameTypeDescription
colorsstring[]Colors to distribute between start and end
positionsnumber[]Optional relative positions of colors (0-1). Must match the length of colors
modeTileModeHow to handle areas outside the gradient: clamp, repeat, mirror, or decal (default: clamp)
flagsnumberSet to 1 to interpolate colors in premultiplied space (default: 0)
transformTransform2dTransform to apply to the gradient (see transformations)

​
Linear Gradient

Creates a gradient that transitions colors linearly between two points.

​
Props

NameTypeDescription
startPointStarting position of the gradient
endPointEnding 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

NameTypeDescription
cPointCenter point of the gradient
rnumberRadius 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

NameTypeDescription
cPointCenter of the gradient
startnumberOptional start angle in degrees (default: 0)
endnumberOptional 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

NameTypeDescription
startPointCenter of the start circle
startRnumberRadius of the start circle
endPointCenter of the end circle
endRnumberRadius 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

Build docs developers (and LLMs) love

Get started for freeTalk to us