Documentation

GuidesComponents

DiamondGradient

Diamond-shaped gradient radiating from a center point using Manhattan distance

Props

colorAstring
Default:#4ffb4a
Color at the center of the diamond
colorBstring
Default:#4f1238
Color at the outer edges of the diamond
center{x: number, y: number}
Default:{"x":0.5,"y":0.5}
Center point of the diamond
sizenumber
Default:0.7
Extent of the gradient — controls how far Color A reaches before transitioning to Color B
rotationnumber
Default:0
Rotation in degrees — tilts the diamond into a rhombus
repeatnumber
Default:1
Number of times the gradient repeats outward. Values above 1 create concentric diamond or square bands.
roundnessnumber
Default:0
Morphs from a sharp diamond (0) to a square (1)
colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
Default:oklch
Color space for color interpolation

Usage

<Shader>
  <DiamondGradient />
</Shader>
Previous
CursorTrail
Next
DiffuseBlur