Shadertoy: the website that paints with pure math

Shadertoy is a browser-based gallery where every picture is not a file but a short program that runs on the graphics card and decides the color of each pixel, frame by frame. There are no brushes and no stored images, only code and math that redraw the scene many times a second.

It is one of those single-purpose corners of the web that looks like a toy and behaves like a small physics lab. A person can open it, watch an ocean or a fractal breathe, and never write a line of code. A person can also open the editor, change one number, and watch the whole universe on screen shift in response.

In brief

• Shadertoy is an online community and tool for writing and sharing shaders in the browser using WebGL, according to its Wikipedia entry.
• Pol Jeremias and Iñigo Quílez launched it in 2013, and it now holds tens of thousands of public contributions.
• Each piece is a tiny program that colors every pixel in parallel on the GPU, so the images are computed live rather than loaded.
• It rewards slow browsing: watch first, then open the code and change a value to see what breaks.

What Shadertoy actually is

The homepage looks like a video wall. Panels loop with glowing tunnels, liquid metal, drifting clouds and impossible planets, each one labeled with an author name and a view count. A visitor can treat the whole thing as ambient television and simply scroll.

Underneath, nothing is a video. Wikipedia describes Shadertoy as an online community and tool for creating and sharing shaders through WebGL, used for both learning and teaching three dimensional computer graphics in a web browser. The site is the stage, and the shaders are the performers.

That framing matters for a first-time visitor. The instinct is to treat the panels like clips and wait for them to end, but they never do. Each one is a loop with no last frame, a process rather than a recording. Realizing that is the moment the site stops looking like a video wall and starts looking like a workshop with the lights left on.

Each panel is a live program. Click one and the editor opens beside the moving image, showing the exact code that produces it. Edit the code and the picture updates as fast as the machine can recompile it. The gap between looking and tinkering is almost zero, which is the whole appeal.

How a picture made of math works

The trick sits in how modern browsers draw. WebGL is, in Mozilla's words, a JavaScript API for rendering high-performance interactive 3D and 2D graphics without plug-ins, closely conforming to OpenGL ES 2.0 and using the device's graphics hardware. That hardware is built to run the same small program over many pixels at once.

Shadertoy leans on one half of that pipeline: the fragment shader. A fragment shader is a function that runs once for every pixel on screen, in parallel, and returns a color. It is handed little more than the pixel's position and the current time, and from those few numbers it must decide what that point should look like.

So a Shadertoy image has no stored dots. For a thousand by a thousand grid, the GPU runs the same short program a million times, once per point, several dozen times a second. The author never places pixels. The author writes a rule, and the rule paints the frame.

This is why the work feels closer to mathematics than to drawing. To make a sphere, an artist does not model one. They write the condition for a point in space to count as inside a sphere, then let every pixel test itself against that condition. Color becomes the output of an equation evaluated everywhere at once.

Nothing about this is sequential. The GPU does not paint left to right the way a person would. It fires thousands of tiny copies of the same program at the same time, each responsible for its own pixel and blind to the others. The image appears all at once because, in a real sense, it is computed all at once.

Who built it, and why

According to Wikipedia, Shadertoy was developed by Pol Jeremias and Iñigo Quílez in January 2013 and came online that February. Both are computer graphics engineers, and the site grew out of an earlier Shadertoy section on Quílez's own teaching website, started after Firefox shipped WebGL support around 2009.

Quílez is widely known for a particular style of rendering whole scenes from distance functions, equations that return how far any point sits from the nearest surface. His articles on raymarching distance functions are a standard reference, and that approach is everywhere in Shadertoy work. A single function can describe an entire landscape, and the shader walks a ray through it to find what the camera sees.

The early content set the tone. Wikipedia notes that the first pieces showed raymarched metaballs, fractals and tunnel effects, the kind of thing that is hard to photograph and easy to generate from a formula. The site was a place to publish those experiments and compare notes, and that culture of sharing source alongside result never left.

Shapes conjured from equations

The dominant craft on Shadertoy is raymarching, a way to render solid scenes without any traditional geometry. Instead of a mesh of triangles, the artist writes a distance function, a formula that returns how far any point in space sits from the nearest surface. Quílez keeps a well-used catalogue of these in his reference on distance functions.

With such a function in hand, the shader sends an imaginary ray out through each pixel and steps along it. At every step it asks the distance function how much empty space is safe to skip, then jumps that far. When the distance drops near zero, the ray has struck something, and the pixel takes that surface's color.

The payoff is that complex worlds come from compact math. A sphere, a torus and a plane each reduce to one short line, and combining them is arithmetic: take the smaller of two distances to merge shapes, the larger to carve one out of another. Fold the coordinates and a single shape repeats across an infinite horizon.

Noise does the rest. Smooth pseudo-random functions turn clean geometry into terrain, clouds and water, and layering several at different scales produces the mountains and oceans that fill the gallery. None of it is stored. It is all regenerated every frame from a seed and a handful of operations.

The inputs that turn code into a toy

A shader that only reacts to position and time is pretty but static in spirit. Shadertoy widens the inputs so the math can respond to the world. Wikipedia lists supported sources including microphone, webcam, keyboard, mouse, VR headsets, SoundCloud, video and textures.

Those inputs change what is possible. Feed in a microphone and a shader can pulse with the room's noise. Feed in a webcam and a filter can warp a live face into oil or glass. Point and mouse data let a scene be steered, so a static formula becomes something a visitor can push around.

