Gradient Tool: Add Radial Direction Option

[munirkamal]

Hi,

It would be great if there would be a direction option for radial-gradient type. Here is how it works in Divi Theme.
https://www.loom.com/share/ccd86ba0db8f44b29f9af91ff1fc2959

Thanks

[ItsJonQ]

That's interesting! I'm interested to hear what others think

Ultimately, I think the goal is to offer maximum control with minimal UI. That's also the biggest challenge 🙈 .
At the moment, the existing gradient controls need to be visually simplified (in my opinion). I'm not sure where to add this positional feature (as cool as it may be!).

Don't let my thoughts dissuade anything though ❤️

[munirkamal]

@ItsJonQ

Here is an online tool I found that also allows to set directions for the radial gradient.
https://www.css-gradient.com/

[richtabor]

At the moment, the existing gradient controls need to be visually simplified (in my opinion).

I completely agree.

[munirkamal]

@ItsJonQ

Yeah, I also agree that the control needs some more refinements as there are a few glitches currently in using it. I just felt to add this issue as well while you are working on it, as this may enable more design possibilities in my opinion.

[mapk]

Some of the gradient controls are getting updated here: #23802

[mtias]

For reference, this is the design target:

[draganescu]

Would a nice matrix control work for the radial center?

[richtabor]

Maybe, if you think that'd be enough control. I can imagine you'd want more flexibility though, like offsetting the radial out of the visible canvas to make it more subtle.

How do other web editor tools handle radial gradients?

[mtias]

We had a design for this already, no?

[draganescu]

How do other web editor tools handle radial gradients?

From what I've seen they offer fixed options. I think it's because the option in CSS is pretty convoluted.

@mtias I think missed you previous comment :) Either way it'd be great to have it because it allows for many creative background [options.

Here ](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient) we can see we have to account for position of the center of the radial gradient but also extent. How would the direction knob solve this?

[richtabor]

It's a bit more "hands on" but here's how Framer (and also Figma) handle more precise control for radial gradients. May be a fun experiment, though I don't think radial direction is a priority.

CleanShot.2023-04-19.at.20.45.07.mp4