# Fill, stroke, shadow and blur

> Colour a layer with a solid, a gradient or a picture, give it an outline, and add shadows and blurs.

Source: https://uxdeck.app/guide/fill-stroke-effects (checked against uxdeck on 16 October 2026)

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](/guide/variables).

## 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](/guide/images-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 <kbd>I</kbd> 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](/guide/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 <kbd>1</kbd> to <kbd>9</kbd> for 10% to 90% opacity, <kbd>0</kbd> 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](/guide/copy-paste).