RadialGradient
Radial gradient radiating from a center point
Radial gradient radiating from a center point
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colorA | color | #ff0000 | The starting color at the center of the gradient |
| colorB | color | #0000ff | The ending color at the edge of the gradient |
| center | position | {"x":0.5,"y":0.5} | The center point of the radial gradient |
| radius | range | 1 | The radius of the gradient (normalized, 0.0-1.0) |
| repeat | range | 1 | Number of times the gradient repeats. Values above 1 create concentric rings. |
| aspect | range | 1 | Stretches the gradient into an ellipse. Values below 1 compress vertically, above 1 compress horizontally. |
| skewAngle | range | 0 | Rotates the ellipse axis in degrees. Only visible when Aspect is not 1. |
| colorSpace | "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch" | linear | Color space for color interpolation |
Usage
vue
<Shader>
<RadialGradient
:radius="1"
/>
</Shader>