LOVE this – thanks for getting it in there!!
Couple pieces of feedback after playing with it for a few minutes in the Beta Playground.
Draggable Color Stops
I spent a little longer than I’d like to admit trying to figure out if my browsers were just not letting me drag the color stops to new positions since they look like handles that can be dragged. But I’m now guessing they’re not intended to be moved around ?
For example, on https://cssgradient.io, you can specify the specific location of each color stop can be dragged, or specifically set in the Stops area to the right.
Palette in Global Colors
I see that when creating a gradient in an element, there’s a column for Palette that lets me select other global colors to use in the gradient. However, when creating a gradient in the Globals section, that palette pane is not visible. Is there a technical reason for this? That’s the spot I’d like to set up branded gradients using other global colors, so I miss the ability to directly select global colors there.
Tooltips on Copy/Paste
When I first started poking around, I wasn’t sure what the copy/paste buttons were. So, I hovered over them, but they didn’t provide tooltips so I wasn’t sure what they did at first.
Color Stop UI Feedback
Other than the dragability I mentioned above, I’m finding the blue selected state on the capsules a little confusing – because at first glance, it looks like all colors are set to either white or blue.
Instead, I’m wondering if you can use that particular color stop’s color value as the highlight state. For example:
Though, they still all look like handles (and I see use a slider-handle class) . So I would still expect to be able to slide them given this particular UI.
Other UI Feedback
In general, I’m finding the that I have to scan back and forth across this new UI a bit more than I’d like to in order to figure out what values I’m changing at any given point. That’s because the color stops are selected in the center panel, but the color value is changed in the left panel – but you can also select one of the colors from the panel on the right. 
:dizzy:
Forgive the butchering of your hard work, but I wonder if something more like this might be a bit more intuitive for folks like myself.
- When switching to Gradient, then the Visualizer and general gradient controls are immediately below the tabs.
- To the right of that are the controls for the color stops. Then, the controls for the capsule that’s currently selected are immediately below it. For example, I have the Red stop selected in this screenshot, so the UI to change that particular color stop’s value is right there. Or, I could also just select from the Palette to the right.
I still think there could be a bit more done to clarify how the color stop values can be changed. Either with tabs to switch between the color picker or Palette for each color stop – OR some sort of additional pop-up UI to show the color picker when selecting each color palette. Kind of like what https://www.css-gradient.com does.
Clicking on one of the color values triggers a pop-over
In closing…
Again, I absolutely love that we have this functionality now!! This is just my $0.02 – and as always, I appreciate all the love and care you all put into this. 