ShaderGif is a public gallery of GIFs generated from real-time GLSL shaders. It’s built for shader learners, creative coders, and anyone who wants to study, remix, or publish small visual experiments. Use search and topic tags to explore, then open any entry in the editor to see how it works.
Browse recent shader GIFs
A continuously updating feed of shader-made GIFs. Each entry includes a preview, author credit, publish date, view count, and quick actions.
What you can do from the gallery
- Open in editor: Load the shader source and parameters so you can learn, tweak, and re-render.
- Search: Find works by title, author, or topic keyword.
- Explore by topic: Jump into common shader patterns like raymarching or noise textures.
- Save and share: Publish your own entry with a stable page that others can link to.
Entry details you’ll typically see
- Title (short description of the visual)
- Author (profile/handle)
- Date published
- Views and community reactions
- Launch in editor action for learning and remixing
About ShaderGif
ShaderGif is an open gallery for shader experiments rendered to compact, loopable GIFs. The goal is simple: make shader work easy to browse, easy to learn from, and easy to share as a lightweight format.
What “shader GIF” means here
Most entries begin as a fragment shader (GLSL) that renders a scene per-frame. ShaderGif captures a short animation loop and publishes it as a GIF preview, while keeping the underlying shader source available to open and study.
Who it’s for
- Beginners looking for practical GLSL examples you can actually run
- Experienced shader artists who want a simple publishing format
- Teachers and students who need small, linkable demos
- Creative coders exploring procedural art, lighting, and SDF techniques
Before you embed a bunch of shader GIFs into a real site, run your page through a website speed score analyser on Tech IT EZ to catch any LCP/CLS regressions early.
Start coding
If you want to create your own entry, the fastest route is to start from a known working example and iterate.
Recommended first steps
- Open an example to confirm your device/browser runs WebGL smoothly.
- Modify one thing at a time (colour palette, camera, lighting, or a single function).
- Keep loops short and avoid heavy branching until you have a stable baseline.
- Render a loop (a few seconds) that looks good when repeated.
- Publish with a clear title and relevant tags so others can find it.
Tips for higher-quality results
- Prefer stable time functions for seamless loops (e.g., periodic motion)
- Keep contrast readable in small previews
- Don’t rely on tiny details that disappear at GIF resolution
- Test both dark and light UI modes if your piece is low-contrast
Documentation & resources
If you’re new to shaders, start with the fundamentals and then return to the gallery to see those ideas in real use.
Core concepts that help most people quickly
- Coordinates & aspect ratio: mapping UVs, normalising space
- SDF basics: circles, boxes, blending, repetition
- Lighting: diffuse/specular terms, normals, simple shading models
- Noise & textures: value noise, fbm, procedural patterns
- Raymarching: stepping through a distance field efficiently
Project + contributing
ShaderGif is developed openly. If you want to report an issue, suggest features, or contribute code, check the project repository and issue tracker. Clear reproduction steps and screenshots help a lot, especially for rendering bugs or browser-specific issues.
Topics to explore
Browse collections of work grouped by common shader techniques:
- Raymarching – distance fields, volumetric looks, SDF scenes
- Integer – bitwise tricks, pixel/voxel aesthetics, discrete maths
- Texture – procedural patterns, sampling techniques, tiling
- Fractal – iterative structures, escape-time visuals, folding
- Automata – rule-based motion, reaction diffusion, cellular systems
- Voronoi – cell noise, crackle patterns, organic textures
Version & changelog
ShaderGif is actively maintained, with periodic updates to the editor, gallery browsing, and rendering pipeline. When behaviour changes (for example, WebGL compatibility or export quality), it’s noted in the changelog so older links and expectations remain understandable.
Get started:
- View the docs
- GLSL quickstart: fragment shader basics
- Browse examples to learn common patterns
- How to make a perfect loop
- Check out the blog
Last updated: 27 December 2025