Fill, stroke, shadow and blur

How a layer looks comes from a handful of sections in the Design tab: Fill for what is inside it, Stroke for its outline, Shadow for depth, Filters for blur, and Blending for opacity and blend mode. Each section shows a plus when it is empty; press it to add one.

Almost every value here can follow a variable, so a colour or a shadow kept in Variables updates everywhere it is used. See Variables and modes.

Fill

Press the plus by Fill to add one, then choose the fill type:

• Solid: one colour. Click the swatch for the colour picker, or type a hex code and an opacity.
• Gradient: see below.
• Image: a picture that fills the layer. See Images and video.
• Video: a video that fills the layer, on frames, rectangles, ellipses and stacks. Adding a video is on Pro.

A layer has one fill. The eye hides it without losing it; the minus removes it (text keeps its fill).

Picking colours:

• The eyedropper button (Pick a colour from the screen), or I with layers selected, takes a colour from anywhere on screen.
• Colours on this page shows swatches of every colour already in use, so you can reuse them instead of typing hex codes.

Text takes a Solid or Gradient fill, painted inside its letters.

Gradients

Choose Gradient as the fill type, then click the swatch: the colour picker opens with the gradient editor.

• Gradient type: Linear, Radial, Angular or Diamond.
• Flip gradient reverses it; Rotate gradient turns it a quarter.
• Stops: each has a position, a colour and an opacity. Add a stop puts one after the selected stop; the minus removes one. A gradient keeps at least two.

Drag the stops along the bar to move them. Gradients work on fills, strokes and text.

Stroke

Press the plus by Stroke. A new stroke is 1 px and dark, drawn inside a box, outside text, and centred on lines and vectors.

• Position: Inside, Center or Outside.
• Weight: the thickness.
• Stroke sides (the sides button): All, Top, Bottom, Left, Right, or Custom to set a weight for each side. A bottom-only stroke makes a quick divider.
• Dashed: a dashed outline, when every side is alike.
• Stroke details (on lines and vectors): Stroke end caps (Round, None, Square) for open paths, and Stroke joins (Round, Miter, Bevel).

A stroke can be a solid colour or a gradient, like a fill.

Shadow

Press the plus by Shadow. A new shadow is a Drop shadow with X 0, Y 4, Blur 12, Spread 0, in black at 25%.

• Switch it to Inner shadow for a pressed or inset look.
• Set X, Y, B (blur), S (spread) and the colour.
• Add more than one for softer, layered depth. The minus removes one.

To reuse a shadow, save it as an effect style from the style row at the top of the section. See Text and effect styles.

Filters

Press the plus by Filters to add a Layer blur, then switch it in its menu if you want a Background blur:

• Layer blur: blurs the layer itself.
• Background blur: blurs whatever is behind the layer, for frosted glass. Give the layer a fill with some transparency so the blur shows through.

Both start at 8; change Blur amount to taste.

Blending and corner radius

• Blending holds Layer opacity (0 to 100%) and the Blend mode: Normal plus 15 others, from Multiply and Screen to Hue and Luminosity. The eye beside it hides the layer. Press 1 to 9 for 10% to 90% opacity, 0 for 100%.
• Corner radius rounds a frame’s or rectangle’s corners. Drag the slider (up to 100) or type a value. The Corner radius details button sets each corner on its own.

Catches

• Fill opacity and layer opacity are different. Fill opacity fades only the fill; Layer opacity fades the whole layer, stroke, text and children included.
• Background blur needs see-through. On a fully opaque fill, there is nothing behind to blur.
• Dashed is not offered on text or when the sides have different weights.
• Video fills are on Pro. A video already in a file plays on every plan; only adding one asks for Pro.
• To copy a look from one layer to another, use Copy styles and Paste styles. See Copy, paste and duplicate.