Gradient Midpoints

Amazing job folks on the new gradient builder. It really is quite remarkable!!

Just one quick question. Is there a way to set midpoints percentages between gradient stops?

Thanks for the kind words. There is a way to control that, it’s just a bit manual for the time being while we work on draggable color stops. Look for “From” and “To” in the UI. You can set percentages for each color stop. Have a great day.

Hey Charlie, yes I saw those, and I think I’ve figured out how to use them, but that’s not exactly what I was asking about.

I was more thinking of whether it was possible to control the “unlabeled midpoints” between two existing color stops, like in a graphic design program.

I found this helpful definition of what I’m talking about, which is possible in css gradients:

In CSS gradients, the “midpoint” between two color stops refers to the point where the color transition between those two stops is at its halfway point. By default, this midpoint is located exactly halfway between the positions of the two adjacent color stops.

However, you can explicitly control the position of this midpoint by using a color hint. A color hint is an unlabelled percentage value placed between two color stops in the gradient function. This percentage indicates where the color transition should reach its midpoint.

I’ve got a gradient I’m trying to recreate from a project started in a graphic design program that essentially has the following gradient:

linear-gradient(to bottom right,#cfa07f 0%, 22%, #d3a88a 31%, #dfc0aa 50%, 60%, #bf8256 100%);

Note the unlabeled percentages 22% and 60% that set the mid-points. That’s what I’m talking about. I tried leaving the color field blank, but it would not let me apply an “unlabeled stop.”

Hoping this all makes sense.

1 Like

Okay I understand now. I’m sure we could have some sort of UI for setting a color stop as a midpoint. If you get creative with “From” and “To” you can get pretty close with your example. I’ll create a feature request for this.