Radial gradient in ellipse shape?

[Chad E]

I am trying to set a radial gradient fill in an ellipse shape. The gradient seems to be a circle even when the ellipse is not a circle, so the gradient is just clipped at the minor axis edge, like so:



What I'd like to see is that the gradient is interpolated in both axes, like so:



The only way I can figure out to achieve this currently is:
- make a perfect circle
- fill with radial gradient
- flatten the styles in the shape layer
- adjust the height/width of the layer, effectively squishing it into an ellipse of the desired size

This "works" but then I lose the ability to adjust the fill gradient (and other styles) because it has been flattened into the layer.

Elliptical gradient fills work like this in other graphic design programs I have used in the past. Am I missing something in Pixelmator? If not, is there a way to achieve this without needing to flatten the style?

[Aurelija]

Hi! That's a known issue and we'll definitely be working on gradient editing improvements in the future. For now, to keep the layer styles editable, you can create separate shapes for each of the gradient colors, then apply the Gaussian blur effect to blend all of the colors together (with Preserve Transparency turned on).

[Andrius]

Just to butt in a little, I've just thought of an alternative way. It's potentially a little trickier, but also potentially a little more versatile. The steps are:

1. Add a circular/oval shape layer (set the color to what you'd like the outer edges of the gradient to be)
2. Duplicate this shape and change the color of the upper layer to the color you'd like to appear at the center of the gradient
3. In the Layers sidebar, Control-click the upper layer and choose Create Clipping Mask
4. Apply a Gaussian blur effect to the upper layer (the radius of that effect goes up to 400 px if you press and hold the Option key)
5. Resize each layer as desired (optionally, group them for convenience)

[Chad E]

you can create separate shapes for each of the gradient colors, then apply a gradient effect to blend all of the colors together

I'm not sure I follow this? I have tried to implement this, but the Gradient Effect seems to do what the normal gradient fill also does... how does it blend the layers/colors together?

I've just thought of an alternative way. It's potentially a little trickier, but also potentially a little more versatile. The steps are:

Aha, I see what you mean. Works great for 2 color gradient, not so easy for mutli-stop gradients But yes, thanks for this tip!

[Aurelija]

I'm not sure I follow this? I have tried to implement this, but the Gradient Effect seems to do what the normal gradient fill also does... how does it blend the layers/colors together?

Oops, I meant the Gaussian blur effect there. Gaussian and gradient somehow got mixed up in my head. Essentially, the workflow is similar to the one suggested by Andrius only excluding the clipping mask.

[Tamara]

Any update on this? I'm also trying to achieve this on an ellipse shape without losing the shape itself

[Aurelija]

There haven't really been updates to address this issue specifically, but there's one more workaround that came to mind — flattening the ellipse shape with a radial gradient applied using the Perspective Transform effect. This way, with a nondestructive transformation applied, the gradient will remain fully editable.

[Tudor_V]

One more request for elliptical gradients.
It's a must have feature now, since Pixelmator Pro is able to open Adobe Illustrator files. I have a bunch of stock EPS files that look almost perfect in Pixelmator. Only the elliptical gradients look wrong.