See it
Every idea comes with a diagram you can drag: turn space, blend the corners of a noise cell, step a ray towards a sphere.
Interactive shader programming course
Shaders finally make sense when you can move the numbers.
Short, hands-on lessons in shader code. Drag a value, watch every pixel react, then write the code yourself in HLSL, GLSL, WGSL, Metal or Godot's shading language.
float d = length(p); float inside = step(d, 0.30); return lerp(bg, gold, inside);
A lesson takes about ten minutes and ends with something on screen.
Check it
One quick question before you code. Wrong answers tell you what you mixed up.
Build it
Write the shader. A match bar fills as your picture gets closer to the target.
Take it to your engine
Pick your language at the top of the page. One click exports what you wrote.
Shader lessons, from your first pixel to ocean waves
Open the lesson list
Then 330 shader challenges
Recreate the target picture, then try to beat par with shorter code.
One lesson, every shader language
Write HLSL, GLSL, WGSL, Metal or the Godot shading language. The lessons, hints, starter code and exports follow the language you pick.
Guides for beginners
All guides- What is a fragment shader?A fragment (pixel) shader is a tiny function the GPU runs once for every pixel, all at the same time. See what it receives, what it returns, and write one yourself.
- HLSL vs GLSL vs WGSL vs MetalWhich shader language should you learn? Compare HLSL, GLSL, WGSL, Metal and the Godot shading language: where each runs, how the syntax differs, and how to move between them.
- How to learn shader programmingA practical order for learning shaders from zero: pixels and color, shapes, motion, repetition, noise, 3D ray marching and real effects. With the exact lessons for each step.
Frequently asked questions
What is ShaderBattle?
ShaderBattle is a free, interactive way to learn shader programming. Every lesson shows a target picture and you write the shader that draws it, live in your browser. A match bar tells you how close you are, and you can then try to shorten your code and speed it up.
What is a shader?
A shader is a small program that runs on the graphics card. A fragment (pixel) shader runs once for every pixel on the screen, all at the same time, and decides its color. Shaders draw lighting, water, fire, smoke, clouds and most of the visual effects in games.
Do I need to install anything?
No. Everything runs in your browser using WebGL 2. You do not need Unity, Unreal, Godot or a graphics driver beyond what your browser already uses.
Which shader languages can I learn?
HLSL (Unity Built-in, Unity URP, Unreal), GLSL (Shadertoy and WebGL, OpenGL, three.js, GameMaker, LÖVE), the Godot shading language, Metal (Apple platforms) and WGSL (WebGPU and Bevy). You switch language with one picker and the lessons, hints and starter code follow.
Can I use my shaders in a real game or app?
Yes. Every exercise has an export button that produces a complete, ready-to-paste file for your engine: a Unity ShaderLab file, an Unreal Custom node, a Shadertoy shader, a Godot .gdshader, a Metal file or a WGSL module.
I have never programmed a shader. Where do I start?
Start with the first lesson, "Every pixel, one function". The lessons are short and each adds one idea. If you already know a programming language such as C#, Java, JavaScript or Python you will feel at home quickly.
What is the daily challenge?
Every day there is one new target picture, the same for everyone. Recreate it in code and try to beat the par for code length. Past days stay open so you can catch up, and your day streak counts consecutive days you solved.
Does it cost anything?
No. ShaderBattle is free. You can create an account to keep your progress across devices; without one, your progress is saved in your browser.
Does it teach advanced effects too?
Yes. After the basics there are step-by-step series on ray-marched 3D, an ocean with Fresnel reflection and foam, volumetric clouds you fly through, a smoke grenade with bullet holes, snow with footprints, a campfire, rising smoke and a rain pond.