> For the complete documentation index, see [llms.txt](https://docs.flatredball.com/gum/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flatredball.com/gum/gum-tool/gum-elements/shape-properties/use-gradient.md). # Use Gradient {% hint style="info" %} Use Gradient is a shape property supported by Circle, Rectangle, ColoredCircle, RoundedRectangle, Arc, and Line. {% endhint %} ### Introduction The Use Gradient property controls whether a shape uses gradient values if true or a solid color if false.

Rectangle with Use Gradient set to false

If this value is set to true, then additional properties appear for controlling the gradient.

Rectangle with Use Gradient set to true showing gradient values

### Gradient start color and Color2 A gradient creates a smooth interpolation from a start color to **Color2**. For **Circle**, **Rectangle**, and **Arc**, the gradient starts from the shape's own color — for Circle and Rectangle that is the **Fill** color when the shape is filled or the **Stroke** color when it is outline-only, and for Arc it is the shape's **Color**. To adjust where the gradient begins, change that color; to adjust where it ends, change **Color2**. Because the start is the color the shape already shows, turning **Use Gradient** on and off does not produce a sudden color change. The older **ColoredCircle** and **RoundedRectangle** shapes instead expose a dedicated **Color1** for the gradient start.

Gradient Color values

{% hint style="info" %} Earlier preview builds gave **Circle** and **Rectangle** a separate **Color1** for the gradient start. The start is now the shape's **Fill**/**Stroke** color, so **Color1** no longer appears for these shapes. **Arc** likewise derives its gradient start from its **Color**. {% endhint %} ### Gradient X1 and 2, Gradient Y1 and 2 The gradient values appear at their respective values at the points specified by Gradient X1, Gradient Y1, Gradient X2, and Gradient Y2. For example the gradient points could be visualized as shown in the following image:

Gradient positions visualized over a RoundedRectangle

Changing the Gradient X or Y values changes the start and end points for the gradient.

Changing gradient X and Y values changes the gradient direction and interpolation distance

### Gradient X1 and X2 Units, Gradient Y1 and Y2 Units Gradient values use Units similar to X Units and Y Units. By default, gradient values are relative to the top-left of the element. Since the gradient values are not affected by size, changing the size of the element does not affect the gradient.

By default gradient values are relative to the element's top-left corner

The gradient X and Y units can be changed. Each value can be set independently. For example, the X2 and Y2 units can be adjusted to be relative to the bottom-right corner of the instance. The following shows a RoundedRectangle with the Gradient X2 and Y2 values 100 pixels up and to the left of the bottom-right corner. If the RoundedRectangle is resized, then the gradient adjusts in response.

Gradient X and Y units relative to the bottom right of the instance.

Gradient X and Y values can exist outside of the visual space of the instance, and even outside of its bounds. The following image shows an Arc with a gradient which is defined below the visual part of the arc. Notice that the Gradient Y values are both 0 PixelsFromBottom.
### Gradient Type Gradient Type controls whether the gradient is linear or radial. Radial gradients place the center of the radial gradient at X1,Y1 and the edge of the radial gradient at X2, Y2.

Linear Gradient Type on the left, Radial Gradient Type on the right

--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.flatredball.com/gum/gum-tool/gum-elements/shape-properties/use-gradient.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.