LinearGradient

Create smooth linear color gradients

Props

colorAstring

Default:#1aff00

The starting color of the gradient

colorA

stringDefault: #1aff00

The starting color of the gradient

colorBstring

Default:#0000ff

The ending color of the gradient

colorB

stringDefault: #0000ff

The ending color of the gradient

stopsobject

Default:null

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

stops

objectDefault: null

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

start{x: number, y: number}

Default:{"x":0,"y":0.5}

The starting point of the gradient

start

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

The starting point of the gradient

end{x: number, y: number}

Default:{"x":1,"y":0.5}

The ending point of the gradient

end

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

The ending point of the gradient

anglenumber

Default:0

Additional rotation angle of the gradient (in degrees)

angle

numberDefault: 0

Additional rotation angle of the gradient (in degrees)

edges"stretch" | "transparent" | "mirror" | "wrap"

Default:stretch

How to handle areas beyond the gradient endpoints

edges

"stretch" | "transparent" | "mirror" | "wrap"Default: stretch

How to handle areas beyond the gradient endpoints

colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"

Default:linear

Color space for color interpolation

colorSpace

Color space for color interpolation

Usage

<Shader>
  <LinearGradient />
</Shader>

<Shader>
  <LinearGradient />
</Shader>

<Shader>
  <LinearGradient />
</Shader>

<Shader>
  <LinearGradient />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'LinearGradient', props: {} }
  ]
})

LinearBlur

LiquidMetal