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.