Filter-Rich JS Image Effects Library – glfx.js

glfx.js is a JavaScript library for applying effects to images using WebGL.

The library has a wide set of built-in-filters including brightness/contrast, curves, sepia, hue/saturation, noise, lens blur, tilt shift, hexagonal pixelate and much more.


glfx.js has 3 parts:

  • texture: a raw source of image data (created from an <img> tag)
  • filter: an image effect (represents one or more WebGL shaders)
  • canvas: an image buffer that stores the results (a WebGL <canvas> tag)

Every filter comes with different variables that can be configured to create custom effects.

Although WebGL is supported by most modern browsers, not by all of them yet (check if your browser supports it).