Shadertoy also supports what Wikipedia calls floating point buffer based multipass and history. In plain terms, a shader can read its own previous frames. That small feature unlocks simulations: smoke that keeps spreading, water that keeps rippling, ink that keeps diffusing, each frame built on the last rather than from scratch.

Sound can flow the other way too. Alongside visual shaders, Shadertoy supports audio shaders that compute a waveform the same way a fragment shader computes a color, one sample at a time from a formula. A piece can therefore generate its own soundtrack from math, so both the picture and the noise it makes come from code rather than from any recorded file.

What the community actually makes

The front page carries a Shader of the Week slot, a rotating highlight that functions as the site's editorial voice. During one recent visit it featured a piece called Light Cycle, with its view and like counts shown right beneath the moving image. The counters matter here, because a popular shader can collect tens of thousands of views.

Some pieces escape the site entirely. In 2018 a shader called Planet Shadertoy reached the front page of Hacker News with hundreds of points, a single program rendering a game-like planet with terrain, water and a flying camera. The Hacker News discussion picked apart how much of it was built from hand-written noise functions, which is exactly the kind of question the format invites.

The pattern repeats. In late 2025 a shader titled Human Fovea Detector climbed to the Hacker News front page with close to five hundred points, a small interactive demonstration of a quirk in human vision. Its Hacker News thread shows people opening it on phones and reporting what they saw, which is the clearest sign that a Shadertoy piece has landed.

The scale behind the gallery

The site is not a small experiment anymore. Wikipedia records more than fifty two thousand public contributions as of the middle of 2021, and the live feed of new shaders on the homepage keeps ticking over by the hour. The gallery is effectively bottomless, and much of its depth sits far below the featured row.

It also has a competitive streak. Wikipedia notes that Shadertoy runs annual competitions and events, including a contest at SIGGRAPH in 2015, the leading conference for computer graphics research. Such events push authors to cram startling results into severe size and time limits, and the standout entries often become reference material in their own right.

The culture around all this stays unusually open. Because every entry publishes its source, a competition does not end with a trophy and a locked file. It ends with a page of readable code that anyone can study, fork and argue about, which is why techniques spread across the community so quickly.

Why it rewards slow browsing

Shadertoy belongs to the same family as a sandbox or a generative art page, the sort collected at network sites like Sandpile. The reward is not a task completed. It is the quiet pleasure of watching a system run, and the slower tug of wanting to know how.

That second pull is what sets it apart from a screensaver. Every image ships with its source. A visitor who likes a particular swirl can open the code, find the one line that controls the swirl, and nudge it. The feedback is instant, so curiosity gets paid immediately rather than after an hour of setup.

It is also a surprisingly honest teaching tool. There is no hidden asset pipeline and no secret art department. What is on screen came from the characters in the editor, and nothing else. For someone trying to understand how graphics hardware actually turns numbers into light, that transparency is rare.

There is a gentle trap in all of this. A visitor arrives to watch something pretty for a minute, opens the code out of idle curiosity, changes a value, and surfaces an hour later having accidentally learned how a reflection works. The site never pushes. It simply leaves the door to the engine room wide open and lets the images do the inviting.

How to start without knowing GLSL

The first visit should involve no typing. Scroll the gallery, let a few shaders loop, and open one that refuses to leave the mind. The point is to build a sense of what the medium can do before worrying about how.

The second visit can be destructive in the best way. Open a simple shader, find a number, and change it. Make it bigger, make it negative, break it on purpose. Because the fragment shader reruns on every pixel every frame, a single wrong value tends to fail loudly and visibly, which teaches faster than any tutorial.

Breaking things is the fastest teacher here precisely because the feedback is total. Change the wrong constant and the screen may go black, flash white, or dissolve into static, and each failure points straight at whatever that number controlled. There is no compile, wait and guess cycle, only cause and effect at the speed of the frame rate.

From there the path is gentle. Shadertoy exposes a handful of standard inputs, time and resolution and mouse among them, and most beginner shaders use only those. The site's own back catalogue is the textbook: pick a small effect, read its few lines, and copy the idea into a blank shader to see if it survives the move.

One habit separates the people who stick with it from those who bounce off. Rather than reading a shader from top to bottom, they isolate a single visible feature, a glow, a ripple, a band of color, and hunt only for the lines that produce it. A screen of unfamiliar math stops being intimidating the moment it is treated as a stack of small, testable effects rather than one monolithic spell, and each effect can be muted or exaggerated on its own to reveal what it was doing.

None of this requires an account to simply watch. The code is visible on every public shader, and the full catalogue lives at shadertoy.com, where the newest contributions tick in by the hour.

FAQ

Is Shadertoy free to use?

Browsing and reading the code of public shaders is free and needs no account. An account is mainly for saving, publishing and commenting on work. Everything on the gallery can be watched and studied without signing up.

Do I need to know how to code?

No, not to enjoy it. Many visitors treat Shadertoy purely as a gallery of living images. The code is always there for the curious, but watching costs nothing and demands no prior knowledge of GLSL or graphics math.

Why do some shaders slow my computer down?

Because the work is real-time rendering, not playback. A complex shader asks the GPU to evaluate a heavy formula for every pixel on every frame, so an older or integrated graphics chip can struggle. Shrinking the browser window, which lowers the pixel count, often helps.

What makes Shadertoy different from a normal image site?

A normal site stores finished pictures. Shadertoy stores the programs that generate them, then runs those programs live in the browser. The result is computed in front of the viewer every frame, which is why the same page can respond to a mouse, a microphone or a webcam.