02 · Gradient Forge: a free animated mesh gradient studio

A working in-browser tool for making animated gradient backgrounds. The whole page is one live WebGL2 shader, with dark frosted-glass panels floating on top. You press space and the palette reshuffles in front of you. When you like it, you copy a self-contained snippet and paste it into any page. That loop, shuffle then paste, is what makes people stop.

Inspiration

The Mesh style follows the Stripe gradient recreations (minigl, whatamesh): a base colour, with each other colour laid over it through a stretched simplex noise ridge shaped by a pow() mask. From InstantGradient it takes the spacebar palette shuffle by harmony rule, several shader styles on one set of controls, fluted glass, dither and halftone effects, and readable state in the URL. From NEAT it takes normalized sliders, grain controls, render scale as a performance slider and JSON config export. Shader Gradient supplies the shareable-URL idea. Cult UI supplies the fluted-glass and dither look.

Added on top, per the code: colour blending in OKLab inside the shader, colour locks so a brand colour survives a shuffle, dither that snaps to the palette's own colours, a CSS fallback sampled from a real rendered frame, palette undo, shift+space to shuffle everything, and an eased ping-pong WebM loop.

Visual direction

References

Why these choices

The product is the picture, so the gradient gets the full viewport and the chrome stays small. Dark glass with white text stays readable over any palette, pastels included.

Each shader is compiled per style and per enabled effect (getProg keys on style plus an effect bitmask). Disabled effects cost nothing, and the exported snippet carries only what it uses. The app runs the same minified shader it exports, so the export cannot drift from the preview. The snippet is also polite: it uses powerPreference:"low-power", pauses offscreen through an IntersectionObserver, stays still under reduced motion, and keeps a CSS gradient on the canvas as a no-WebGL2 fallback.

Trade-offs: render scale and a device-pixel-ratio cap of 1.5 trade sharpness for frame rate. Chromatic split samples the whole scene three times, and halftone adds another sample, so those effects are the expensive ones. The CSS fallback is a loose approximation of the live frame and looks muddier. Fonts load from Google Fonts, so the studio is not fully offline, though the exported snippet has no dependencies.

Who this kind of site is for

Who uses the tool itself. Anyone who needs a background for an HTML page or an artifact. The workflow: open the studio, lock the client's brand colour, tap space until the harmony looks right, nudge speed and grain, then press E and copy the snippet. Paste it into the body of a landing page or an artifact and the background is done. Use "Fill parent element" for a hero section, "Full page background" for the whole page. The CSS fallback tab covers email and print, PNG 4K covers decks and social posts, and the WebM loop covers video. Because the link tab stores every setting in the URL, a teammate can reopen the exact look. It saves the time of describing a gradient to a model in words.

Where this style wins. Free utilities and lead-magnet tools for agencies, internal team tooling, product pages for design or developer tools, and anything where "we make our own tools" is the message. It also suits a StarForge training session: a live shader tool shows non-developers what a single prompt can produce.

Where it is the wrong call. Content-heavy local business sites (a bakery, a plumber) where readability and load speed matter more than spectacle. Also pages that must work on older phones, since the whole page depends on WebGL2.

Pitch or reuse. Offer it as a branded giveaway: re-skin the panels with a client's colours and fonts, ship it as their "free gradient generator," and collect leads on the export step. Internally, keep it as the team's standard background maker.

How to make it

Stack and key techniques

The prompt

Build "Gradient Forge": a free, in-browser animated mesh gradient studio for a small agency's team to make backgrounds for HTML pages and artifacts. It is a real tool with no fictional client. One file, index.html, no libraries, no build step.

Concept: the whole page is one fullscreen WebGL2 canvas running a live gradient shader, with frosted-glass panels floating over it. The product is the picture, so the chrome stays small and neutral.

Visual direction: UI glass is rgba(9,9,13,.52) with backdrop blur, text #f6f4ef, white as the only accent. Default "Forge" palette: #0b0420, #4a1fb8, #ff3d81, #ff9e2c. Fonts: Instrument Serif italic for the wordmark and intro, JetBrains Mono for all controls (11px, tiny uppercase labels, 2px slider tracks). Layout: top bar with shortcut hints and Shuffle, Pause, Hide, Export buttons; Look panel left (style switch, colour rows, harmony select); Tune panel right (14 sliders in groups Motion, Shape, Colour, Finish, plus Render scale, and four effect toggles with strength); a preset strip of 14 thumbnails along the bottom, each thumbnail rendered by the shader. Under 860px the panels become a four-tab bottom sheet.

