Documentation

GuidesComponents

RadialGradient

Radial gradient radiating from a center point

Props

colorAstring
Default:#ff0000
The starting color at the center of the gradient
colorBstring
Default:#0000ff
The ending color at the edge of the gradient
center{x: number, y: number}
Default:{"x":0.5,"y":0.5}
The center point of the radial gradient
radiusnumber
Default:1
The radius of the gradient (normalized, 0.0-1.0)
repeatnumber
Default:1
Number of times the gradient repeats. Values above 1 create concentric rings.
aspectnumber
Default:1
Stretches the gradient into an ellipse. Values below 1 compress vertically, above 1 compress horizontally.
skewAnglenumber
Default:0
Rotates the ellipse axis in degrees. Only visible when Aspect is not 1.
colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
Default:linear
Color space for color interpolation

Usage

<Shader>
  <RadialGradient
    radius={1}
  />
</Shader>
Previous
ProgressiveBlur
Next
RectangularCoordinates