![Build Status](https://camo.githubusercontent.com/7d2c9c5646f7bff97859c37c72be939dc4ffc5112dddfbcae8ac5360dc1a0231/68747470733a2f2f7472617669732d63692e6f72672f706978696a732f706978692d66696c746572732e7376673f6272616e63683d6d6173746572)
Click here to interactively play with filters to see how they work.
All filters work with PixiJS v5.
Filter |
Preview |
AdjustmentFilter @pixi/filter-adjustment |
![adjustment](https://camo.githubusercontent.com/aa35bece7cb95b7afa7a4bd4a2be1f34184db2354befe4e302cc7039ee57d67b/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f61646a7573746d656e742e706e673f763d32) |
AdvancedBloomFilter @pixi/filter-advanced-bloom |
![advanced-bloom](https://camo.githubusercontent.com/e84d20add704d924c8a48c574f2a6b152102bfa8e7f310f36e6aa2a901d595b2/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f616476616e6365642d626c6f6f6d2e706e673f763d32) |
AsciiFilter @pixi/filter-ascii |
![ascii](https://camo.githubusercontent.com/a6122133a2a77e9b00ac743e380aa2bedfebaddf78db65bf713066f36cb34665/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f61736369692e706e673f763d32) |
BevelFilter @pixi/filter-bevel |
![bevel](https://camo.githubusercontent.com/7955bf4faa1e2fe87e96fa5e6fe3e20617a6b239ec5c4644f10a2d5c689326a5/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f626576656c2e706e673f763d32) |
BloomFilter @pixi/filter-bloom |
![bloom](https://camo.githubusercontent.com/9db3fa3d0eefe4150ca32724c57bf3ec31ec781321f9a95a0ad59e505b199332/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f626c6f6f6d2e706e673f763d32) |
BulgePinchFilter @pixi/filter-bulge-pinch |
![bulge-pinch](https://camo.githubusercontent.com/11914e0017c19ad9165b3a70c8c9c42eb7668804fa834dfc07ec77dcf24d5551/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f62756c67652d70696e63682e6769663f763d32) |
ColorMapFilter @pixi/filter-color-map |
![color-map](https://camo.githubusercontent.com/5bdc6e26f6d6f01dc2b2fd8d80ccd728297860ae29df926947ff740c2dff547d/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61702e706e673f763d32) |
ColorOverlayFilter @pixi/filter-color-overlay |
![color-overlay](https://camo.githubusercontent.com/b2416b4f883756b918f86b1ca364dff424a508f9002fec109336a96fa0db9ea5/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6f7665726c61792e706e673f763d32) |
ColorReplaceFilter @pixi/filter-color-replace |
![color-replace](https://camo.githubusercontent.com/c266e635c3d572537c6d88456c425d5f4a0554c055e0ec3158ac387aa4cc15d8/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d7265706c6163652e706e673f763d32) |
ConvolutionFilter @pixi/filter-convolution |
![convolution](https://camo.githubusercontent.com/fb2214a41fe62606563780310d2ba8072b5489c2adfff766439e94777317b967/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f636f6e766f6c7574696f6e2e706e673f763d32) |
CrossHatchFilter @pixi/filter-cross-hatch |
![cross-hatch](https://camo.githubusercontent.com/7c99364a4ec1788abd2d0ba5d9e8d8ae565d909efc1fc6fecc6b5d070c47a39c/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f63726f73732d68617463682e706e673f763d32) |
CRTFilter @pixi/filter-crt |
![crt](https://camo.githubusercontent.com/0903145f8ce298aa15fa364b3e36daaefa3ff991de05661daaa502129495eee6/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f6372742e706e673f763d32) |
DotFilter @pixi/filter-dot |
![dot](https://camo.githubusercontent.com/ae77dfb7858472a157ddec3f778234e8bf8639e11e9d912e499f55a6e193195c/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f646f742e706e673f763d32) |
DropShadowFilter @pixi/filter-drop-shadow |
![drop-shadow](https://camo.githubusercontent.com/f9d3239cbb86979ac2a665e0a975b731c9810e49288722f9c18d6e7889f062ca/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f64726f702d736861646f772e706e673f763d32) |
EmbossFilter @pixi/filter-emboss |
![emboss](https://camo.githubusercontent.com/32e0391d412224fb53643d2e2ac67ed431a6b162a0568fc2696b4771d373b7c4/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f656d626f73732e706e673f763d32) |
GlitchFilter @pixi/filter-glitch |
![glitch](https://camo.githubusercontent.com/cd4bde797951979f0818810ddf605aa79ee94f94bd872c24c974275e7d4f277a/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f676c697463682e706e673f763d31) |
GlowFilter @pixi/filter-glow |
![glow](https://camo.githubusercontent.com/c22f1469af57e5147b95bd343503c1e1c9ae321c8085eed07cfa44ed5aff3e0e/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f676c6f772e706e673f763d32) |
Godray @pixi/filter-godray |
![godray](https://camo.githubusercontent.com/ddbcc94ed95cbc6299090c99c408cb637a2513c7f1db57463007a50e43af9726/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f676f647261792e6769663f763d32) |
KawaseBlurFilter @pixi/filter-kawase-blur |
![kawase-blur](https://camo.githubusercontent.com/713ca9379d704dbd72a5b7a812bbbf770cb95cd8b9844aab0d14eaf5a656fefd/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f6b61776173652d626c75722e706e673f763d31) |
MotionBlurFilter @pixi/filter-motion-blur |
![motion-blur](https://camo.githubusercontent.com/1906597f43c9201e61256e572f91d0f8e236c93706e16aab22f4740d9daa8a53/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f6d6f74696f6e2d626c75722e706e673f763d31) |
MultiColorReplaceFilter @pixi/filter-multi-color-replace |
![multi-color-replace](https://camo.githubusercontent.com/c2169fc11e943d91057a654e83ee63f4dcb19d7e87af66de314e67e812988981/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f6d756c74692d636f6c6f722d7265706c6163652e706e673f763d31) |
OldFilmFilter @pixi/filter-old-film |
![old-film](https://camo.githubusercontent.com/f5326080761895e5dc8fd68eceb10be0bfc96983cdc961164b69f29f3f06bc85/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f6f6c642d66696c6d2e6769663f763d32) |
OutlineFilter @pixi/filter-outline |
![outline](https://camo.githubusercontent.com/40db340f19ecf3012492b3d34b7d193bba3bd177ce30aa37d985b9830b03b6f8/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f6f75746c696e652e706e673f763d32) |
PixelateFilter @pixi/filter-pixelate |
![pixelate](https://camo.githubusercontent.com/35cc33235bffaaf7d522fc2b63f082fe1272a2b978bca8cc84b9d0025db4d719/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f706978656c6174652e706e673f763d32) |
RadialBlurFilter @pixi/filter-radial-blur |
![radial-blur](https://camo.githubusercontent.com/98ed2fc70d2daf170368db8da4c69e603d3e1d99dc6795af4941b6b41dfbc710/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f72616469616c2d626c75722e706e673f763d32) |
ReflectionFilter @pixi/filter-reflection |
![reflection](https://camo.githubusercontent.com/b4a4d9151657d179fd789ea86d7a85a71221ee881360f316703a94d7427f5ed1/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f7265666c656374696f6e2e706e673f763d32) |
RGBSplitFilter @pixi/filter-rgb |
![rgb split](https://camo.githubusercontent.com/4e1afaee3bbef1892678099ce315a8547e300374d033374b49b563ee0ea95cfe/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f7267622e706e673f763d32) |
ShockwaveFilter @pixi/filter-shockwave |
![shockwave](https://camo.githubusercontent.com/c604d6a046f3cb72976b9177c4b17bfb30c18c909d363ff99d28c02548c099c1/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f73686f636b776176652e6769663f763d33) |
SimpleLightmapFilter @pixi/filter-simple-lightmap |
![simple-lightmap](https://camo.githubusercontent.com/4014f7e56c41ab2de650eaa283a7efa2f332354521286a525e61e63e8690327c/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f73696d706c652d6c696768746d61702e706e673f763d32) |
TiltShiftFilter @pixi/filter-tilt-shift |
![tilt-shift](https://camo.githubusercontent.com/5bdaf60de2a6af9476475e162aa29aa303dcaa8c926708709a9bb56d8f271162/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f74696c742d73686966742e706e673f763d32) |
TwistFilter @pixi/filter-twist |
![twist](https://camo.githubusercontent.com/fbf9f6cf15d69237cd4adfb0a0396d9f5c64334790da24b21e286ad7afa77a32/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f74776973742e706e673f763d32) |
ZoomBlurFilter @pixi/filter-zoom-blur |
![zoom-blur](https://camo.githubusercontent.com/9934522c92d1c3465b0b2e008f3c9da40929463c4fabed37a0d075bf68516b3a/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f7a6f6f6d2d626c75722e706e673f763d34) |
PixiJS has a handful of core filters that are built-in to the PixiJS library.
Filter |
Preview |
AlphaFilter |
![alpha](https://camo.githubusercontent.com/e5ad4a81c6920f10672bb632a3a0ec473a47f80aa7456eac699ed5287ec3ee1a/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f616c7068612e706e673f763d32) |
BlurFilter |
![blur](https://camo.githubusercontent.com/ed7a7a64a263ed86f909ed7ea87fed62da687609ef3e0c5c6972006712732640/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f626c75722e706e673f763d32) |
ColorMatrixFilter (contrast) |
![color-matrix-contrast](https://camo.githubusercontent.com/2444b779f8feca58a463388d3174725969d5a236413697e7b718534f0b5af505/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d636f6e74726173742e706e673f763d32) |
ColorMatrixFilter (desaturate) |
![color-matrix-desaturate](https://camo.githubusercontent.com/b3a97800f70578607f6eb863aea9295000916519d2292328777491009012eb1d/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d646573617475726174652e706e673f763d32) |
ColorMatrixFilter (kodachrome) |
![color-matrix-kodachrome](https://camo.githubusercontent.com/013a43d087408ab80f1f9c0c86739c2cd741b118d20ee6a3ca317184cb694504/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d6b6f64616368726f6d652e706e673f763d32) |
ColorMatrixFilter (lsd) |
![color-matrix-lsd](https://camo.githubusercontent.com/73ccc7170bfb2029ffc249cec785b13e32ebc10570c5667e9feef81f36122df9/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d6c73642e706e673f763d32) |
ColorMatrixFilter (negative) |
![color-matrix-negative](https://camo.githubusercontent.com/e32da20d521de1c7334d95e8609bce65e6e26f59915cf0013e600ddc0ac64150/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d6e656761746976652e706e673f763d32) |
ColorMatrixFilter (polaroid) |
![color-matrix-polaroid](https://camo.githubusercontent.com/83b104a0640ae7f7bebe59ce2d12781c2b50bb77cf9d4e6551616ac7cf97a197/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d706f6c61726f69642e706e673f763d32) |
ColorMatrixFilter (predator) |
![color-matrix-predator](https://camo.githubusercontent.com/e9bbafcf5ddcf85fd2c0f89ec88719c41ca59f1f922caacceb9267d94f8373fa/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d7072656461746f722e706e673f763d32) |
ColorMatrixFilter (saturate) |
![color-matrix-saturate](https://camo.githubusercontent.com/154d87082b0e5e1a2c3a38238e7f5448bca66866cb1d37eecdd088880643cf0c/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d73617475726174652e706e673f763d32) |
ColorMatrixFilter (sepia) |
![color-matrix-sepia](https://camo.githubusercontent.com/985b40e5841ff2ceb7d3a1208686a6d9ebb36a1158ec9312cb5cf1135eba487a/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d73657069612e706e673f763d32) |
DisplacementFilter |
![displacement](https://camo.githubusercontent.com/e6106fc291936c7bcfa7d1b50f5bc76817519a6fea1c02508f55c1d333e6bc4a/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f646973706c6163656d656e742e706e673f763d32) |
NoiseFilter |
![noise](https://camo.githubusercontent.com/9e1f22fbf6e949f86030bd219893de674038908807909ac71357bb830a4eea47/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61737465722f746f6f6c732f73637265656e73686f74732f646973742f6e6f6973652e706e673f763d32) |
Installation is available using NPM:
Alternatively, 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.
PixiJS Filters uses Lerna under-the-hood to build all of the filters separately. Install all dependencies by simply running the following.
Build all filters, demo and screenshots by running the following:
Build single filter by running the following:
npm run build:prod -- --scope "@pixi/filter-emboss"
Build multiple filters where scope is a glob expression:
npm run build:prod -- --scope "{@pixi/filter-emboss,@pixi/filter-glow}"
Watch all filters (auto-rebuild upon src changes):
Build all filters in dev-mode (un-minified):
API documention can be found here.