MakeGradient
I built MakeGradient as a browser-based creative instrument: fast enough to play with, polished enough to ship from.
- Role
- Product design + engineering
- Surface
- WebGL studio + export ecosystem
- Stack
- React, TypeScript, Vite, OGL
- State
- Live at makegradient.com
The whole studio, moving as one surface
This is the product in its natural state: canvas first, controls close by, exports always within reach.
I wanted gradients that felt made, not configured.
Most browser gradient tools are useful, but the output often feels flat. I wanted a small studio where the canvas, controls, and exports all felt like one product.
The visual problem
A gradient can be technically correct and still look generic. I started from depth, grain, motion, and color blending instead of CSS syntax.
The handoff problem
The gradient also had to leave the tool. Code, image, video, Figma, and embed exports were part of the product from the beginning.
Small controls that make the renderer feel tangible
Preset browsing
I wanted presets to feel like quick starting points, not a template library.
Export options
Export is treated as part of creation, not a final utility drawer.
Layer intent
The toggle keeps the editor honest about what the user is changing.
Noise as a finish
Grain is a small control, but it changes the surface from synthetic to finished.
Motion speed
The dial makes motion feel tuned by hand.
Color editing
Color edits happen against the rendered field, where the decision actually matters.
Responsive control density
The layout can shrink, but the gradient stays the main character.
Browser-native
I wanted it to run in a normal browser, not feel like a heavy creative app pretending to be lightweight.
Readable controls over maximal knobs
The controls needed enough range to be useful, but not so much that the first screen felt like a shader editor.
Creative instrument, not form builder
I borrowed from instruments and lab equipment: visible state, direct manipulation, and controls that invite play.
Export is part of the product
A gradient tool is only useful if the result can leave the tool cleanly.
Distribution should teach
The gallery and generator pages help people understand the engine before they touch the editor.
The shipped surfaces
Export paths for real design workflows
I kept the export UI explicit about tradeoffs. Some gradients can become editable approximations; some need raster fidelity.
The export UI explains the tradeoff instead of pretending every WebGL effect can become native vector data.
Searchable surfaces that teach the engine
The gallery and generator pages make the product understandable before someone opens the studio.
The product ecosystem includes public pages that are useful to visitors and legible to crawlers.What I learnt
MakeGradient is a small product, but it shows how I think: craft the output, make the controls feel understandable, and treat handoff as part of the experience.
The hardest part was not the interface chrome. It was getting the gradient to feel alive without losing control. I spent a lot of time tuning OKLCH blending, grain, motion, and density so each gradient mode had its own character instead of one generic color wash.
It also changed how I work with AI coding tools. I use them well when I treat them as fast collaborators for scaffolding, refactors, and edge cases. The taste decisions still stay with me: what to keep, what to remove, where the control should live, and when the output finally feels right.
If I keep pushing it, I want to improve the preset system, make export tradeoffs even clearer, and give users more confidence when they move from play to production.