So I decided to take Claude Code for a spin and see what all the fuss was about. As a developer who’s constantly tweaking CSS gradients for projects (and getting frustrated with online tools that are either too basic or way too complicated), I thought: why not build my own?
The Idea
You know that moment when you need a perfect gradient but all the existing tools either crash your browser or give you some wonky CSS that doesn’t work? Yeah, that’s exactly why I wanted to build this. Something simple, fast, and actually useful for day-to-day work.
Demo: https://jelontok.com/dev/css-gradient-generator/
Code: https://github.com/jelontok/css-gradient-generator
What I Built
The tool ended up being pretty straightforward but covers all the essentials:
- Linear and radial gradients - because sometimes you need that circular fade
- 16 different directions - from basic “to right” to specific angle degrees
- Unlimited color stops - add as many colors as you want
- Real-time preview - see changes instantly
- One-click CSS copying - the most important feature, honestly
- Quick presets - for when you just need something that works
- Keyboard shortcuts - because mouse clicking gets old
The Claude Code Experience
Here’s the thing - I was skeptical at first. How good could an AI be at understanding what I actually want to build? But honestly, it was pretty smooth.
The conversation flow felt natural. Instead of having to write detailed specs or draw mockups, I just described what I wanted: “I need a gradient generator that doesn’t suck.” Claude Code got it immediately and started asking the right questions about features and implementation.
What impressed me most was how it handled the iterative development. When I said “the color picker feels clunky,” it knew exactly what to fix. When I wanted to add keyboard shortcuts, it didn’t just add random shortcuts - it actually thought about which ones would be useful for this specific tool.
Tech Stack (Keep It Simple)
I kept the stack intentionally minimal:
// No frameworks needed
const gradientGenerator = {
html: 'structure',
tailwind: 'styling', // because I'm not writing custom CSS for a CSS tool
javascript: 'vanilla' // sometimes simple is better
};Claude Code was great at working within these constraints. It didn’t try to over-engineer things or suggest adding React “just because.” It understood that sometimes simple is better.
The Result
The final tool does exactly what I needed - creates gradients quickly without any fuss. The CSS output is clean, works across browsers (Chrome 26+, Firefox 16+, Safari 7+, Edge 12+), and includes fallbacks for older browsers.
Most importantly, I actually use it. That’s the real test of any developer tool - do you reach for your own creation when you need to get work done? In this case, absolutely.
What’s Next?
This was more of an experiment to test Claude Code’s capabilities, but I’m pretty happy with how it turned out. The tool is open source if anyone wants to contribute or use it as a starting point for their own projects.
As for Claude Code itself? I’m convinced. It’s not just about generating code - it’s about having a development partner that actually understands what you’re trying to build and why. For quick projects like this, it’s a game changer.
Now if you’ll excuse me, I have some gradients to generate for my actual work. 🎨