CSS-Shader Playground

CSS-Shader is a wrapper that allows you to easily set CSS shaders via Javascript. For more info, scroll down to the "Info" section.

NOTE: In addition to your custom shader args, CSS-Shader passes a float called "time" which contains the elapsed time in ms.

Load Preset:

Stop/Continue Running:


Shader Args

Vertex Shader

Fragment Shader



To share your shader settings with your friends, just copy the URL and send it to them!

CSS-Shader is available on GitHub.

CSS-Shader is brought to you by Jens Arps: Twitter / Google+