Shayders Logo

Write GLSL. Watch it come alive.

A shader editor in your browser with a live WebGL preview, multipass buffers, texture channels and real GLSL tooling. The background is a shader too, move your mouse over it.

Start coding Explore the gallery

13 public shaders and counting, no account needed to start.

What's in the editor

From a quick gradient to a multipass simulation.

Live as you type

No Run button needed. Number and color edits hot-swap on the keystroke, structural changes recompile after a short pause. Drag the inline color picker and the canvas follows in real time.

Image ● 0.42ms
1vec2 uv = gl_FragCoord.xy / uResolution;
2vec3 dark = vec3(0.02, 0.03, 0.06);
3float f = fbm(p:uv * 1.6 + uTime);
4vec3 col = mix(x:dark, y:vec3(0.0, 0.55, 0.7), a:f);
5gl_FragColor = vec4(col, 1.0);

Multipass buffers

Chain up to 8 offscreen buffers, share helpers through a Common tab, and feed a buffer back into a channel for trails, blurs and simulations.

Common + Buffer A Buffer B Image

Texture channels

Four slots for images, videos, your webcam or another buffer, each with its own filter, wrap and flip settings.

Real GLSL tooling

Completion for builtins, locals and Common symbols, hover docs that show the matched overload, semantic highlighting.

Lint and quick fixes

Catches GLSL ES 1.00 pitfalls and unused or write-only symbols, fixes them with Alt+Enter. Compile errors land in the right buffer.

Built-ins reference

Every function, variable and uniform documented and searchable. Add uniforms in one click and read their live values.

Shadertoy import

Paste a mainImage shader and convert it to plain WebGL in one click.

Screenshots and video

Save WebP screenshots, record 60 fps WebM clips up to 5 minutes, go fullscreen with F.

Share and fork

Publish as public, unlisted or private. Fork any shader you like, browse creator profiles and search the whole gallery.

Jump right in

No account needed to start, drafts stay in your browser. Fonts, minimap, wrapping and hints are all in the editor settings.

Got an idea?

Start from a working gradient, or paste a Shadertoy shader you already have.

Open the editor