![npm version](https://camo.githubusercontent.com/d0ca1d02df29fc5c319d6a4395855e802bff53bc6bebaf33ca6713be63d5212b/68747470733a2f2f62616467652e667572792e696f2f6a732f706978692d66696c746572732e737667)
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/7d361ed1bf3776ad6d9c0a2c8cba7938838954d2ed84bb248c83c6859d638f96/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f61646a7573746d656e742e706e673f763d32) |
AdvancedBloomFilter @pixi/filter-advanced-bloom |
![advanced-bloom](https://camo.githubusercontent.com/feddb70e3025d6433960ea312671a270ae71d06a09640e271ed471cdf798878c/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f616476616e6365642d626c6f6f6d2e706e673f763d32) |
AsciiFilter @pixi/filter-ascii |
![ascii](https://camo.githubusercontent.com/e2a07d36a88fa9f8305a35d58ec7b3bdaa26ec79d4ea8ecaf15090f37e34c43d/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f61736369692e706e673f763d32) |
BevelFilter @pixi/filter-bevel |
![bevel](https://camo.githubusercontent.com/ba8285cdca248bac18fae0555e726ff63c10f785a121bf3c4b595f61002fe1b0/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f626576656c2e706e673f763d32) |
BloomFilter @pixi/filter-bloom |
![bloom](https://camo.githubusercontent.com/0289d3d93801e39bbbb61d7017267b355103edb886a4c6b3286e764fe36021dd/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f626c6f6f6d2e706e673f763d32) |
BulgePinchFilter @pixi/filter-bulge-pinch |
![bulge-pinch](https://camo.githubusercontent.com/ee95260680a5c15f818baa3832e4df6741cfea3ae018cf4b845f5bb2514d657c/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f62756c67652d70696e63682e6769663f763d32) |
ColorMapFilter @pixi/filter-color-map |
![color-map](https://camo.githubusercontent.com/90565b613e170ddea3f32792c03e87f9e5dc70d440d0daf1dc64cbe5c9813302/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61702e706e673f763d32) |
ColorOverlayFilter @pixi/filter-color-overlay |
![color-overlay](https://camo.githubusercontent.com/7b8f786a40a92c996b78319f2970008ec79fe7824bf211b72b243b17391a4520/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6f7665726c61792e706e673f763d32) |
ColorReplaceFilter @pixi/filter-color-replace |
![color-replace](https://camo.githubusercontent.com/ad0b69d6f5a9157b5d3887d788eeacf8187917847ccd0d17f1f22c3c40635a5d/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d7265706c6163652e706e673f763d32) |
ConvolutionFilter @pixi/filter-convolution |
![convolution](https://camo.githubusercontent.com/1c3d2465e43106072dc70169749884905d7236681eb8eef337ebbae58ec64337/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6e766f6c7574696f6e2e706e673f763d32) |
CrossHatchFilter @pixi/filter-cross-hatch |
![cross-hatch](https://camo.githubusercontent.com/a50b6916c96215e6c08d5adbe6659e625b2e0ea93ef43f2a0295088a8872f1be/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f63726f73732d68617463682e706e673f763d32) |
CRTFilter @pixi/filter-crt |
![crt](https://camo.githubusercontent.com/987788cd2af5fb3789627403332edf81becf9f9048828e3eb2c09591501b1500/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f6372742e706e673f763d32) |
DotFilter @pixi/filter-dot |
![dot](https://camo.githubusercontent.com/4313ef37c02b12f775159dfc100e2e0ada6e4ca518b17dee55d2704ba1cd60d8/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f646f742e706e673f763d32) |
DropShadowFilter @pixi/filter-drop-shadow |
![drop-shadow](https://camo.githubusercontent.com/2503cc8e66143540fd29716372cd969e1d22c875038b3186bd0a34bf74649326/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f64726f702d736861646f772e706e673f763d32) |
EmbossFilter @pixi/filter-emboss |
![emboss](https://camo.githubusercontent.com/ba66056245e73cd49081628e39ccd5d373c83ce2c69f2541d6b43e118fc4daac/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f656d626f73732e706e673f763d32) |
GlitchFilter @pixi/filter-glitch |
![glitch](https://camo.githubusercontent.com/ba51c6b5870438788bb670faf20519dfd1cee2afac10113f53d6cf663a4f3eb9/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f676c697463682e706e673f763d31) |
GlowFilter @pixi/filter-glow |
![glow](https://camo.githubusercontent.com/33a961b00656ae71a7a4af78f5f9e869c466cdf55365bbdcdf4f1c2f75528d1e/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f676c6f772e706e673f763d32) |
Godray @pixi/filter-godray |
![godray](https://camo.githubusercontent.com/f2f89613ce1c65d2d10f19d821259f85a4454e40c7cb6bd5a2ea2b546c26baa2/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f676f647261792e6769663f763d32) |
KawaseBlurFilter @pixi/filter-kawase-blur |
![kawase-blur](https://camo.githubusercontent.com/aaa3f4434893e330c7b8f45f0a2a1eba91277d3ec5e9cfd3678331f9c7790fe1/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f6b61776173652d626c75722e706e673f763d31) |
MotionBlurFilter @pixi/filter-motion-blur |
![motion-blur](https://camo.githubusercontent.com/c57fceceb3825be791fb8de7d27411977426278751780eb090ff41136ce50d04/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f6d6f74696f6e2d626c75722e706e673f763d31) |
MultiColorReplaceFilter @pixi/filter-multi-color-replace |
![multi-color-replace](https://camo.githubusercontent.com/fef8b96189d8ae37fccb83a2618796d7f0ca9c97098af105b68660ceea9952a3/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f6d756c74692d636f6c6f722d7265706c6163652e706e673f763d31) |
OldFilmFilter @pixi/filter-old-film |
![old-film](https://camo.githubusercontent.com/81d7d026002e9544500e19cc976012aa2f7c19e57ad587a2b9b89574dae32ce7/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f6f6c642d66696c6d2e6769663f763d32) |
OutlineFilter @pixi/filter-outline |
![outline](https://camo.githubusercontent.com/9f29278cd74e02d368c7e0b94cc07158d4595612f0b31d9ea1a11e13ae7ead94/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f6f75746c696e652e706e673f763d32) |
PixelateFilter @pixi/filter-pixelate |
![pixelate](https://camo.githubusercontent.com/d8cd7af837243c44cbd1a905f42abcf02d855f6b991adba0ed76aeb932d6aae8/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f706978656c6174652e706e673f763d32) |
RadialBlurFilter @pixi/filter-radial-blur |
![radial-blur](https://camo.githubusercontent.com/26a547d1e6e321311f7999e73e5ca2ecb9ef4d84fae92c0d55781e2489d5ca75/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f72616469616c2d626c75722e706e673f763d32) |
ReflectionFilter @pixi/filter-reflection |
![reflection](https://camo.githubusercontent.com/9570609e40a95cbf34a78804dc38e402312f0c46dd07861f54bc3d88751c7ef2/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f7265666c656374696f6e2e706e673f763d32) |
RGBSplitFilter @pixi/filter-rgb |
![rgb split](https://camo.githubusercontent.com/8404ed1dae6f1e36219b38b1cc4ac9e7107e11ca1dde957eabbad576ccdf06f5/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f7267622e706e673f763d32) |
ShockwaveFilter @pixi/filter-shockwave |
![shockwave](https://camo.githubusercontent.com/3f4c0355db9ef6fa5e2b3dd41e6a77ac8bca24e9fe4039e1bab82c80db3b884c/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f73686f636b776176652e6769663f763d33) |
SimpleLightmapFilter @pixi/filter-simple-lightmap |
![simple-lightmap](https://camo.githubusercontent.com/b731aa58abd89055032234eff441b89d10b9fd2da4c950a37137030820fb69e5/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f73696d706c652d6c696768746d61702e706e673f763d32) |
TiltShiftFilter @pixi/filter-tilt-shift |
![tilt-shift](https://camo.githubusercontent.com/fd5040292df091228c57fbe7bc16c09e165235ed5e2adf5fdb18a16c47517ff8/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f74696c742d73686966742e706e673f763d32) |
TwistFilter @pixi/filter-twist |
![twist](https://camo.githubusercontent.com/3597666bc139352726f75c7308ea37615a6ae4fb441326e345057fe1eee29a13/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f74776973742e706e673f763d32) |
ZoomBlurFilter @pixi/filter-zoom-blur |
![zoom-blur](https://camo.githubusercontent.com/4476689e537843fba8508ac58272688f653493c1f1d24c7b10f88fb8495947c3/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f7a6f6f6d2d626c75722e706e673f763d34) |
PixiJS has a handful of core filters that are built-in to the PixiJS library.
Filter |
Preview |
AlphaFilter |
![alpha](https://camo.githubusercontent.com/99f7cb72a8d3e35bca7c521655bf9536739885ede5a82e81e1604f6cc7111d2c/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f616c7068612e706e673f763d32) |
BlurFilter |
![blur](https://camo.githubusercontent.com/83ac6ed400ce96ce595fc36bed916bd68846a36c070b690abd960523c02aa286/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f626c75722e706e673f763d32) |
ColorMatrixFilter (contrast) |
![color-matrix-contrast](https://camo.githubusercontent.com/d5ea9faf0e3a52fe0ff1a0b13d428525501adb79962b1298d1293dd5e6feab79/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d636f6e74726173742e706e673f763d32) |
ColorMatrixFilter (desaturate) |
![color-matrix-desaturate](https://camo.githubusercontent.com/3be31291b9b319b14dd224ce3bb232972f4f0144dd0513279c3806aa8ea79a1a/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d646573617475726174652e706e673f763d32) |
ColorMatrixFilter (kodachrome) |
![color-matrix-kodachrome](https://camo.githubusercontent.com/1621203d6e31a1f54f33938700db77ee0e542c56e04175e4cf85e412ef8edbe4/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d6b6f64616368726f6d652e706e673f763d32) |
ColorMatrixFilter (lsd) |
![color-matrix-lsd](https://camo.githubusercontent.com/47bd625b01549670e5e7667b5e2b5f518156b7abc8a632a7a2936bde2240d542/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d6c73642e706e673f763d32) |
ColorMatrixFilter (negative) |
![color-matrix-negative](https://camo.githubusercontent.com/f7201ba7670d83676cd1cddc8e280e91bdcae7f9d73fa05509a90c06f5625057/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d6e656761746976652e706e673f763d32) |
ColorMatrixFilter (polaroid) |
![color-matrix-polaroid](https://camo.githubusercontent.com/a0cff05293f3bb64f9342986983dcc7bc01bad983527ef6842c855fa5f684bd6/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d706f6c61726f69642e706e673f763d32) |
ColorMatrixFilter (predator) |
![color-matrix-predator](https://camo.githubusercontent.com/5459d9f16bd528594145308fa5f0ca783dc0d9c2322745b12181f76ab58e7756/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d7072656461746f722e706e673f763d32) |
ColorMatrixFilter (saturate) |
![color-matrix-saturate](https://camo.githubusercontent.com/419f5cd88bd9143ebd98494e4e92217bf372e2a24b95940479e2a6b77c0ec0bd/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d73617475726174652e706e673f763d32) |
ColorMatrixFilter (sepia) |
![color-matrix-sepia](https://camo.githubusercontent.com/f82d382af5d0a694ee5d8a4db3cfec8a0223d5003f896c2dbd44774d2ad372a2/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d73657069612e706e673f763d32) |
DisplacementFilter |
![displacement](https://camo.githubusercontent.com/5a0402d2cb11dcdc14a562aa916e6dc087126f5e46165163ab8d1ff15d360b83/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f646973706c6163656d656e742e706e673f763d32) |
NoiseFilter |
![noise](https://camo.githubusercontent.com/36010dfe6d392a7c009a9758e9f7079ac2ecceedd910ab2a262ad9a653e724fa/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f6e6f6973652e706e673f763d32) |
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.