New in Sketch — Independent borders, selection colors, and more Learn more

Skip Navigation

Layer and Background Blur

2 min read

Layer blur softens the layer’s own content, and Background blur, blurs what’s behind it. Both come in three styles — Uniform, Linear Progressive, and Radial Progressive — so you can control not just the intensity, but the shape and direction of the blur.

Layer blur

Layer blur applies a blur to the layer’s content — useful for creating soft, out-of-focus effects or adding visual depth.

To apply it, click circle.plus.semifilled next to Effects in the Inspector and choose Layer Blur. Then click the blur icon next to its name to open the blur panel and use the blur slider or input field to set the intensity. See Blur styles for details on each style options.

Background blur

Background blur replicates the blurs behind overlays and panes in macOS and iOS. Unlike Layer blur, it doesn’t affect the layer itself — it blurs everything behind it.

To apply it, click circle.plus.semifilled next to Effects in the Inspector and choose Background Blur. Then click the background.blur icon next to its name to open the blur panel, where you can adjust two settings:

  • Blur: use the slider or input field to set the blur intensity.
  • Saturation: adjusts the vibrancy of the blurred content. Reducing it desaturates, and increasing it makes colors more vivid. Double-click the slider to reset it to its default value.

Blur everything behind a layer to create depth and separation

If you have any fill styles on this layer, they’ll need to be transparent to see the blur. A transparent color fill is also a great way to tint it.

Blur styles

Both effects come in three styles: Uniform, Linear Progressive, and Radial Progressive.

  • Uniform Blur circle: affects the entire layer. You can control the intensity of the blur using the slider, or the input field in the panel.

Blur an entire layer with a single slider

  • Linear Progressive Blur circle.gradient.linear: the blur increases (or decreases) gradually across the layer. Click the effect name in the Inspector to show the stops on the canvas — drag them to adjust the direction, or click along the line to add new stops. Use arrows.right.left to invert the blur and rotate to rotate its direction by 90°.
An image showing Linear Progressive blur applied to a layer

Fade blur gradually across a layer by dragging the stops on the canvas

  • Radial Progressive Blur circle.gradient.radial: the blur radiates outward from a central point. Click the effect name in the Inspector to show the stops on the canvas — drag them to adjust the size and position, or click along the line to add new stops. Use arrows.right.left to invert the blur and rotate to rotate its direction by 90°.

Pull focus to the centre by blurring outward from a point