WebGL & shaders

Fluid GLSL Gradient Generator

Fluid Studio is a browser-based GLSL editor for making animated gradient backgrounds one layer at a time. Ribbons, blobs, and soft washes provide the color, while voids, vortices, and displacement fields change how those layers move and overlap. The palette, material, motion, grain, and output size are all adjustable. Finished scenes can be saved as a PNG, portable JSON, or a standalone WebGL page.

What it does

  • Build a composition with up to eight pigment or modifier layers.
  • Shape ribbons with Bézier handles and position elliptical blobs, washes, voids, vortices, and displacement fields directly on the canvas.
  • Tune six-color palettes, sRGB or OKLab interpolation, warp, motion, pointer response, lighting, material, grain, dither, and vignette.
  • Create controlled random variations while preserving the current palette or material.
  • Generate an exact-loop animation or let the scene run freely.
  • Share a complete scene in the page URL and move settings between sessions as validated JSON.
Fluid StudioGLSL composition editor
1920 × 1080
100%

How to use Fluid Studio

  1. Start from a scene

    Choose Iridescent, Lagoon, Sorbet, or Ultraviolet, or randomize the current composition.

  2. Build the layer stack

    Add ribbons, blobs, washes, or flow modifiers, then select a layer to edit its shape, appearance, and motion.

  3. Tune the scene

    Adjust the shared palette, material finish, warp, animation loop, quality, frame rate, and output dimensions.

  4. Preview and export

    Inspect the scene without editor chrome, then download a PNG, standalone HTML background, or portable scene JSON.

Formats, compatibility, and limits

Inputs

  • Layer geometry and motion edited with controls and direct canvas handles.
  • Palette, material, warp, animation, texture, and output settings.
  • Optional Fluid Studio scene JSON pasted into the import editor.
  • Optional shared-state URL produced by Fluid Studio.

Outputs

  • A PNG rendered at the configured output dimensions.
  • A standalone HTML file containing a specialized GLSL shader and minimal WebGL 2 runtime.
  • Versioned scene JSON for later editing, download, or clipboard copy.
  • A copied URL containing the encoded scene state.

Compatibility

  • The editor and exported HTML require WebGL 2.
  • Output presets cover 16:9, 4:3, square, portrait, and story formats, with custom dimensions available.
  • The interface includes a responsive compact layout, although the three-panel editor is easiest to operate on a larger screen.

Known limits

  • A scene can contain no more than eight layers.
  • Canvas dimensions must stay between 256 and 4096 pixels per side, with a maximum area of 8.3 megapixels.
  • PNG export is a still frame; the editor does not export a video file.
  • A shared link stores the complete scene in its query string and is rejected when the encoded state exceeds the built-in size limits.

Privacy and processing

  • Composition data is generated and rendered locally in the browser.
  • Scene JSON and PNG or HTML files are created with local Blob URLs rather than uploaded by the editor.
  • Share links encode the scene in the URL; Fluid Studio copies that URL but does not send the scene to a separate storage service.
  • The editor does not persist compositions in localStorage or IndexedDB.

How Fluid Studio turns layers into GLSL

Fluid Studio stores each visible layer as a small set of geometry, color, effect, and motion values. Its WebGL 2 fragment shader evaluates curved ribbons, elliptical pigment fields, voids, vortices, and directional displacement. The active layers and the shared palette, material, warp, texture, and lighting settings reach the shader as uniforms. During standalone export, the editor validates the scene, removes unused layer slots, and bakes the remaining values into a specialized fragment shader with a small canvas runtime. The exported background keeps its loop and pointer behavior without needing the editor.

Questions about Fluid Studio

Can Fluid Studio export the animated gradient?

Yes, as a standalone HTML page with its own WebGL 2 runtime. The PNG option exports one still frame rather than a video.

Can I reopen a Fluid Studio composition later?

Yes. Save the scene JSON and paste it into the import editor when you return. A share link also works because it carries the encoded scene state in the URL.

Does a shared scene get uploaded?

No separate scene upload is performed. The complete state is compressed when possible, encoded into the URL query string, and copied to the clipboard.

Why are output dimensions sometimes reduced?

The editor limits output to 4096 pixels per side and 8.3 megapixels so that PNG and standalone rendering remain within its supported canvas budget.