@pixi/filter-color-gradient

ColorGradientFilter

PixiJS filter to render a color gradient.

View demo

Installation

npm install @pixi/filter-color-gradient

Usage

import { ColorGradientFilter } from '@pixi/filter-color-gradient';
import { Container } from 'pixi.js';

const container = new Container();

const options = {
  type: ColorGradientFilter.LINEAR,
  stops: [
    { offset: 0.0, color: 'red', alpha: 1.0, },
    { offset: 1.0, color: 'blue', alpha: 1.0, },
  ],
  angle: 90,
  alpha: 0.8,
}

container.filters = [new ColorGradientFilter(options)];

Color values

The following values can be used to define a color.

Description	Type	Example
CSS color name	string	"red"
Hexadecimal string	string	"#ff0000", "#f00"
Hexadecimal number	number	0xff0000
Array of numbers [R,G,B]	number[]	[1.0, 0.0, 0.0]

Documentation

See https://filters.pixijs.download/main/docs/ColorGradientFilter.html