Back to projects

GradientframeCSS Gradient Editor

Concept, design & development2026-09
Next.jsTypeScriptTailwind CSS

A CSS gradient editor built to explore, compare and fine-tune an effect quickly.

I made it after running into the limits of existing tools myself: too many steps to experiment, few ways to compare variants, and a preview that often has little to do with the real context.

frontend
Live
Gradientframe — CSS Gradient Editor — image 1
1 / 6

Features

  • 58 %

    Move stops by dragging or by typing an exact value

  • Spread and shift whole groups of stops

  • Duplicate to compare several variants

  • Preview on an image, a colour or transparency

  • Six frame formats

  • background-image:
    linear-gradient(128deg,
      rgba(255,255,255,0) 20%,
      rgba(255,255,255,.5) 52%);

    CSS export

Live ↗