FragCoord
fragcoord.xyz- Category
- Developer Tools
- Rank
- No. 3296Tools index
Previous survey · No. 3177 ·
- Pricing
- Free
- Type
- APP
- Use case
- Coding · Design & Media
- Interfaces
- Web
- Date
About
A powerful WebGL2 shader editor that lets developers write, debug, and share GLSL fragment shaders directly in the browser. Perfect for graphics programmers and creative coders working on visual effects and GPU-based rendering.
At a glance
FragCoord is a browser workbench for writing shaders, small GPU programs that draw an image pixel by pixel. Code sits beside a live preview, so a change in a colour or formula has a visible result. It is worth trying for learning shader graphics or sketching a visual effect without setting up a graphics project first.
Good fit
Creative coders who want a short edit-and-see loop. In a blank anonymous session, a one-line GLSL shader produced a solid blue preview; changing its colour values and resuming playback produced red. Templates, reusable snippets, adjustable uniforms and multiple rendering passes provide room to progress beyond that first experiment.
Consider something else when
You expect every shader to drop unchanged into a game engine or exported web page. Language conversion is marked experimental, and standalone exports support narrower inputs and buffers than the live editor. Gallery access also does not grant reuse rights: check each author’s licence before incorporating someone else’s code.
Start here
Choose New shader, then Blank or a template. Change a colour value and check the preview with Auto enabled. Resume Play if a paused edit leaves the preview blank; the trial needed playback resumed to display the second colour. Save requires sign-in. Inspect Export for your target format before building an effect around features that target cannot carry.
Cost and requirements
The free plan lists unlimited public shaders and up to 50 Personal, Unlisted or Invite-only shaders. Pro is $20 per month for unlimited non-public work, API access and advanced buffers, among other additions. The AI assistant has a hosted credit mode or a bring-your-own-key mode for Anthropic and OpenAI-compatible providers. Provider requests and costs are separate from ordinary manual editing; the documented hosted trial allowance is unspecified.
Limits to know
The successful colour trial used WebGL2, not a WebGPU compatibility benchmark. WebGL HTML export excludes compute and native WGSL passes; WebGPU HTML has its own restrictions, including no full audio, webcam or keyboard parity. New saved shaders default to Personal according to the docs, while Public publishes to Explore. AI requests send context to a model provider; no key, model call, save, export or device permission was tested.
Related work
Still unclear
- How many hosted AI credits are included, and what are the overage rules?
Sources checked 2026-10-30. Source-based assessment.
What it can do
Write GLSL fragment shaders
GLSL code → Executable fragment shader
Debug GLSL fragment shaders
Fragment shader with potential errors → Error messages and debugging information
Share GLSL fragment shaders
Fragment shader project → Shareable link or exported shader code
Render visual effects in real-time
Fragment shader code → Real-time visual output in browser
Execute GPU-based rendering
GLSL fragment shader → GPU-rendered graphics
Edit shaders in browser
Shader source code → Modified shader code with live preview
Why it made the leaderboard
Write, debug, and share GLSL fragment shaders directly in the browser — a WebGL2 editor that removes the compile-reload loop from shader experimentation.
Tags
Media
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.