Fills come in four kinds.
Fills paint the inside of an object. A solid paints with one color, a gradient blends several colors, an image paints with a photo, and a dynamic fill is a pattern that keeps moving. You can stack several of them.
Fills in the right panel
Fill rows
When you select an object, Fills appears near the bottom of the right panel, in the section named after the kind of object, such as Rect Style. Each paint is one row, and new rectangles and ellipses start with a single gray row. Click the color square at the left of a row to open a window for editing that paint. For a solid color, you can also type a color value such as FF6A00 in the field next to it.
- Click the color squareOpen the editing window
- Type a value+↩Paint with that color
Add a fill
Click the + button to the right of Fills to open a menu of Color, Image, and Dynamic. The paint you choose is added as the last row of the list, and the window for editing it opens right away. Color starts as white. If you press a shortcut with nothing selected, the paint is added to the scene’s fills.
- ⌘⇧CAdd a white solid
- ⌘⇧IAdd an image fill
- ⌘⇧DAdd a dynamic fill
Stacking order
You can stack several paints, and rows lower in the list are painted on top. That’s why a newly added paint covers the original color. Lower the opacity of the paint on top to let the one below show through. Drag the handle with two horizontal lines at the far left of a row to change the order.
- Drag the handleChange the order
- Click the eye buttonHide or show again
- Click the − buttonRemove
Where fills appear
Rectangles, ellipses, paths, text, frames, and tables have fills, and so do scenes. Images, videos, and groups don’t. Text can use only solid colors and gradients. To paint a scene’s background, use Style › Fills in the Scene panel at the top.
The Colors window
Solid
A solid paints with one color. Pick a hue on the vertical rainbow bar, how light and how vivid it is in the large square, and the opacity on the bar at the far right. The object changes while you drag, and when you let go, the change is kept as a single undo step. The two fields below are the color value and the opacity (0–100). The steps for your first fill are in Fill, stroke, and shadow.
Eyedropper
Click the eyedropper button to the left of the color value field, and a magnifier and the color value follow the pointer. Click the spot on the canvas whose color you want, and that color goes into the paint you’re editing. In a gradient, it goes into the selected stop. You can take colors only from inside the editor canvas.
- Click the canvasTake that color
- escCancel
Recent
Solid colors you’ve used collect under Recent as small color squares. Click a square to paint with that color. Right-click a square and choose “Add to Favorites” to pin it to the front, or “Remove from Recent” to remove it. This menu shows in English whatever the interface language. The list stays in the browser or app you’re using, not in the project.
- Click a squarePaint with that color
- Right-clickPin or remove
Variables
If the project has color variables, they’re listed under Variables. Click one to link the paint to that variable, so the paint changes whenever you change the variable’s value. A linked row shows the variable’s name instead of a color value. If you change the color with the large square or the color value field, the paint is unlinked without warning. To create variables, see Variables.
Copy and paste
The Copy button in the title bar of the Colors window remembers the current paint: for a solid, its color and opacity; for a gradient, all its stops and its direction. Click Paste in the Colors window of another fill or stroke to get the same paint. Where only a solid color is accepted, the gradient’s first color goes in.
Gradients
Gradient tab
Click the Gradient tab at the top of the Colors window, and the paint becomes a gradient from white at the top left to black at the bottom right. The fill row shows a name such as “linearGradient” (always in English). Click the Solid tab to go back to a single color: the color of the selected stop.
Type
Choose how the gradient spreads from the Type list. Linear spreads in one direction, and Radial spreads out from the center. Angular sweeps once around the center, and Diamond spreads in a diamond shape. Changing the type keeps the colors of the stops.
Stops
A stop is a point in a gradient where a color is set. At first there’s one at each end of the color bar. Click the bar to add one at that spot, or click the + button next to Stops to add one in the middle. Click a row in the list below to select that stop, and the color controls then change its color. The three fields in a row are the position (%), the color value, and the opacity (0–100). A gradient never has fewer than two stops.
- Click the barAdd a stop
- Drag a handleMove it
- Double-click a handleRemove it
- Click a row in the listSelect that stop
Handles on the canvas
While you edit a gradient, handles appear over the object. For Linear, drag the start and end points to set the direction and length. For Radial and Diamond, the center point and the point on the edge set the position and size; for Angular and Diamond, a rotation handle sets the direction. The handles snap to the object’s corners, edge midpoints, and center, and holding ⇧ while you drag snaps the angle to 45° steps. If the resize handles don’t show after you close the window, click the object once.
- Drag a handleMove it
- ⇧+drag a handleSnap the angle to 45° steps
- ⌥+drag a handleMove it slowly
- ⌘+drag a handleDon’t snap
Set it with numbers
Instead of using the handles, you can type numbers in the fields. Linear uses x1, y1 (start) and x2, y2 (end). The other types use cX, cY (center), and Radial and Diamond also have iR, oR (inner and outer radius). Values are fractions of the object’s box, so 0 is left or top, 1 is right or bottom, and 0.5 is the center. The rot field is in radians, not degrees, so 1 is about 57°. Setting the direction with the handles on the canvas is easier.
The Gradient tab drops the color you were using
When you switch a solid to a gradient, the color you were using doesn’t carry over: the gradient starts out going from white to black. Meanwhile, the color controls below show the old color for a moment. Click the first row of the Stops list and pick a color, then do the same for the second row. To go back to the solid, press ⌘Z.
Image and dynamic
Image
Choose Image from the + button to add an empty image paint and open the Image window. Click Upload Image and choose a photo file. Change the photo’s size and position with Scale, Rotation (degrees), X, and Y. The row shows “Image”. With Repeat off, a single photo covers the whole shape and keeps its proportions. The center of the photo sits at the center of the shape, and whatever spills over is cropped. If you then turn it with Rotation, the photo grows just enough to leave no gaps. While Repeat is off, Scale doesn’t go below 1, and X and Y move the photo only as far as it still covers the shape. Turning the photo leaves it less room, so X and Y can stop until you raise Scale. With Repeat on, the photo repeats at its original size like a checkerboard.
Dynamic
BetaChoose Dynamic from the + button: a pattern that keeps moving fills the object, and the Dynamic window opens. Choose Aurora, Ink, Fire, or Lens Flare under Kind, and under Parameters, change the values for that kind, such as Speed, Intensity, and colors. Only Lens Flare stays still; the others move both while you edit and during playback. An object can have only one, and text can’t have one. To edit it again, click the icon at the left of the row, not the word “Dynamic”.
Background gradients and fade bands
To paint the scene background with a gradient. With nothing selected, click the color square under Style › Fills in the Scene panel at the top. The same Colors window opens, and the Gradient tab paints the whole background.
To lay a dark band over a photo. Place a rectangle over the photo and click the Gradient tab in the Colors window. Type 0 in the x2 field to make it run from top to bottom. In the first row of the Stops list, set the color value to 000000 and the opacity to 0. The band then darkens toward the bottom, so text on it is easy to read.
To give several objects the same paint. Select objects of the same kind together and change the paint, and they all change. For objects of different kinds, use Copy Styles and Paste Styles in the right-click menu. Reuse styles covers this.
Shortcuts on this page
| Add a white solid fill (to the scene if nothing is selected) | ⌘⇧C |
|---|---|
| Add an image fill | ⌘⇧I |
| Add a dynamic fill | ⌘⇧D |
| Snap a gradient handle to 45° steps | ⇧+drag a handle |
| Move a gradient handle slowly | ⌥+drag a handle |
| Cancel the eyedropper | esc |
Updated 10/16/2026 · The videos on this page were recorded in the current editor.