Layer blur in Figma - Step-by-Step Guide

Introduction

Layer blur softens the edges and details of a selected layer. It helps focus attention on other parts of your design by making some elements look out of focus, like when you look through a foggy window.

When you want to highlight a button by blurring the background behind it

When you need to create a depth effect by making some layers look farther away

When you want to soften a photo or image to reduce distractions

When you want to create a frosted glass effect on a panel

When you want to blur text or shapes to create a shadow or glow effect

Steps

Step 1: Select the layer you want to blur

- Layers panel or directly on the canvas

The layer is highlighted and its properties appear in the right sidebar

Step 2: Click the Effects section in the right sidebar

- Right sidebar under the Design tab

The Effects panel expands showing options like Drop shadow, Inner shadow, Layer blur, and Background blur

Step 3: Click the '+' button next to Effects

- Effects section in the right sidebar

A new effect is added with a default setting

Step 4: From the effect type dropdown, select 'Layer blur'

- New effect added in the Effects panel

The layer blur effect is applied and the layer visually softens on the canvas

Step 5: Adjust the blur amount by dragging the slider or typing a number

- Layer blur effect controls in the Effects panel

The layer becomes more or less blurry depending on the value

Step 6: Click outside the Effects panel to close it

- Anywhere outside the Effects panel

The sidebar returns to normal and the blur effect remains applied

Before vs After

Before

The selected rectangle layer has sharp edges and clear details

After

The rectangle layer edges and details appear soft and fuzzy with a blur radius of 20 pixels

Settings Reference

Effect type

📍 Effects panel in the right sidebar

Choose the type of visual effect to apply to the layer

Default: Drop shadow

Blur amount

📍 Layer blur effect controls in the Effects panel

Controls how strong the blur effect is on the selected layer

Default: 10 pixels

Common Mistakes

Adding multiple layer blur effects on the same layer

Multiple layer blur effects stack and can make the blur too strong or unpredictable

Use a single layer blur effect and adjust its blur amount as needed

Confusing Layer blur with Background blur

Layer blur blurs the selected layer itself, while Background blur blurs layers behind it

Choose Layer blur to soften the selected layer; choose Background blur to blur what is behind the layer

Summary

Layer blur softens the selected layer by blurring its edges and details.

Use the Effects panel to add and adjust layer blur in Figma.

Remember that layer blur affects only the selected layer, not the background.