CSS Gradient Builder: Fixing Annoyances of Existing Tools

Last Tuesday I needed a conic gradient. Not a linear one, not a radial one — specifically a conic gradient for a loading spinner I was building. I opened three different gradient generators. None of them supported conic gradients. The ones that did were buried under ads, tracking scripts, and cookie consent banners that took longer to dismiss than the actual gradient took to build.

TL;DR: GradientForge is a free browser-based CSS gradient builder that fixes the annoyances of existing tools — it supports linear, radial, and conic gradients, provides real-time preview with no ads or tracking, outputs clean CSS with vendor prefixes, and includes preset collections for common design patterns.

So I spent my afternoon building GradientForge instead.

The Problem With Existing Gradient Tools

I tested the three most popular gradient generators before writing a single line of code. Here's what I found:

cssgradient.io is the go-to recommendation on Stack Overflow answers from 2019. It handles linear and radial gradients well enough, but it's slow. The page loads with trackers, analytics, and display ads competing for bandwidth. When I tested on a throttled 3G connection, first meaningful paint took over four seconds. For a tool that should generate a CSS property in under a second, that's unacceptable.

Grabient looks beautiful — I'll give it that. But it's primarily a preset gallery with limited customization. Want to add a third color stop? That's buried in the interface. Want conic gradients? Not available. Want to export as SVG for a design file? Nope.

uiGradients follows the same preset-only pattern. Pick from a curated list, copy the CSS. No custom stop positions, no angle fine-tuning, no easing control. It's a gradient menu, not a gradient builder.

Every single one of these tools was missing at least one thing I needed: conic gradient support, easing between color stops, SVG export, or just basic speed. I wanted all of those in one place.

What GradientForge Actually Does

GradientForge supports all three CSS gradient types: linear, radial, and conic. You pick your type, adjust the parameters, and see the result update in real-time on a full-screen canvas preview. The CSS code appears below, ready to copy with one click or keyboard shortcut (Ctrl+C when nothing is selected).

The color stop system works the way it should. Click a color picker, drag the position handle along the gradient bar, or type an exact percentage. Double-click the bar to add a new stop at that position — the tool interpolates the correct color automatically. You can have up to 10 stops per gradient, which covers every practical use case I've encountered.

The feature I'm most proud of is the easing system. Standard CSS gradients transition linearly between color stops, which often produces muddy middle zones where colors mix in ugly ways. GradientForge generates additional intermediate stops that follow an easing curve — ease-in, ease-out, ease-in-out, or stepped transitions. The result is smoother, more visually pleasing gradients without manual fine-tuning of each stop position.

Here's what happens technically: when you select an easing function, the tool interpolates 8 additional color stops between each pair of your original stops, positioning them along the chosen easing curve. The browser sees a gradient with many stops, but the transitions follow a cubic or stepped curve instead of a linear one. The output CSS is longer, but the visual result is noticeably better, especially for gradients spanning complementary colors.

How I Built It

GradientForge is a single HTML file with inline CSS and JavaScript — zero dependencies. No React, no Tailwind, no build step, no node_modules. The entire tool is about 36KB — smaller than most hero images. It loads in under 100ms on any modern connection.

The architecture is straightforward state management. A single JavaScript object holds the current gradient configuration: type, angle, color stops, easing mode, and type-specific parameters. Every time any control changes, the entire UI re-renders from that state object. It sounds wasteful, but with only a few DOM elements to update, each render cycle takes under 2ms.

The color stop bar uses pointer events for drag handling. Each stop is a positioned div inside the bar container. On mousedown, I capture the element, switch to mousemove tracking on the document (not the bar — that prevents losing the drag when the cursor moves fast), and compute the percentage position from the cursor's X coordinate relative to the bar's bounding rect. Touch events follow the same pattern for mobile support.

For color interpolation, I convert hex colors to RGB components, interpolate each channel independently, and convert back. This happens in sRGB space, which isn't perceptually uniform — I'd like to add OKLCH interpolation in a future version for even smoother results. But for most practical gradients, sRGB interpolation is indistinguishable from perceptual to human eyes.

The SVG export translates CSS gradient parameters into SVG gradient elements. Linear gradients map directly to <linearGradient> with computed x1/y1/x2/y2 coordinates derived from the CSS angle. Radial gradients use <radialGradient> with center positions. Conic gradients don't have a native SVG equivalent, so the tool falls back to a linear approximation — not perfect, but useful enough for most design workflows.

The URL State Trick

Every gradient configuration is encoded in the URL query parameters. Change a color, move a stop, switch the type — the URL updates silently via history.replaceState. This means you can share a gradient by sharing the URL. No accounts, no saving to a database, no server-side state. The recipient opens the link and sees your exact gradient configuration ready to use.

The encoding is compact: gradient type is a single character (l/r/c), stops are comma-separated hex:position pairs, and type-specific parameters use short keys. A three-stop linear gradient with easing encodes to about 120 characters in the URL — short enough to paste in a Slack message without it looking intimidating.

Privacy and Performance

Everything runs in your browser. There's no server processing, no analytics tracking your color choices, no data leaving your machine. The tool works completely offline once loaded — I included a service worker that caches all assets. Install it as a PWA and you've got a native-feeling gradient builder that works on a plane.

I ran Lighthouse on the deployed version: 100 across all four categories. Performance, accessibility, best practices, SEO — all perfect scores. That's what happens when your entire app is 36KB of self-contained HTML with proper ARIA labels and semantic markup.

12 Built-In Presets

Sometimes you don't want to build from scratch. GradientForge includes 12 presets — Sunset, Ocean, Forest, Flame, Night, Peach, Arctic, Berry, Candy, Mint, Dusk, and Neon. Click one to load it, then customize from there. They're starting points, not endpoints.

The presets also serve as a discovery tool. If you're not sure what conic gradients look like, hit the Random button. It generates a random type, random angle, random colors, and random number of stops. Hit it ten times and you'll have a better intuition for what each gradient type does than reading any tutorial could give you.

Dark Mode and Mobile

The interface respects your system color scheme preference automatically. No toggle needed — though I might add one in a future update for users who want to test their gradient against both backgrounds. On mobile, the layout shifts from a side-by-side view (preview + controls) to a stacked view with the preview on top and controls scrollable below. Touch targets are 44px minimum for comfortable thumb navigation.

I tested at 320px width (iPhone SE), 768px (iPad), and 1440px (desktop). The gradient preview always takes up as much space as possible — that's the point of the tool, after all. Controls compress but remain usable at every breakpoint.

What's Next

I have a short list of features I want to add: OKLCH color interpolation for perceptually smoother gradients, a gradient animation builder (because CSS can animate gradient positions), multi-gradient layering (stack multiple gradients on one element), and an accessibility checker that warns when your gradient doesn't meet contrast requirements for text overlays.

For now, GradientForge does exactly what I needed: build any CSS gradient, with any number of stops, with smooth easing, in any of the three gradient types, and copy the result in one click. No ads, no tracking, no signup. Just gradients.

Try GradientForge →

FAQ

Does GradientForge support conic gradients?

Yes — this was the primary motivation for building it. Most existing CSS gradient generators only support linear and radial gradients. GradientForge supports all three types: linear, radial, and conic, with full control over angle, color stops, and positioning.

Is GradientForge free to use?

Completely free, with no ads, tracking scripts, or account requirements. It runs entirely in your browser — no data is sent to any server.

What browsers support conic gradients?

All modern browsers support conic gradients: Chrome 69+, Firefox 83+, Safari 12.1+, and Edge 79+. GradientForge includes vendor prefix options for broader compatibility and shows a browser support indicator for each gradient type you create.