![npm version](https://camo.githubusercontent.com/2a4ac5251b61b010c5e7c4b5b1db0ac70b7f1ab9ec69bebf4ff8f6334a0e7b49/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/60c6b0fc27b9fe5ebab05084562c177930401c48cdc893bf0a542d10b1fa3a20/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f61646a7573746d656e742e706e673f763d32) |
AdvancedBloomFilter @pixi/filter-advanced-bloom |
![advanced-bloom](https://camo.githubusercontent.com/15c2aa38e50b33581fae1e54976d9e15a944c65783f2fa243dd56de9a8826224/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f616476616e6365642d626c6f6f6d2e706e673f763d32) |
AsciiFilter @pixi/filter-ascii |
![ascii](https://camo.githubusercontent.com/d4adfc96582e532d3bf7b2f562aa78fba0e8d3ceb9135f329f9f53515c185409/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f61736369692e706e673f763d32) |
BevelFilter @pixi/filter-bevel |
![bevel](https://camo.githubusercontent.com/7f828792f5d0f7536251bb4eeb48f7a65cd3fcbb7c6a37cb82c332ee0ca8e27f/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f626576656c2e706e673f763d32) |
BloomFilter @pixi/filter-bloom |
![bloom](https://camo.githubusercontent.com/4cbc116f1b8f52524a5a95ec5c1d0f2ad7bda0d6c57850c96a9d9e2b5a8e59d6/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f626c6f6f6d2e706e673f763d32) |
BulgePinchFilter @pixi/filter-bulge-pinch |
![bulge-pinch](https://camo.githubusercontent.com/072943647026c38e000135cdca478f9854f72933c5d583dd8d181f67eddf18ff/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f62756c67652d70696e63682e6769663f763d32) |
ColorMapFilter @pixi/filter-color-map |
![color-map](https://camo.githubusercontent.com/c6e1a86475f61a095576441e0e272b3501d05840d20758b9ba98ce326d23064f/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61702e706e673f763d32) |
ColorOverlayFilter @pixi/filter-color-overlay |
![color-overlay](https://camo.githubusercontent.com/b3eb17b290964ee6bed68a509e2508baa35a826b3fa1d4f6ae296d145093963a/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6f7665726c61792e706e673f763d32) |
ColorReplaceFilter @pixi/filter-color-replace |
![color-replace](https://camo.githubusercontent.com/67635f87b902884e8c3e2dfa19f521ca450b938ab37e1f8dc0f5d71d127d8253/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d7265706c6163652e706e673f763d32) |
ConvolutionFilter @pixi/filter-convolution |
![convolution](https://camo.githubusercontent.com/283498650e248ee91234386376c92ba4368868965800167dd5d10994b22b245c/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6e766f6c7574696f6e2e706e673f763d32) |
CrossHatchFilter @pixi/filter-cross-hatch |
![cross-hatch](https://camo.githubusercontent.com/50aabbc09c9d3f8c805c21191ab56ab8c2394483550898f86d7b15dd62e06440/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f63726f73732d68617463682e706e673f763d32) |
CRTFilter @pixi/filter-crt |
![crt](https://camo.githubusercontent.com/23811c264343de1ca4ff962748740fb04a72137ebf7592e39b3a57c0ee63c865/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f6372742e706e673f763d32) |
DotFilter @pixi/filter-dot |
![dot](https://camo.githubusercontent.com/2ae3443aefb888b28f47078fba879047a1c685a75884a346827d93d13bccaffb/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f646f742e706e673f763d32) |
DropShadowFilter @pixi/filter-drop-shadow |
![drop-shadow](https://camo.githubusercontent.com/b3b878b953fe480fa692c48659507572313a4dc1d32c544d972925994e384b12/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f64726f702d736861646f772e706e673f763d32) |
EmbossFilter @pixi/filter-emboss |
![emboss](https://camo.githubusercontent.com/14da0c7d9bb1157656031405fbc6e9fa60c600ae229828a5a97a1017a1df693a/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f656d626f73732e706e673f763d32) |
GlitchFilter @pixi/filter-glitch |
![glitch](https://camo.githubusercontent.com/5cbd7a6d85ee927ef55d58ce6d99be99fc2f3ff7594b7d102084610f606ed08b/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f676c697463682e706e673f763d31) |
GlowFilter @pixi/filter-glow |
![glow](https://camo.githubusercontent.com/d193cbe90800d4b51528522489b3e57881332d09f81d1e9680a0c9821c83d9f5/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f676c6f772e706e673f763d32) |
Godray @pixi/filter-godray |
![godray](https://camo.githubusercontent.com/1eea72d9feb850e615217db23e7f2e98b5eef84daf6671eda0e15d577bc1a8e3/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f676f647261792e6769663f763d32) |
KawaseBlurFilter @pixi/filter-kawase-blur |
![kawase-blur](https://camo.githubusercontent.com/ac2f125fb4dd28bb07450d0000ef2744fe510e87d6378565e95859a2214b1bfe/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f6b61776173652d626c75722e706e673f763d31) |
MotionBlurFilter @pixi/filter-motion-blur |
![motion-blur](https://camo.githubusercontent.com/a9fa50574392c407bd6be77ccc467e810ec63d615ca017c6c4a4b4d7ed1df8e5/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f6d6f74696f6e2d626c75722e706e673f763d31) |
MultiColorReplaceFilter @pixi/filter-multi-color-replace |
![multi-color-replace](https://camo.githubusercontent.com/e4f8f69115a0da66cc2b2c7eca8ebf93928407a10aa0d701aef415569a5cef47/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f6d756c74692d636f6c6f722d7265706c6163652e706e673f763d31) |
OldFilmFilter @pixi/filter-old-film |
![old-film](https://camo.githubusercontent.com/00f8f5bdcdd299b9b1ded8892535749e783721d68c6838800ff7053369a5099b/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f6f6c642d66696c6d2e6769663f763d32) |
OutlineFilter @pixi/filter-outline |
![outline](https://camo.githubusercontent.com/1f67f39267fc517b020e9000f5f0f44663a7652ff1f1c8020e8f79ca1f883a55/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f6f75746c696e652e706e673f763d32) |
PixelateFilter @pixi/filter-pixelate |
![pixelate](https://camo.githubusercontent.com/8a8593318f7b0cc670adcf6493dd35e12c6d8f6582f2b157863fc0967f8ebd27/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f706978656c6174652e706e673f763d32) |
RadialBlurFilter @pixi/filter-radial-blur |
![radial-blur](https://camo.githubusercontent.com/6f9396138447f843de34b5a9969197450426cfeb2cd383a909d132f144dd26f6/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f72616469616c2d626c75722e706e673f763d32) |
ReflectionFilter @pixi/filter-reflection |
![reflection](https://camo.githubusercontent.com/f66ce4e5158fd927fe40ad8ceabd0193615588c073aaaf1d209a06f14b187027/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f7265666c656374696f6e2e706e673f763d32) |
RGBSplitFilter @pixi/filter-rgb |
![rgb split](https://camo.githubusercontent.com/0042149770cd8fc5607272aafc1e7d158624f661a0d886eeb831a25d1d278fb5/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f7267622e706e673f763d32) |
ShockwaveFilter @pixi/filter-shockwave |
![shockwave](https://camo.githubusercontent.com/bdf9448157e5fd665c581bb40894792bf627baa4435a8e6595b3a9a8dff6f27b/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f73686f636b776176652e6769663f763d33) |
SimpleLightmapFilter @pixi/filter-simple-lightmap |
![simple-lightmap](https://camo.githubusercontent.com/15a247f8024ece47f77345745793ff93613552a35504d500ebaf8cdea57515d3/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f73696d706c652d6c696768746d61702e706e673f763d32) |
TiltShiftFilter @pixi/filter-tilt-shift |
![tilt-shift](https://camo.githubusercontent.com/72a363f90179210a2844953a1cc5be39666266ce440739b0f59b60526d5b795a/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f74696c742d73686966742e706e673f763d32) |
TwistFilter @pixi/filter-twist |
![twist](https://camo.githubusercontent.com/d2ea634ff4c89832213663589766bfcd4504afa4339004d42e8d0d32035a00b5/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f74776973742e706e673f763d32) |
ZoomBlurFilter @pixi/filter-zoom-blur |
![zoom-blur](https://camo.githubusercontent.com/c779cc5fa09ffd019cf17cf215aa75e16dcc6007767e2aab80f4e714481f2e58/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f7a6f6f6d2d626c75722e706e673f763d34) |
PixiJS has a handful of core filters that are built-in to the PixiJS library.
Filter |
Preview |
AlphaFilter |
![alpha](https://camo.githubusercontent.com/54b33e8ce77a03c2228da550342d82d0c58dd2644c14c3a12dabf530dabd0659/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f616c7068612e706e673f763d32) |
BlurFilter |
![blur](https://camo.githubusercontent.com/b6dcec6e609972288e52890eec4135e1dc2db39da3c9ad57f8bbe2fc6d21d0cb/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f626c75722e706e673f763d32) |
ColorMatrixFilter (contrast) |
![color-matrix-contrast](https://camo.githubusercontent.com/da6778397564fc04ffb8919d238159f0a0947e0efd8e2c98132375ab26638ae5/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d636f6e74726173742e706e673f763d32) |
ColorMatrixFilter (desaturate) |
![color-matrix-desaturate](https://camo.githubusercontent.com/fac8dcf3f756f50c08b6de25f81df3e26f4bf3e2402557ae23cb006f51ce1abc/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d646573617475726174652e706e673f763d32) |
ColorMatrixFilter (kodachrome) |
![color-matrix-kodachrome](https://camo.githubusercontent.com/7ffe72ef6ab70088157979b95c4451b1532f0f566dcc0a76298db52a6be6e6cb/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d6b6f64616368726f6d652e706e673f763d32) |
ColorMatrixFilter (lsd) |
![color-matrix-lsd](https://camo.githubusercontent.com/d499f70ff028b7c913c0abf9c7b790e08796b2eca09570814637b571169caee1/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d6c73642e706e673f763d32) |
ColorMatrixFilter (negative) |
![color-matrix-negative](https://camo.githubusercontent.com/822ff80c5779d5427b08a97eba18d4f006f06ff18ef6283b703dcff7fed94eba/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d6e656761746976652e706e673f763d32) |
ColorMatrixFilter (polaroid) |
![color-matrix-polaroid](https://camo.githubusercontent.com/8d424bfcec2be525002f4547f474d64eff8d97050c70e2b4268d5f76c1c6580f/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d706f6c61726f69642e706e673f763d32) |
ColorMatrixFilter (predator) |
![color-matrix-predator](https://camo.githubusercontent.com/8733fb48f0bc0279cd8c645c60da6791e9b25cdd15db2cb614c0990f955b37b4/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d7072656461746f722e706e673f763d32) |
ColorMatrixFilter (saturate) |
![color-matrix-saturate](https://camo.githubusercontent.com/83f3605e8bf516c3914abc777d35463c6f16cdebce22f46692c9707c66e13f70/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d73617475726174652e706e673f763d32) |
ColorMatrixFilter (sepia) |
![color-matrix-sepia](https://camo.githubusercontent.com/0473e29e7e0fac526962592e157109c2a8b86abe8d2481c2ce8fbc15921f0e90/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f636f6c6f722d6d61747269782d73657069612e706e673f763d32) |
DisplacementFilter |
![displacement](https://camo.githubusercontent.com/b9dba3dfc07f2c8896f11aa589c122c922249bd468ec58d9546ed60beccbe0c0/68747470733a2f2f66696c746572732e706978696a732e646f776e6c6f61642f6d61696e2f746f6f6c732f73637265656e73686f74732f646973742f646973706c6163656d656e742e706e673f763d32) |
NoiseFilter |
![noise](https://camo.githubusercontent.com/5d87696ede624afbfdbcf5a779e467da69d6fa5f98a7c5c53eae9e8dcd23dd8f/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.