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. Soft, layered color blobs that bleed into each other — the sort of thing that looks effortless when it works and painfully obvious when it doesn't.

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 colored blobs positioned on a canvas. Each layer has its own color, 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 color 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.

Palettes are the other half

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 color). You can generate palettes from color harmony rules — complementary, analogous, triadic, split-complementary, tetradic — all computed in OKLCH color 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 gray). 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 color engine around OKLCH — a perceptually uniform color space. This matters because traditional RGB and HSL color spaces produce gradients that go muddy in the middle. A gradient from blue to yellow in RGB passes through an ugly gray. In OKLCH, the same gradient stays vibrant because the color space is designed around how humans actually perceive color.

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

How it's built

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 color 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 randomize colors. 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.