Pick your starting point

Select Language

This selector is the quickest way to launch ShaderGif with the right template for what you're trying to build. Choose a language below and we'll open the editor with a clean starter project, sensible defaults, and a setup that matches the runtime (canvas, uniforms, and preview behaviour).

What each option is for

JavaScript - best for small interactive sketches, quick experiments, and custom render loops.

p5.js - a friendly creative-coding workflow if you want simple drawing + animation primitives.

GLSL 1.00 - the most compatible shader profile (great for older devices and broader browser support).

GLSL 3.00 - a modern shader profile for newer WebGL2 contexts and cleaner syntax.

A quick performance note

Shaders run on the GPU, but the 'feel' of your preview depends on both the GPU and what the browser/CPU is doing (loading assets, resizing the canvas, compiling programs, and driving the render loop). If you're not sure where a slowdown is coming from, this simple explainer on CPU vs GPU helps you spot what's actually doing the work: CPU vs GPU: a simple guide.

Tip: If you're new here, start with GLSL 1.00 for compatibility, then switch to GLSL 3.00 once you've got a working sketch and want to clean up the code or use WebGL2 features.