Gradient fill is not working

Symptoms

If one or more of these match what you are seeing, you are on the right page.

• •The gradient renders as a single flat color
• •The gradient runs in the wrong direction
• •The gradient does not span the whole shape
• •Hard bands appear instead of a smooth transition

Causes and fixes

Ordered from most to least likely. Work down the list — each cause is paired with what to do about it.

1. 1

   The color stops are at the same position or the same color.

   Drag the stops apart on the gradient bar and give them distinct colors. Each stop has a color, a position as a percentage, and its own opacity independent of the color alpha.

2. 2

   The gradient angle is not what you want.

   Angle is in degrees: 0° runs left to right, 90° top to bottom. It is animatable, so check it has no keyframes holding it at an old value.

3. 3

   Explicit start and end points are constraining the gradient.

   A gradient can be positioned by X/Y start and end coordinates relative to the bounding box instead of by angle. Those coordinates can leave it spanning only part of the shape — reset them or switch back to angle control.

4. 4

   Repeat mode is producing bands.

   Repeat tiles the gradient beyond its start and end points, and Reflect tiles it mirrored. Set repeat mode to None for a single smooth transition.

5. 5

   The wrong gradient type is selected for the effect you want.

   Linear runs along an axis, Radial from a centre point, Angular sweeps around a centre like a color wheel, and Diamond produces a square radial pattern.

Related pages