DiamondGradient

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

Props

  • colorA

    Color at the center of the diamond

    Type
    string
    Default
    #4ffb4a

  • colorB

    Color at the outer edges of the diamond

    Type
    string
    Default
    #4f1238

  • stops

    Multi-stop gradient colors (overrides Color A / Color B when set)

    Type
    object
    Default
    null

  • center

    Center point of the diamond

    Type
    {x: number, y: number}
    Default
    {"x":0.5,"y":0.5}

  • size

    Extent of the gradient — controls how far Color A reaches before transitioning to Color B

    Type
    number
    Default
    0.7

  • rotation

    Rotation in degrees — tilts the diamond into a rhombus

    Type
    number
    Default
    0

  • repeat

    Number of times the gradient repeats outward. Values above 1 create concentric diamond or square bands.

    Type
    number
    Default
    1

  • roundness

    Morphs from a sharp diamond (0) to a square (1)

    Type
    number
    Default
    0

  • colorSpace

    Color space for color interpolation

    Type
    "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
    Default
    linear

Usage

<Shader>
  <DiamondGradient />
</Shader>