Gradient Tool: Color stops should be allowed to overlap or even switch places.

[jasmussen]

The color stops in the gradient control currently can't overlap:

That means you can only ever create a gradient:

However if we did allow them to overlap, you could create perfectly sharp color stops like this:

That's a wonderful aspect of gradients that we should allow.

This online tool to generate gradients allows color stops to overlap, and to even go to the other side. That feels powerful, and lets you create cool things easily:

[munirkamal]

I was going to write about this. This is really a must needed improvement as this will open up a lot of design possibilities. Looking forward to this.

[webmandesign]

All for it!

Maybe an interface for inserting exact specific stop position (number) would be also great. Something like in screenshots of #16662 (comment)
Although, it would be impossible to tweak overlapping stops (the one covered with the other) even this way. The only way this would be possible, as far as I can see, would be to move the top-most stop away, edit the stop below and move the first one over again. Not sure if this is a good UX though...

[susurruses]

I agree it would be helpful to be able to set specific, precise color stop positions within gradients—even basic ones without these sharp transitions.

For the gradient bar itself, one idea would be to put colors that would overlap (such as two stops at 50%) inside a lozenge shape—this allows each color to still be clicked on. See below:

I also think it would be useful to be able to specify the exact position you want a spot to be at from within the color picker:

In these mockups I added an "Add Color Stop" button as well—this way, users can either edit the color stops from the current gradient bar area, as well as while editing the stops in the Gradient Stops area. Adding a stop in either of these areas would automatically update the stop position/color within the other.

[alaczek]

Yes, I'm all for it! It's already possible to define custom gradients with sharp color stops in themes. The problem is, without proper controls it's not possible to edit those gradients in the editor.