Skip to main content

Paints, strokes and effects

Fills, strokes and effects are added and edited the way you expect. This page covers the rules that change the result: what a blend mode blends with, where a stroke sits and what it cuts off, and how effects combine. Also called: borders, filters, drop shadow.

Blend modes​

Where: Properties panel → the dropdown next to the opacity field (tooltip Blend mode) for the layer. For one paint: Fill or Stroke → open a paint → the blend mode button (tooltip Blend mode: None).

  • The first option, None, is normal blending. There is no pass-through option.
  • On the canvas, a layer with an opacity below 100%, a blend mode of its own, a Blur, an Inner Shadow or a color adjustment effect is an isolated group: blend modes inside it blend only with the layer's own content. A mask isolates the layers it masks. Clip content doesn't isolate.
  • A paint's blend mode blends that paint with what is below it. On the canvas, strokes are drawn after fills, so a stroke paint also blends with the layer's own fill.
  • The bottom paint is not isolated: on the canvas it blends with whatever is behind the layer, unless the layer is an isolated group.

Gradients in preview and export​

In preview

A Conic gradient fill or stroke doesn't render in preview and is left out of SVG export. A gradient fill on text doesn't render in preview (Text).

Strokes​

Where: Properties panel → Stroke → the position dropdown (tooltip Stroke position), the button next to the width field (tooltip Individual strokes), and the settings button (tooltip Advanced stroke settings) → Dashes.

  • New lines and vector layers start with Center; frames and shapes start with Inside. Text has no position dropdown; its stroke is always outside.
  • On a line, Inside and Outside move the whole stroke to one side of the line, by half the stroke width.
  • On a vector layer, Inside and Outside apply to closed regions only. An open path, or a segment that sticks out of a closed shape, is stroked centered. A segment shared by two regions is centered with Inside and not drawn with Outside.
  • Individual strokes exists on frames and rectangles. While the four widths differ, the Dashes field is hidden and a pattern set earlier isn't drawn.
  • Dashes is not offered for vector layers, boolean operations or text.

Strokes and Clip content​

Where: select a frame → Properties panel → Clip content, in the untitled section that holds the opacity field.

  • With Clip content on, children are cut at the inner edge of the frame's stroke, not at the frame's bounds: the full stroke width for Inside, half for Center, nothing for Outside. Rounded corners follow the inner curve of the stroke.
  • The frame's own fill still reaches under the stroke. A semi-transparent or dashed stroke shows that fill, never the children.
  • With Clip content off, children paint over the stroke.
  • In a managed layout, Include borders in items size adds the frame's stroke to its padding, so items start at that same inner edge (Strokes and padding).

Effects​

Where: Properties panel → Effects → the + button (tooltip Add effect).

The list holds shadows (Drop Shadow, Inner Shadow), blurs (Blur, Background Blur) and four color adjustments (Brightness & Contrast, Hue & Saturation, Grayscale & Sepia, Invert).

  • Shadows have no spread.
  • R is not the CSS blur value. Preview converts it with 0.2887 × R + 0.5: R 20 becomes blur(6.27px), and a shadow's drop-shadow() gets the same blur value.
  • Effects of different types apply in a fixed order, whatever their order in the list: Blur, then Drop Shadow, then the color adjustments. A color adjustment therefore also changes the color of the layer's shadow. Among the color adjustments, list order matters.
  • A color adjustment filters the whole rendered layer, children included. It is not one of the Fill adjustments of a bound paint (Adjustments on bound paints).
  • On the canvas, an Inner Shadow on a shape, or on a frame with Clip content on, is drawn over the fill and children and under the stroke, so it doesn't cover the stroke.
  • Honor opacity is off by default. On the canvas, a fill at 10% opacity then casts the same shadow as an opaque one; with the option on, the shadow follows the opacity of the layer's paints. The layer's own opacity fades the shadow with the layer either way.