New in Sketch: A major redesign, an all-new Inspector, and more Learn more

New in Sketch: A major redesign, an all-new Inspector, and more Learn more
Skip Navigation
Documentation Symbols and Styles Styling Fills

Fills

Last updated on 18 Nov 2025
3 min read

Fills let you add color, gradients, or images to your shapes and layers. You can apply multiple fills to create depth and texture, adjust their blending, and control how they interact with other layer styles.

There are four different fill types you can use:

  • Solid fill Circle
  • Gradient Circle with linear gradient
    • Linear
    • Radial
    • Angular
  • Image fill Circle with image
  • Color Variable Color variable

By default, new layers and frames have a single, solid color fill.

Adding a new fill

To add a new fill, click Circle with plus in the Fills section on the Inspector. You can add as many fills as you like to a single layer and they’ll stack on top of each other. You can reorder fills by clicking any empty area of a fill in the Inspector, then dragging it to a new position in the list.

An annotated image showing the Fills section in the Inspector

For each fill you create, you’ll have the following options:

  1. Enable/Disable toggle. You can enable or disable all the fills of a frame or layer by pressing ⇧F.
  2. Color preview. Click on it to open the color panel and choose a different color or change the fill type.
  3. Hex code. If you’re using a solid color fill, you’ll see its HEX value here for easy copying. If you’re using a gradient or image fill, this area shows options to change its type.
  4. Opacity. You can change a fill’s opacity to combine and show two or more fill types.

You can paste a hex code with an alpha value into the Hex field, which will apply the correct opacity. For example, #FF000080 will become a color with a hex value of #FF0000 and an opacity of 50%. The last two characters are the opacity value. Opacity values are base-16, which is why 80 becomes 50% — and not 80%.

Adding an image fill

Open the color panel and select the Image fill Circle with image. Choose your own image using Choose Image in the preview, or pick one from the presets at the bottom of the panel. You can also click the Data icon dataset to use an image from a data source, or paste one by selecting the Choose Image box and pressing ⌘V.

A movie showing how to add an image fill in the Mac app

You can then choose from four different fill types:

  • Fill adjusts the size of the image to fit the layer’s width.
  • Fit adjusts the size of the image to fit the layer’s height.
  • Stretch fits the image to the layer’s height and width ratio by stretching it.
  • Tile keeps the image at its original size (unless you adjust it) and repeats it to fill the layer.

You can also click the clock icon Small clock above the image preview to see frequently used images in your document, or choose a basic pattern or noise fills from the global presets at the bottom.

You can paste an image from outside Sketch directly as a fill using Paste Image as Fill. Copy the image, select a layer, then press ⌃, click the fill preview and choose Paste Image as Fill. This option appears only when your clipboard contains a compatible image.

Changing fill settings for overlapping paths

When you’ve applied a fill to a shape, use the Command Bar to choose between the Non-Zero or Even-Odd fill rules, based on the winding rule. You can search for “fill rule” in the Command Bar to access this option quickly.

Including fills as content

Frames and graphics let you use fills as content. When enabled, the fill is included in asset exports and when playing prototypes. For example, in Symbol Sources, a fill can help highlight the frame’s contents, but you usually don’t need it when inserting Symbol instances.

This option is enabled by default for frames and disabled for graphics. You’ll find it in the Export section of the Inspector.