We Couldn't Find a Gradient Tool That Did What We Needed, So We Built One

We were mid-project — deep in a client build — trying to nail down an aura gradient for a hero section. You know the kind: soft, layered colour blobs that bleed into each other, the sort of thing that looks effortless when it's done right and painfully obvious when it's not.

We opened every gradient tool we could find. Coolors is excellent for palettes. Josh Comeau's gradient generator handles easing beautifully. Grabient is quick and clean for linear gradients.

But none of them let us do what we actually needed: layer multiple radial gradients on top of each other, control each one independently, adjust opacity and stretch per layer, and see the result in real time. And that was just for aura gradients — we hadn't even started on mesh or marble.

So we did what any self-respecting studio does when the tools don't exist. We built one.

What Gradient Galore actually does

Gradient Galore is a browser-based gradient editor that handles six gradient types: linear, radial, conic, aura, marble, and mesh. The first three are table stakes. The last three are why we built it.

Aura gradients are layered radial gradients — soft coloured blobs positioned on a canvas. Each layer has its own colour, position, size, opacity, stretch, and rotation. You can show and hide individual layers, reorder them, and drag them around on the preview canvas.

Mesh gradients work similarly but with tighter, more defined colour regions. Each point is a radial gradient with configurable spread.

Marble gradients use SVG filters to create organic, paint-like patterns. You control the scale, blur, seed, rotation, and blend mode. Every combination produces something different.

All three types support a background gradient layer underneath — so you can combine a linear gradient base with aura blobs on top, for example.

The palette connection

The other half of the tool is a full palette system. You can create palettes from scratch in an immersive full-viewport editor (think Coolors, but with tints, shades, and tones displayed per colour). You can generate palettes from colour harmony rules — complementary, analogous, triadic, split-complementary, tetradic — all computed in OKLCH colour space.

Every palette generates a complete shade scale from 50 to 950, plus true tints (base to white), shades (base to black), and tones (base to grey). You can export as Tailwind config, CSS custom properties, JSON, or a plain hex list.

The palette editor also includes a contrast checker with WCAG AA/AAA badges, OKLCH fine-tuning sliders, and palette-wide hue/saturation/lightness adjustments.

Why OKLCH matters

We built the entire colour engine around OKLCH — a perceptually uniform colour space. This matters because traditional RGB and HSL colour spaces produce gradients that go muddy in the middle. A gradient from blue to yellow in RGB passes through an ugly grey. In OKLCH, the same gradient stays vibrant because the colour space is designed around how humans actually perceive colour.

Every shade scale, every harmony calculation, every adjustment slider operates in OKLCH. The results are noticeably better — colours that feel intentional rather than mathematically convenient.

The stack

For anyone curious about the technical side:

• React Router 7 with SSR for the framework
• Tailwind CSS 4 for styling
• Jotai for client-side state management
• Drizzle ORM with PostgreSQL for persistence
• OKLCH colour math — all conversions written from scratch, no dependencies

The gradient preview renders in real time. Aura and mesh gradients use layered CSS radial gradients for simple cases and switch to absolutely positioned div layers when rotation is involved. Marble gradients render entirely as inline SVG with blur filters.

Try it

Gradient Galore is free and open. If you're working on a project that needs something beyond a simple linear gradient, give it a go. Press spacebar to randomise colours. Lock the ones you like. Export the CSS when you're done.

We built it because we needed it. We're sharing it because we think you might too.