Found these pics in a drawer and thought it'd be fun to share the journey of creating a CSS spec compliant gradient generator in 2023.
gradient.style
A CSS5 HDR color enabling gradient tool
Can even visualize effects using shorthands and DX tricks.
Gradients and Their Lines #
Here's a sketch of a linear gradient line. The top left image shows a triple color stop gradient, where the 2nd gradient stop uses the double position syntax to spread over more of the line than the other colors.
I'll be calling the colors in a gradient a color stop 🤓
There's also a depiction of transition hints and an inline color adjuster concept. I hadn't quite figured out how the color picker would work yet.
This next concept shows the sketched linear gradient line concept being tested with angles and various syntax.
Putting the concept to the test essentially! Testing how transition hints and double stop positions might work in practice.
Coding was the only way to fully test the solution, but still fun to see how far I could get on paper.
Here's some conic and radial gradient line concepts.
Stops & Hints #
Here are some concepts and depictions of the colors (or stops as I'll start referring to them as) on a gradient line.
Some more concepts of a color picker overlay too.
Stops can have 2 positions on the line, a start and end. Most people don't know this! I chose to visualize it by splitting the cirle into halves, each half representing a stop position.
Any 2 stops also have a transition hint between them, which is a value that indicates how the stop should transition to the next stop.
Here's more sketches of colors and hints. I have no idea what that math calculation means anymore.
These are more sketches testing out various gradients and their estimated visualizations.
GUI Explorations #
The UI needs to show a layers list view (which I still plan to enable more layers!), a gradient canvas preview, a color stops list view and the CSS output for copying.
I think a ✓ meant I liked the overall thumbnail idea.
How it turned out #
Here's a quick video of a basic, responsive, 2 stop gradient line with a custom transition hint; shown on each linear, radial and conic overlay.
Sketches lined up pretty good!
Well, I'm not done with it yet! I do want to add layers and background-image sizing. I think it'd make it the perfect tool for finely crafted gradients. Stay tuned!
