Skip to content

Style layers: fills, borders, shadows and effects

Give a layer colours, gradients or images, a border, a radius, shadows, opacity, blur and transforms.

Select a layer, then use the sections of the Properties panel.

Fills

  • Add fill adds a fill. Choose Solid, Linear, Radial or Image.
  • A layer can have several fills on top of each other. Drag them, or press Option+↑ and Option+↓ (Alt on Windows), to change their order.
  • In the colour picker, choose a colour, type its Hex value, or pick one of your Tokens or Recent colours. Control+C in the picker (Ctrl+C on Windows) lets you Pick a colour from the screen.
  • For a gradient, Add stop adds a colour, and the handles on the canvas set its direction.

Border, radius and shadows

In Styles:

  • Border sets the line around the layer: its width, colour and style. Border per side sets each side on its own.
  • Radius rounds the corners.
  • Add shadow adds a Drop shadow or an Inner shadow, with its blur, spread and colour. A layer can have several shadows.

Effects and transforms

  • Effects: Opacity makes the layer see-through, Blur blurs it, and Backdrop blur blurs what is behind it.
  • Transform: Rotate, scale, skew or move the layer without changing its place in the layout.

Reuse a look

Copy style (⌘⌥C) and Paste style (⌘⌥V) copy all of this from one layer to others.

Updated October 12, 2026