![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 v4.
Filter |
Preview |
AdjustmentFilter @pixi/filter-adjustment |
![adjustment](https://camo.githubusercontent.com/37d56e8209f1de0b3104f44e7075bbd4171c5efba6c8c02525a8e965c6720f40/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f61646a7573746d656e742e706e673f763d32) |
AdvancedBloomFilter @pixi/filter-advanced-bloom |
![advanced-bloom](https://camo.githubusercontent.com/d5dbe6ebea7d340497c50793fc0b1b707f4e6c68ae052b076affd3cddc21e853/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f616476616e6365642d626c6f6f6d2e706e673f763d32) |
AsciiFilter @pixi/filter-ascii |
![ascii](https://camo.githubusercontent.com/15e9a8f7594013b08df06d8b82d1458c3ac7500d5c8d1d6f0949bf15c8c9dc45/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f61736369692e706e673f763d32) |
BevelFilter @pixi/filter-bevel |
![bevel](https://camo.githubusercontent.com/71fff0457489bca6e265571ecb538e7b0d3897a0fc111a7a590b5308aeb51e2c/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f626576656c2e706e673f763d32) |
BloomFilter @pixi/filter-bloom |
![bloom](https://camo.githubusercontent.com/1e025b0e79fe2d0e5f732e1f4aab5d9c37892cbe5b4154903f3d77d6e04067e8/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f626c6f6f6d2e706e673f763d32) |
BulgePinchFilter @pixi/filter-bulge-pinch |
![bulge-pinch](https://camo.githubusercontent.com/f7c79643e777ec73501280c73f2304983926020fbf5e860d07c32f356fed3a61/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f62756c67652d70696e63682e6769663f763d32) |
ColorMapFilter @pixi/filter-color-map |
![color-map](https://camo.githubusercontent.com/57f987f5a37f51125079339de8a8b279d57b77d81a31a71cef7caa8c0db5ae1e/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61702e706e673f763d32) |
ColorReplaceFilter @pixi/filter-color-replace |
![color-replace](https://camo.githubusercontent.com/807754f8dcdf6c9729c3e812f0a340bba76f5a5d116215b614658ef717a97505/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d7265706c6163652e706e673f763d32) |
ConvolutionFilter @pixi/filter-convolution |
![convolution](https://camo.githubusercontent.com/259452db0ceafc6f7d3040e0ecd9c6c5bf7fdb70104c4251eb1eb9732091b18d/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f636f6e766f6c7574696f6e2e706e673f763d32) |
CrossHatchFilter @pixi/filter-cross-hatch |
![cross-hatch](https://camo.githubusercontent.com/9f2df9e05a2c49504471d5061283f5f6d67ff0a6b3d13051632e2c6ac25b3818/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f63726f73732d68617463682e706e673f763d32) |
CRTFilter @pixi/filter-crt |
![crt](https://camo.githubusercontent.com/ef3062fdfc7bf931bcdaab85426301b5227cea4b9986375069dd95bb1d1d5d10/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f6372742e706e673f763d32) |
DotFilter @pixi/filter-dot |
![dot](https://camo.githubusercontent.com/1f6f057e04cb23138ab2673d225db46d6d7a616815b7c9bdfd5b332181bfa608/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f646f742e706e673f763d32) |
DropShadowFilter @pixi/filter-drop-shadow |
![drop-shadow](https://camo.githubusercontent.com/a576f6f49672658b2f685975edd9c3e7c6b57ad9b16c495699c0634f9b4b7bbf/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f64726f702d736861646f772e706e673f763d32) |
EmbossFilter @pixi/filter-emboss |
![emboss](https://camo.githubusercontent.com/24d9fd9b8a4ba2c634fbc6dd9dc1779eb71c2685a3181c41f8d96050ac72545c/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f656d626f73732e706e673f763d32) |
GlitchFilter @pixi/filter-glitch |
![glitch](https://camo.githubusercontent.com/372119a31e06935d6b36be44bed93d65d3191da4b2e90597bd1311b933b7a5b5/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f676c697463682e706e673f763d31) |
GlowFilter @pixi/filter-glow |
![glow](https://camo.githubusercontent.com/a13a350bf8722e5a21594192cb1908e340f30b505e2f043f9843de9d7c1f3344/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f676c6f772e706e673f763d32) |
Godray @pixi/filter-godray |
![godray](https://camo.githubusercontent.com/0bd6cbcad529a59f1c88e97ae4f118d07e51862d33ec8ab87c1fb57c4a4cfe13/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f676f647261792e6769663f763d32) |
KawaseBlurFilter @pixi/filter-kawase-blur |
![kawase-blur](https://camo.githubusercontent.com/7d77d0dc6e3e8bbbddfbea26e37af026c4365a152af89910eaa257e469178bd3/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f6b61776173652d626c75722e706e673f763d31) |
MotionBlurFilter @pixi/filter-motion-blur |
![motion-blur](https://camo.githubusercontent.com/971ba20205b537764a367fefb8c0cc23cf78d8a239b5a29e34944a32dc222d63/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f6d6f74696f6e2d626c75722e706e673f763d31) |
MultiColorReplaceFilter @pixi/filter-multi-color-replace |
![multi-color-replace](https://camo.githubusercontent.com/6723853ea78f8369d905610d832835843edca775f30de9774dda82ab1fc82ca2/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f6d756c74692d636f6c6f722d7265706c6163652e706e673f763d31) |
OldFilmFilter @pixi/filter-old-film |
![old-film](https://camo.githubusercontent.com/72d5c01460305383a4a43aaa54d19f3d118f01314919b4a684ce729bd256b8ee/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f6f6c642d66696c6d2e6769663f763d32) |
OutlineFilter @pixi/filter-outline |
![outline](https://camo.githubusercontent.com/2cd4200bdd90458a5620ec1652b3b6bb2c7f6a4296d55c1fe04d6c5775e82b62/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f6f75746c696e652e706e673f763d32) |
PixelateFilter @pixi/filter-pixelate |
![pixelate](https://camo.githubusercontent.com/d33991a8bb131ade756de6632e1b025d202368808ba75d40afee300775db14fe/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f706978656c6174652e706e673f763d32) |
RadialBlurFilter @pixi/filter-radial-blur |
![radial-blur](https://camo.githubusercontent.com/731210f97bf6439d81a723161ae9ea6697cc918ef6699803714857636891e419/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f72616469616c2d626c75722e706e673f763d32) |
ReflectionFilter @pixi/filter-reflection |
![reflection](https://camo.githubusercontent.com/38ae8e78a26f23894c266356159f647bb4000738aefe3576d3e7c84ba2b8173a/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f7265666c656374696f6e2e706e673f763d32) |
RGBSplitFilter @pixi/filter-rgb |
![rgb split](https://camo.githubusercontent.com/fdf53f7336d69b0c89f184e466e5bf7294aff46156346f4f5d0521ddd3fc87a6/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f7267622e706e673f763d32) |
ShockwaveFilter @pixi/filter-shockwave |
![shockwave](https://camo.githubusercontent.com/24d295eea6f38061b772a4f853b68386c736a8ae04787ad881b927ec58198b93/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f73686f636b776176652e6769663f763d33) |
SimpleLightmapFilter @pixi/filter-simple-lightmap |
![simple-lightmap](https://camo.githubusercontent.com/cdd8ef9e2c7e56cf86638de31547021ef2cf0e4370ea3a51df0536fbde77371f/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f73696d706c652d6c696768746d61702e706e673f763d32) |
TiltShiftFilter @pixi/filter-tilt-shift |
![tilt-shift](https://camo.githubusercontent.com/755bf95ebbc3c00c4b21e5253d8766d60f13e64fe06cc8a4ea84d7bab7813fd0/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f74696c742d73686966742e706e673f763d32) |
TwistFilter @pixi/filter-twist |
![twist](https://camo.githubusercontent.com/d4db9e4404cf380c811829e515ba14183ce0758fd83e3d3360397bbb9cce8db3/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f74776973742e706e673f763d32) |
ZoomBlurFilter @pixi/filter-zoom-blur |
![zoom-blur](https://camo.githubusercontent.com/ebef9e78b890ac02de4e96308eb50622874fb92abd2f57f6d53b5e775a49111a/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f7a6f6f6d2d626c75722e706e673f763d34) |
PixiJS has a handful of core filters that are built-in to the PixiJS library.
Filter |
Preview |
AlphaFilter |
![alpha](https://camo.githubusercontent.com/513b1f2c774ed995636cd4c9ee5c2db5324bdcfb90dc11330757d76a302ee513/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f616c7068612e706e673f763d32) |
BlurFilter |
![blur](https://camo.githubusercontent.com/4183718e01aebdc1f0783e31998ba518201e770092ad6b7279743daab9708aa4/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f626c75722e706e673f763d32) |
ColorMatrixFilter (contrast) |
![color-matrix-contrast](https://camo.githubusercontent.com/531e68e8939bd4d1554446e6b55a68c3f28e0c9781b064cdb7a4c2c66ce8631f/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d636f6e74726173742e706e673f763d32) |
ColorMatrixFilter (desaturate) |
![color-matrix-desaturate](https://camo.githubusercontent.com/02c8773cc3dc175e2e16cab96c840ddcd490c5e38512be2a863b1d022e97850a/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d646573617475726174652e706e673f763d32) |
ColorMatrixFilter (kodachrome) |
![color-matrix-kodachrome](https://camo.githubusercontent.com/1e5aa26fa933f58f499e37731e6f5d2c419ea100046f05b9d65fe52bb2356bdd/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d6b6f64616368726f6d652e706e673f763d32) |
ColorMatrixFilter (lsd) |
![color-matrix-lsd](https://camo.githubusercontent.com/3b04b1e5c8e37772cc5742e011d666dc960cfa50a94b00655f0bde1106c65440/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d6c73642e706e673f763d32) |
ColorMatrixFilter (negative) |
![color-matrix-negative](https://camo.githubusercontent.com/5b598215c32783d0f062bda3c5e0830a08e47091b05aeb6ec04277707434d323/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d6e656761746976652e706e673f763d32) |
ColorMatrixFilter (polaroid) |
![color-matrix-polaroid](https://camo.githubusercontent.com/df818913a964a0f9d5a16e3323bbb9cae0e55576a4bf773bec06cb84c57fba9a/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d706f6c61726f69642e706e673f763d32) |
ColorMatrixFilter (predator) |
![color-matrix-predator](https://camo.githubusercontent.com/ece975f1390c7eaaed13b0264deb9ba8fb3231b34b58f156b658d2bf49c86bef/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d7072656461746f722e706e673f763d32) |
ColorMatrixFilter (saturate) |
![color-matrix-saturate](https://camo.githubusercontent.com/c39bb8eaa55456b1463b573cab3ca383eaafbd98cc152e04b96e514cd3c96304/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d73617475726174652e706e673f763d32) |
ColorMatrixFilter (sepia) |
![color-matrix-sepia](https://camo.githubusercontent.com/3fbc842ba2c157b75ab5a66d46e1174970ab750867b88e2bd884a8ee5d8a73dc/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d73657069612e706e673f763d32) |
DisplacementFilter |
![displacement](https://camo.githubusercontent.com/61f1562b4f6b3c1cf68ab1be7964da361d150f9c55999529e71c749a79295c3b/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f646973706c6163656d656e742e706e673f763d32) |
NoiseFilter |
![noise](https://camo.githubusercontent.com/dee0e352327d3ba1ad8f7816a709875e3bae67f45800e70446598eec5f733756/68747470733a2f2f706978696a732e6769746875622e696f2f706978692d66696c746572732f746f6f6c732f73637265656e73686f74732f646973742f6e6f6973652e706e673f763d32) |
Installation is available using NPM:
Alternatively, you can use a CDN such as JSDelivr:
<script src="https://cdn.jsdelivr.net/npm/pixi-filters@2.6.1/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.