Parse a gradient

import { parse } from 'gradiente'

const gradient = parse(
  'linear-gradient(to right, red, blue)'
)

Inspect the gradient

gradient.type
gradient.isRepeating
gradient.config
gradient.stops

Example

gradient.type        // 'linear-gradient'
gradient.isRepeating // false
gradient.config      // direction, angle, etc.
gradient.stops       // array of stops

Work with stops

Stops are stored as an array:

gradient.stops

Add a stop

gradient.addStop({
  color: 'green',
  position: 0.5
})

Remove a stop

// Stops removing by it's index
gradient.removeStop(0)

Clone a gradient

const copy = gradient.clone()

Creates a safe copy.

Compare gradients

gradient.equals(copy) // true

Useful for detecting changes.

Convert back to string

gradient.toString()

Example

parse('linear-gradient(red, blue)').toString()
// → normalized output

Convert to JSON

gradient.toJSON()

Example

{
  type: 'linear-gradient',
  isRepeating: false,
  config: {...},
  stops: [...]
}

Typical workflow

const gradient = parse(input)

// inspect
gradient.stops

// modify
gradient.addStop({ color: 'green', position: 0.5 })

// serialize
const output = gradient.toString()

Summary

parse → get gradient object
inspect → read properties
modify → add/remove stops
clone → safe copy
equals → compare gradients
toString → serialize to string
toJSON → serialize to data