How I Built a Gradient Generator (And Why You Might Want to Use It)
Téo Goulois
So I needed gradient backgrounds for some blog posts I was writing. Nothing crazy, just some nice blurred gradient images to make the posts look less boring.
I checked out what was available - there are actually quite a few gradient generators out there. But here's the thing: most of them either cost money, or they're way too complicated for what I needed, or they just don't generate the kind of aesthetic I was going for.
I wanted something like what Polar.sh uses on their blog - those smooth, blurred, shader-based gradients. They look really clean and modern. But working directly with shaders felt like overkill for my use case. I just wanted to generate some images quickly, not write GLSL code every time I needed a background.
The Problem with Existing Tools
I found one tool that did exactly what I wanted, but it was a paid product. Which is totally fair - people should get paid for their work. But for my specific need (making blog images), paying a subscription felt like too much.
So I thought: how hard could it be to build something similar?
Narrator: It wasn't that hard, actually.
What Makes a Good Gradient Generator
After building Better Gradient and using it for a while, I realized what actually matters:
Speed. If I need to click through five menus to export an image, I'm not going to use it regularly. The whole point is to generate something quickly.
Customization when you need it. Sometimes you want to hit "randomize" until something looks good. Sometimes you want precise control over each color point. Both workflows should be easy.
Good defaults. The random generator should produce gradients that actually look decent most of the time. Not just random colors thrown together.
Multiple export options. PNG for images, SVG for scalable stuff, CSS if you want to use it directly in code. And maybe a share link so you can show someone else.
That's basically what I built into Better Gradient.
How It Works
The core idea is pretty simple: you place color points on a canvas, and they blend together with a blur effect. The blur is what makes it look smooth instead of harsh.
I built it so you can:
Start with randomize - Hit the button until you see something you like
Adjust individual shapes - This is my favorite feature. Each color is actually a shape you can edit, move, resize, change opacity
Fine-tune the blur - More blur = softer, less blur = more defined
Export however you need - PNG, SVG, CSS code, or just grab a share link
The single shape edition is probably the most powerful part. You can click on any color blob and adjust it specifically. Want that blue to be bigger? Drag the handles. Want it more transparent? Slide the opacity. Want it in a different position? Just move it.
If you want more details on how everything works, I put together a guide with some video examples that walks through all the features.
Why I Made It Free
I could have made this a paid product. But honestly, I built it for myself first, and it felt weird to charge for something that:
Solved my own problem
Wasn't that hard to build once I figured it out
I want other people to use
Plus, I'm still adding features. It's in beta. The core functionality is there, but I'm exploring new ideas and seeing what people actually need.
If it helps you make your projects look better, that's cool. That's the whole point.
What's Next
I'm still working on it. Some features I'm thinking about:
WebP export format (better compression for web)
More color palettes to choose from
Preset collections (curated gradients that just work well)
API access (generate gradients programmatically)
Text editor (add text directly on the gradient)
But I'm also just seeing how people use it. If everyone asks for the same feature, I'll probably build it.
Try It Out
If you need gradient backgrounds for anything - websites, blog posts, app designs, whatever - give it a shot: better-gradient.com
It's free, no signup required. Just open it and start making gradients.
And if you have ideas for features or find bugs, let me know. I'm still figuring out what this should be.