Skip to content
This repository has been archived by the owner. It is now read-only.
CSS FilterLab
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
shaders Updated shaders to use <col, row> order to specify the mesh because t… Nov 1, 2012
tests moving qunit.html out of the tests folder Oct 18, 2012
LICENSE fixing licenses Sep 8, 2012

CSS FilterLab


This repo is unmaintained and has been archived.

Supported Browsers

CSS FilterLab uses CSS Filters, an exciting web technology that's becoming available in more and more browsers. Check out Can I Use for availability information.

Articles about FilterLab

Introducing CSS FilterLab by Razvan Caliman at Adobe

CSS FilterLab Detailed Walkthrough from Alan Greenblatt's blog

Note: These articles mention CSS Custom Filters, an experimental technology no longer available in CSS FilterLab.

Contributing to FilterLab

Pull requests are reviewed and accepted.

Check out our contributing page for more info.

Running FilterLab Locally

Git Submodules

The CodeMirror library is linked as a git submodule. After you clone the project on your machine you'll need to setup the submodules and pull in their code.

cd ./path/to/css/filterlab/
$ git submodule update --init


CSS FilterLab uses Grunt.js to concatenate and minify JavaScript & CSS resources. Grunt.js is build on nodejs, so if you don't have it already installed, go to node.js website and follow the instructions to install it. After that use the command line node package manager to install grunt.js:

$ sudo npm install -g grunt

The grunt.js project file uses other node.js modules. To quicly install all the required libraries run "npm install" in the project folder.

cd ./path/to/css/filterlab/
$ sudo npm install

You also need to make sure you have Ruby & Sass installed. If you're on OS X or Linux you probably already have them installed. Try ruby -v in your terminal. When you've confirmed you have Ruby installed, run sudo gem install sass to get Sass.

To build CSS FilterLab, you need to run the "grunt" command line tool in the project folder. This will generate the "dist/" folder.

cd ./path/to/css/filterlab/
$ grunt

File System Access

CSS FilterLab requires XHR access, but that doesn't work very well when loaded from file:// URLs. For that reason running CSS FilterLab requires serving it from a server. The easiest way to do that on a Mac would be to use python's simple server:

cd [./path/to/css/filterlab]/dist/
python -m SimpleHTTPServer

Open http://localhost:8000 in your browser.


Notices, terms and conditions pertaining to third party software are located at and incorporated by reference herein.


Copyright 2012 jQuery Foundation and other contributors

MIT license

jQuery UI

Copyright (c) 2012 Paul Bakaus,

MIT license


Copyright (c) 2002-2011 The ANGLE Project Authors. All rights reserved. Use of this source code is governed by a BSD-style license that can be found in the LICENSE file.

This JavaScript library was automatically generated from the ANGLE project using emscripten

For more information go to ANGLE.js


Copyright (C) 2012 by Marijn Haverbeke

MIT License

You can’t perform that action at this time.