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

bg-[linear-gradient(90deg,#8b5cf6_0%,#38bdf8_100%)]

background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 50%, #38bdf8 100%);

I Needed a Wallpaper, and Accidentally Spent an Evening Building a Gradient Machine

It was supposed to take five minutes. That’s the whole story, really — every project I’ve ever started has the same opening line, and this one is no different.

I needed a desktop wallpaper. Something calm, something with a nice blend of colors, nothing busy. I had a rough idea in my head — a deep purple fading into a warm pink, maybe a hint of blue at the edge. The kind of thing that takes about ten seconds to imagine and, it turns out, about four hours to actually make.

I opened a design program. Too heavy, and honestly I’d have to relearn where everything moved since the last update. I tried a website. It wanted me to make an account to download my own gradient. Another one only let me export in some weird size that wasn’t my screen. Another one’s gradients looked great in the thumbnail and terrible at full resolution, all banded and stripey.

Four hours later I had a wallpaper I didn’t even like, six browser tabs open, and a new personal rule: never again.

So I built GradStudio. It’s a gradient image generator. It does exactly one thing, and it does it without making me want to throw my laptop out a window.

The thing about gradients that nobody warns you about

Here’s what I learned the hard way: a gradient that looks smooth on a little preview can fall apart when you blow it up to wallpaper size. You get banding — those ugly visible stripes where one color steps into the next. It’s a real thing, and it’s the difference between “smooth sunset” and “pixelated logo from 1999.”

Most of the tools I tried didn’t care about this. They’d show me a pretty little swatch, then hand me a low-res file and call it a day. The gradient looked fine at 200 pixels wide. At 2000, it looked like a mistake.

So the first thing I made sure of was that GradStudio renders the image at the actual resolution you ask for. Not a stretched thumbnail. Not an upscaled blur. The real thing, drawn pixel by pixel at whatever size you pick. That one decision fixes most of the problems that sent me down this rabbit hole in the first place.

What it actually does

I wanted it to be the tool I wished I’d found at 11 p.m. that night. So it does a small number of things, and none of them are buried in menus.

Pick a shape. Linear, radial, or conic. Linear is your everyday “color fades across the screen.” Radial glows out from the middle, which is gorgeous behind a logo or a profile picture. Conic sweeps around in a circle like a color wheel — weird, but occasionally exactly what you want, and every other tool I tried treated it like an afterthought.

Set your colors. You can have two, three, or more, placed wherever you want along the gradient. There’s something deeply satisfying about dropping a third color right in the middle and watching the whole thing suddenly get three times more interesting. It’s the difference between “default gradient” and “wait, did you actually design that?”

Pick a real size. This is the part I’m genuinely proud of, because it’s the part every other tool got wrong. You choose a resolution — 1080×1080 for a post, 1920×1080 for a wallpaper, 1600×600 for a hero banner, or full 4K — and it renders your gradient at exactly that size. No surprises when you open the file.

Download it. A PNG, crisp and clean, straight to your device. No account, no email, no “please subscribe to unlock 4K.” Your gradient, your machine, done.

And if you’re building a website instead of making art, it also gives you the CSS. Same gradient, one line of code, no image file needed. That’s the version of me who does web work talking, and he’s usually the one who started these 1 a.m. projects in the first place.

The presets are the secret weapon

I should admit something: I rarely start from scratch. Most of the time I click one of the presets — there’s a sunset, an ocean, a purple, a mint, an aurora thing that does the color-wheel sweep — and then I nudge it until it feels like mine.

There’s no shame in that. Choosing two colors that look good together is genuinely hard, and anyone who says otherwise has never stared at a color wheel at midnight trying to figure out why everything they pick looks like a sports team’s rejected logo. Starting from something that already works, and tweaking it, is a real workflow. It’s how actual designers work, it turns out. I just accidentally reinvented it.

And there’s a random button, for when I want to be surprised. Sometimes the random button gives me garbage. Sometimes it gives me something I’d never have picked myself and it becomes my wallpaper for the next three months. That’s the fun of it.

Why I’m telling you all this

I could just describe the features. “Generate gradients, download them, here’s the button.” But the features were never the point. The point was the 11 p.m. frustration that came before them — the account sign-ups, the low-res exports, the banding, the tabs.

If you’ve ever had that night, the one where a five-minute task ate your whole evening, then you already understand why I built this. And if you haven’t, well — now you have the tool ready for when you do.

The whole thing runs in your browser. Nothing uploads anywhere, nothing asks for your email, and the gradients you make are yours. That’s not a feature I list in a table. It’s just the way it should have been all along.

Go make something smooth.