Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


CSS-Shader is a wrapper that allows to easily set CSS shaders via JavaScript.

It leverages the possibility to define shaders via data URL so that you don't have to put the shader code into a separate file on the filesystem.

It allows you to set and modify shader properties conveniently, without having to forge that complicated CSS String yourself.

This, it enables to easily build tools like the CSS-Shader Playground.

In addition, it provides an animate() method, which executes the shaders in a loop using requestAnimationFrame.



For a demo, visit the CSS-Shader Playground.

Note that CSS Shaders require Chrome 25, and CSS Shaders enabled in chrome://flags/.

#API Reference

There's an API reference over here:

You can create a local version of the reference using a terminal. Go into the CSSShader directory and run the following command:

$ make doc


Including the css-shader.js file will add an CSSShader constructor to the global scope.

Alternatively, you can use an AMD loader such as RequireJS, or a CommonJS loader to load the module, and you will receive the constructor in your load callback (the constructor will then, of course, have whatever name you call it).

You can then create a CSSShader instance:

var shader = new CSSShader();



The blend mode. Defaults to 'normal'. See for details.


The composition method. Defaults to 'source-atop'. See for details


The vertex mesh setup. Defaults to '40 40'. See for details.



Pass a node reference or a node id, and CSS-Shader will take the node's innerHTML and use it as vertex shader.


Uses the passed string as vertex shader.


Pass a node reference or a node id, and CSS-Shader will take the node's innerHTML and use it as fragment shader.


Uses the passed string as fragment shader.


Takes the passed Object and uses them as shader args.


  lighting: 0.4,
  pos: '0.1 0.0 -0.9'

###setShaderArg(name, value)

Sets one shader arg.


shader.setShaderArg('lighting', 0.4);


Sets the passed node reference or the node given by id as render target; i.e. sets the node to which the CSS shaders will be applied.


Executes the shaders on the the render target.


Starts running an animation; this means CSS-Shader will execute render() in a loop using requestAnimationFrame.

In addition to your custom shader args, a variable called time of type float will be passed to your shaders, containing the elapsed time in ms.


Pauses the animation.


Resumes the animation.

#Browser Support

Currently, only Chrome 25+ supports CSS Shaders. You need to enable CSS Shaders in chrome://flags/.




MIT. For details, see the LICENSE file in the repository.


CSS-Shader is a wrapper that allows you to easily set CSS shaders via Javascript.







No releases published


No packages published