Project
Roulette

CSS Gradient Composer

Build a multi-stop gradient by dragging stops, then copy the CSS.

BeginnerWeb appDev tool6–12hAI-buildable 5/5no setup

A gradient editor with a real stop track: drag stops along it, add and remove them, change colours, switch between linear, radial and conic. Copy-ready CSS updates live. Small, immediately useful, and the stop-track interaction is a genuinely good drag exercise.

UI
Logic
Useful

Hosting · Free forever

Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.

Deploy it and share a link.

Core features · 7

  • A track shows colour stops that drag to reposition
  • Stops can be added by clicking the track and removed individually
  • Each stop has a colour picker and an editable position
  • Switch between linear, radial and conic types
  • Angle control for linear and conic gradients
  • The generated CSS updates live and copies to the clipboard
  • A large preview area shows the result

The interesting part

  • Dragging a stop past its neighbours without the list order breaking
  • Serialising every gradient type to correct CSS syntax

Once it works

  • Add gradient interpolation in different colour spaces
  • Save a library of gradients
  • Import an existing CSS gradient string

Suggested stack

reacttypescripttailwind

Track it