DiamondGradient
Diamond-shaped gradient radiating from a center point using Manhattan distance
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colorA | color | #4ffb4a | Color at the center of the diamond |
| colorB | color | #4f1238 | Color at the outer edges of the diamond |
| stops | gradient-stops | - | Multi-stop gradient colors (overrides Color A / Color B when set) |
| center | position | {"x":0.5,"y":0.5} | Center point of the diamond |
| size | range | 0.7 | Extent of the gradient — controls how far Color A reaches before transitioning to Color B |
| rotation | range | 0 | Rotation in degrees — tilts the diamond into a rhombus |
| repeat | range | 1 | Number of times the gradient repeats outward. Values above 1 create concentric diamond or square bands. |
| roundness | range | 0 | Morphs from a sharp diamond (0) to a square (1) |
| colorSpace | "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch" | linear | Color space for color interpolation |
Usage
vue
<Shader>
<DiamondGradient />
</Shader>