CSS FilterLab Experiment

Getting Started

Click on the Add Filter button on the top left corner to start exploring available filters you can apply on the sample content.

• Built-in filters are those that are available by default in your browser.
• Custom filters use GLSL shaders and provide textures & effects that are not possible with built-in filters.
• Forked custom filters are filters that you create, stored locally. If you think they are worthy of being available as custom filters for everyone to use, please contribute!
• Import via Gist allows you to open a GitHub gist file that contains a shader and see how it works on the sample content.

Apply filters by clicking on them. You can tweak them for cool effects using the controls they display once activated. Controls to reorder filters, toggle them on or off, and to remove them are available next to their names.

Once you're happy with your tweaks, use the Save as Preset button, located above the sample content, to save them for later.

Animating Filters

Check out the Timeline controls on the lower end of the screen. You can use them to create animations with filters.

• Make sure to apply at least one filter using the Add Filter menu.
• Click anywhere along the timeline to move the playhead to that position.
• Now, make some changes to the applied filter parameters.
  This creates a new keyframe on the timeline.
• Click the play button from Timeline panel to view your animation. Use the input field next to the timeline to change the animation's duration.
• The controls next to the play button allow you to navigate through keyframes and toggle them on or off.

CSS Output

As you make changes to the filters you'll see the corresponding CSS output in the CSS Syntax panel. The same goes for animations and the CSS Animation Syntax panel.

This is valid CSS code you can reuse in your own projects.

Creating Custom Filters

• Click on Add Filter, select the Custom filters tab and fork one of the filters.
• Your forked filter will appear under the Forked Custom filters tab. Click the edit icon next to it to reveal the editor and make changes.
• You can change the filter's parameters or even edit the Vertex and Fragment shaders. The Error Panel helps you identify errors.
• Shaders are written in GLSL (OpenGL Shading Language).
• Your changes are saved automatically and stored locally.

Sharing your filters

• Use the Publish as Gist button from the editor panel to share your filter as a gist on GitHub.
• Share that gist URL with others.
• Other people can use that gist URL to import your filter using Import via Gist from the Add Filter menu.

Contributing to CSS FilterLab

If you would like to get your filter in the Custom Filters directory, please submit a pull request to our GitHub repository.

We do require you to sign a Contributor's License Agreement so we can use your filter within CSS FilterLab.