Rron Nushi

I Needed a Specific Gradient, So I Vibe Coded My Own Tool

—

by

Rron
in , , ,

I needed a specific style of gradient for a project and got tired of fighting with existing generators to get the exact look I wanted. Realizing it would be faster to just build my own tool, I vibe coded a lightweight, web-based gradient generator in one sitting.

It runs entirely in the browser and focuses on fast tweaks, repeating lines and crisp edges. I also added randomization options to quickly iterate and experiment.

What it does:

  • Three gradient types: Linear, radial, and conic.
  • Blending modes: Toggle between smooth blends and sharp, banded lines.
  • Stop controls: Add, adjust, or right-click to remove color stops directly on the track.
  • Fast randomization: Hit Space to shuffle the whole look, or randomize individual variables (colors, line density, origin point).
  • Export options: Copy the raw CSS with C or download high-res PNGs cropped for wallpapers, banners, and mobile sizes.
  • Clean view: Hit H to hide the UI and preview full screen.

You can mess around with it here: rronnushi.github.io/GradientGen

Let me know if you run into any weird edge cases or have preset ideas.