Meet Flow and Beam: Two New Shader Styles, Built In-House

Every shader style in InstantGradient so far came from an open-source library. Good libraries, and they still power five of the styles in the editor. But there was a ceiling: I could tune their sliders, not their look.

So I built a shader engine into InstantGradient and wrote two styles from scratch. They are called Flow and Beam, and they are live in the generator now, alongside the five existing styles. Here is what they do.

Flow: currents of color

Flow is the new default style. It moves like slow water: big swirling currents that carry your palette around the frame, with soft luminous edges and plenty of calm space between them.

Under the hood it uses curl noise, the same trick fluid simulations use to fake convincing smoke and water. The math guarantees the field has no sources or sinks, so the color never pools in one spot or drains out of another. It just keeps circulating. That is why Flow reads as continuous currents instead of random wobble.

The controls that matter:

• Scale sets how big the currents are, from tight eddies to one lazy frame-wide swirl.
• Openness widens the first color of your palette into calm negative space. Low values pack the frame with color, high values leave room to breathe. This is the slider to reach for when a hero background needs a quiet zone for text.
• Drift and Speed control the motion. Flow is tuned to crawl, so even at higher speeds it stays composed.
• Seed reshuffles the composition without touching your colors.

Soft, mid-range palettes suit it well:

Beam: light on dark

Beam is the opposite idea. Instead of filling the frame, it crosses it with a single soft ray of light, like an aurora or a searchlight cutting through the dark. Most of the frame is near-black negative space; the beam is the whole composition.

Two details make it work. First, your palette is laid out along the beam, corner to corner, so every color appears in order as a sequence travelling its length. Second, the background is not plain black: it is your palette's darkest color crushed most of the way toward black. A warm palette leaves a faintly warm dark, a cool one a faintly cool dark, so the beam never looks pasted onto a foreign backdrop.

Its controls:

• Width goes from a thin laser line to a broad aurora wash.
• Angle rotates the beam anywhere in the full 360 degrees.
• Glow controls how far the light bleeds into the dark around it.
• Scale and Seed reshape the gentle bend of the beam's path.

Beam is the first style built on negative space, which makes it the easy pick for anything that carries text on top: hero sections, slide backgrounds, album art, OG images. Vibrant palettes that would be too much full-frame look great compressed into one ray:

Why build shaders in-house

Owning the shader means owning the whole pipeline. Both new styles were designed for the things InstantGradient users actually do with gradients:

• They animate properly. Motion was designed first, not bolted on. Flow's currents circulate continuously, and Beam's filaments crawl slowly along the ray. Both export as MP4 video.
• Exports match the preview exactly. The same engine renders your on-screen preview and your export, so a 4K or 8192px file is the design you saw, not an approximation. No banding either, grain is built in.
• Effects work on them. Halftone, dithering, and glass all apply to Flow and Beam the same way they do to every other style.

That is seven styles in the editor now. Press tab to cycle through them with your palette intact, and spacebar for new colors, so trying all seven with any palette takes about ten seconds.

FAQ

Are Flow and Beam free? Yes. Every shader style is free to design with, and 1x PNG export is free. MP4 video export, 4K, WebP, and custom dimensions are Pro.

Which style should I use for a website hero? Beam if the hero carries text: the dark negative space gives you contrast for free. Flow with high Openness is the softer light-background option. More in gradient backgrounds for websites.

Can I export them as video? Yes, both export as MP4 at up to 4K. Motion is where these two styles show off, so preview them animated before deciding.

Do the new styles work with my saved palettes? Yes. Styles and palettes are independent: open any community palette in the generator, then tab over to Flow or Beam.

Keep reading

• Animated gradient backgrounds
• Gradient backgrounds for websites
• Grainy gradients: how to add texture
• Make a 4K gradient wallpaper
• Browse palettes by mood