Signature moments:
1. Intro: giant wordmark whose letters rise in one by one, a pulsing "press space for a new palette" pill, panels fading in with a stagger, then the intro clears after about 2.6 seconds or on first input.
2. Space reshuffles the palette using a harmony rule (analogous, complementary, triad, split, monochrome) built in OKLCH with gamut clipping. Locked colours survive a shuffle and the harmony builds around them. Shift+space shuffles everything. Z undoes. Arrow keys cycle presets, P pauses, H hides the UI, E opens export.
3. Five scenes: Mesh (stretched simplex ridges over a base with a pow mask), Liquid (domain-warped fbm), Silk (stacked sines with lighting from finite differences), Wave (layers casting soft shadows), Aurora (additive curtains). Blend colours in OKLab inside the shader.
4. Four optional effects: fluted glass, chromatic split, rotated halftone, and a Bayer 8x8 dither that snaps to the palette's own colours. Plus grain and vignette.
5. Export dialog with four tabs: a standalone snippet (one canvas, one script, same minified shader, pauses offscreen, honours reduced motion, CSS gradient fallback on the canvas), a CSS fallback sampled from a real rendered frame, JSON (editable, with Apply), and a share link. Downloads: PNG at 1x, 2x and 4K, and an 8 second ping-pong WebM loop.

Requirements: 2 to 6 colours with hex entry and a native picker; state stored in the URL hash and localStorage, sanitised on load; compile shader variants per style and per enabled effect only; render-scale slider; dpr cap of 1.5; pause when the tab is hidden; handle context loss; show a styled fallback if WebGL2 is missing; respect prefers-reduced-motion by starting paused; keyboard focus styles; no horizontal overflow at any width.

Verification loop: serve the file, then take screenshots at 1440 and 1100 wide and at phone width in all four sheet tabs. Check the console for errors. Test every shortcut, every export tab, Apply JSON, PNG download, a WebM recording, and paste the exported snippet into a bare page to confirm it draws and animates. Fix anything that overflows, wraps or fails, and repeat until clean.

Build notes

Stepping down: what you would likely lose

This is an informed estimate, not a measurement. No public benchmark compares these exact models on one-shot frontend work. The reasoning rests on the spec table, Anthropic's own pages, earlier-generation reviews and extrapolation. I am Sonnet 5.5 writing about myself, so treat the Sonnet column with the same caution as the rest.

Feature Opus 5.5 (likely outcome) Sonnet 5.5 (likely outcome)
Mesh and Liquid scenes (simplex noise, domain warp) Does fine; these are well-known patterns Does fine, though the Mesh look probably lands closer to a plain noise gradient than the Stripe feel
Silk lighting and Wave cast shadows Attempts it, with small errors such as harsh normals or shadows that band Likely simplifies it away to plain layered sines with no lighting or shadow
OKLab blending with palette uniforms Does fine Attempts it with a likely bug: a sign or matrix slip that gives off colours, or gamut-clip artefacts
Palette-snapped Bayer dither and rotated halftone Attempts it with likely bugs, such as the dither snapping to the wrong colours Likely simplifies it to ordinary ordered dither or a flat dot grid
Snippet export that runs the same shader Does fine Attempts it with a likely bug: the exported shader drifting from the live one, or leaked uniforms
WebM loop recorder Attempts it; the cold-start empty file is a trap even Fable hit Likely ships the naive recorder and saves empty or short files
Harmony shuffle, locks, undo, URL state Does fine Does fine, with likely small lapses (undo after lock, hash round trip)
Shuffle-by-space feel, intro choreography and mobile sheet Does fine Likely fewer layered touches, a plainer intro, and some mobile overflow

Rough overall estimate, as a judgment call: Opus 5.5 likely keeps about 85 to 95 percent of the impact in one pass, with the gap mostly in shader polish. Sonnet 5.5 likely keeps about 60 to 75 percent, because the finer shader effects and export correctness are where it is most likely to simplify or slip. The Fable-to-Opus gap looks small here, since the hard parts are well-documented techniques. Evidence for that is thin.

What closes the gap: a screenshot feedback loop with a real browser, and splitting the build into shader, then colour and UI, then export, so each part is verified before the next.

← Previous reportNext report →