I’m not sure how I got there, but at some point I found myself on a Reddit page that was highlighting the use of gradient images as desktop wallpaper. These posts are… common - take a look at this query, and you’ll see dozens if not hundreds of folks posting their variations on gradient desktop wallpaper.

It’s not that uncommon to need a gradient between any two colors for a website, background, wallpaper, icon, or other design element. And rather than defaulting to a desktop image or vector editor, I thought it would be a fun experiment to work with AI to create a page that would enable easy online generation of these images or vectors.

The solution Claude and I came up with is here: CSS gradient generator tool.

The Problem

CSS gradients are incredibly useful for creating visually appealing backgrounds, but getting the syntax right can be tricky. The linear-gradient and radial-gradient functions have specific syntax requirements, and tweaking colors and stops often requires multiple iterations to get the desired effect.

I wanted a tool that would:

  • Provide a visual interface for creating gradients
  • Generate clean, copy-paste CSS code
  • Alternatively generate the gradient as an SVG
  • Alternatively generate the gradient as a PNG image
  • Allow for banded gradients, with a user specified number of segments
  • Allow for switching the orientation of the gradient between horizontal and vertical
  • Allow real-time preview of changes
  • Require no server-side components (create the entire interface and gradient generation via HTML/CSS/JS)

The Process

If you use Claude via its web interface (vs. agentic code generation via Claude Code via the CLI or VSCode plugin), it gives you the option to generate a link to the conversation that took place in order to generate the code in question. So rather than detail the process here, I’ll just provide you the link to the conversation that took place in order to generate the code:

The session with Claude that generated the Gradient Generation tool

Future Enhancements

While the current tool works well for its intended purpose, there are a few enhancements that could make it even more useful:

  • Support for radial gradients
  • Multiple color stops (3+ colors)
  • Preset gradient collections
  • Export options (CSS variables, Sass mixins, etc.)

Try It Out

You can try the gradient generator here and see the code in action. It’s a simple tool, but I’ve found it surprisingly useful for quickly generating gradients for various projects.