CSSbackground: linear-gradient(90deg, #8b5cf6 0%, #38bdf8 100%);

background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);

I Spent Three Hours Matching Two Colors, So I Built a Tool That Does It in Seconds

There’s a moment every web developer knows. It’s usually around 1 a.m. You’re staring at a button that should look modern and instead looks like it was styled in 2007. The fix, you’re sure, is “just a nice gradient.” Easy. Ten minutes, tops.

Four hours later you’re still there, dragging color sliders around, googling “nice gradient combinations,” copy-pasting hex codes from some old blog post, and wondering why the whole thing looks like a frozen cocktail that someone dropped on the floor.

I have lived that night more times than I’d like to admit. So eventually I did what any slightly-obsessive person does when a small task keeps eating their whole evening: I built a tool to do it for me.

It’s called GradLab. It’s a CSS gradient generator. And it exists because I got genuinely tired of opening five tabs every time I needed a background that didn’t look like a mistake.

The lie that “gradients are easy”

Everyone says gradients are easy. And sure, the syntax is easy. linear-gradient, a couple colors, an angle, done. Five lines of CSS. Nothing to it.

But the syntax being easy is not the same as the gradient being good. The hard part was never writing the CSS. The hard part is choosing two colors that don’t look terrible next to each other, and an angle that doesn’t make your text unreadable, and a direction that doesn’t make people squint. That’s the part that takes three hours. That’s the part nobody tells you is going to eat your night.

The code was never the problem. The taste was the problem. And taste is hard to automate — but it’s very easy to preview, which turns out to be almost the same thing.

What GradLab actually does

The idea is stupidly simple: you see the gradient while you make it, and you copy the exact CSS when it’s right. No guessing, no refreshing, no “let me just tweak it and check.” That’s the whole pitch.

But I threw in a few things that make it genuinely pleasant, because I’m the one who has to use it.

Three types of gradient. Linear, radial, and conic. Linear is your everyday workhorse. Radial is for that soft glow behind a logo or a spotlight effect. Conic is the weird one that sweeps around in a circle like a color wheel — I rarely need it, but when I do, every other tool I’ve used makes it feel like an afterthought, so I made sure it’s a first-class citizen here.

Color stops you can actually fiddle with. Each stop has a color, a position, and you can add or remove them freely. Add a third color in the middle, drag the positions around, watch the gradient respond instantly. This is the part I use most, honestly — a two-color gradient is fine, but a three-color one with a carefully placed middle stop is what separates “that’s nice” from “how did you do that.”

It copies in the format you actually need. Here’s where most gradient tools annoy me. They hand you CSS, and only CSS. But I work in Tailwind half the time, and SCSS the other half, and translating between them by hand is exactly the kind of busywork that makes me close a tab. GradLab has a little toggle — CSS, Tailwind, or SCSS — and it gives you the right code for each. It even does an “add a fallback color” option for the three people still supporting browsers from 2013, and an “animated” option that generates the keyframes for a slowly shifting gradient, because those are weirdly popular and weirdly annoying to write from scratch.

Presets and a random button. Because sometimes you don’t want to design, you just want to pick. I built in a handful of presets — the kind of gradients that look good basically everywhere — plus a random button for when you want to be surprised. Most of my actual projects start with a preset and get tweaked from there. It’s a genuinely better workflow than starting from two random colors.

The part I actually care about

Look, I’m not going to oversell this. It’s a gradient generator. It’s not going to change your life. It’s the kind of small tool that makes a small thing slightly less annoying, and that’s exactly the amount of ambition I had for it.

But there’s a quiet satisfaction in building the thing you kept wishing existed. For years I’d sit down to “just add a nice gradient” and end up in a rabbit hole of color theory blog posts and abandoned attempts. Now I open GradLab, click a preset, nudge a stop, copy the Tailwind class, and I’m done before my coffee goes cold.

That’s it. That’s the whole feature list. The entire point is that I don’t have to think about it anymore.

Before you ask

A couple of honest notes.

The gradients it generates use modern CSS, which means they work in every browser anyone’s actually using in 2024 and beyond — no vendor prefixes needed. If you’re somehow still supporting a browser older than my niece, that’s what the fallback color is for, and honestly, that’s between you and your project manager.

And yes, it runs entirely in your browser. No account, no upload, no “sign up to download your gradient.” Your gradient stays on your machine until you paste it somewhere. Which is how it should be.