PixiJS Filters
Demo
View the PixiJS Filters Demo to interactively play with filters to see how they work.
Filters
All filters work with PixiJS v7.
| Filter | Preview |
|---|---|
| AdjustmentFilter @pixi/filter-adjustment View demo |
 |
| AdvancedBloomFilter @pixi/filter-advanced-bloom View demo |
 |
| AsciiFilter @pixi/filter-ascii View demo |
 |
| BevelFilter @pixi/filter-bevel View demo |
 |
| BloomFilter @pixi/filter-bloom View demo |
 |
| BulgePinchFilter @pixi/filter-bulge-pinch View demo |
 |
| ColorGradientFilter @pixi/filter-color-gradient View demo |
 |
| ColorMapFilter @pixi/filter-color-map View demo |
 |
| ColorOverlayFilter @pixi/filter-color-overlay View demo |
 |
| ColorReplaceFilter @pixi/filter-color-replace View demo |
 |
| ConvolutionFilter @pixi/filter-convolution View demo |
 |
| CrossHatchFilter @pixi/filter-cross-hatch View demo |
 |
| CRTFilter @pixi/filter-crt View demo |
 |
| DotFilter @pixi/filter-dot View demo |
 |
| DropShadowFilter @pixi/filter-drop-shadow View demo |
 |
| EmbossFilter @pixi/filter-emboss View demo |
 |
| GlitchFilter @pixi/filter-glitch View demo |
 |
| GlowFilter @pixi/filter-glow View demo |
 |
| GodrayFilter @pixi/filter-godray View demo |
 |
| GrayscaleFilter @pixi/filter-grayscale View demo |
 |
| HslAdjustmentFilter @pixi/filter-hsl-adjustment View demo |
 |
| KawaseBlurFilter @pixi/filter-kawase-blur View demo |
 |
| MotionBlurFilter @pixi/filter-motion-blur View demo |
 |
| MultiColorReplaceFilter @pixi/filter-multi-color-replace View demo |
 |
| OldFilmFilter @pixi/filter-old-film View demo |
 |
| OutlineFilter @pixi/filter-outline View demo |
 |
| PixelateFilter @pixi/filter-pixelate View demo |
 |
| RadialBlurFilter @pixi/filter-radial-blur View demo |
 |
| ReflectionFilter @pixi/filter-reflection View demo |
 |
| RGBSplitFilter @pixi/filter-rgb-split View demo |
 |
| ShockwaveFilter @pixi/filter-shockwave View demo |
 |
| SimpleLightmapFilter @pixi/filter-simple-lightmap View demo |
 |
| TiltShiftFilter @pixi/filter-tilt-shift View demo |
 |
| TwistFilter @pixi/filter-twist View demo |
 |
| ZoomBlurFilter @pixi/filter-zoom-blur View demo |
 |
Built-In Filters
PixiJS has a handful of core filters that are built-in to the PixiJS library.
| Filter | Preview |
|---|---|
| AlphaFilter View demo |
 |
| BlurFilter View demo |
 |
| ColorMatrixFilter (contrast) View demo |
 |
| ColorMatrixFilter (desaturate) View demo |
 |
| ColorMatrixFilter (kodachrome) View demo |
 |
| ColorMatrixFilter (lsd) View demo |
 |
| ColorMatrixFilter (negative) View demo |
 |
| ColorMatrixFilter (polaroid) View demo |
 |
| ColorMatrixFilter (predator) View demo |
 |
| ColorMatrixFilter (saturate) View demo |
 |
| ColorMatrixFilter (sepia) View demo |
 |
| DisplacementFilter View demo |
 |
| NoiseFilter View demo |
 |
Installation
Installation is available using NPM:
npm install pixi-filtersAlternatively, you can use a CDN such as JSDelivr:
<script src="https://cdn.jsdelivr.net/npm/pixi-filters@latest/dist/pixi-filters.js"></script>If all else failes, you can manually download the bundled file from the releases section and include it in your project.
Building
PixiJS Filters uses Lerna under-the-hood to build all of the filters separately. Install all dependencies by simply running the following.
npm installBuild all filters, demo and screenshots by running the following:
npm run buildWatch all filters and demo (auto-rebuild upon src changes):
npm run watchDocumentation
API documention can be found here.