Background blur in Figma - Step-by-Step Guide

Introduction

Background blur lets you soften the area behind an object. This helps focus attention on the object by making the background less distracting.

When you want to highlight a popup or modal window over a busy dashboard

When you need to make text or icons stand out on top of a colorful chart

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

When you want to separate layers visually without changing the background color

When you want to improve readability of labels on top of images or maps

Steps

Step 1: Select the object or frame

- Canvas

The object or frame is highlighted with selection handles

Step 2: Open the Effects section

- Right sidebar under Design tab

The Effects panel expands showing current effects or empty if none

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

- Effects section in the right sidebar

A dropdown menu appears with effect options

Step 4: Select 'Background Blur' from the dropdown

- Effects dropdown menu

Background blur effect is added to the object and the background behind it becomes blurred

Step 5: Adjust the blur amount slider

- Effects section under Background Blur

The background blur strength changes visually on the canvas

💡 Use a small blur value for subtle effect and higher for stronger blur

Before vs After

Before

Object on canvas with clear, sharp background details visible behind it

After

Object on canvas with the background behind it softened and blurred, making the object stand out

Settings Reference

Blur amount

📍 Effects section under Background Blur

Controls how strong the background blur effect is

Default: 20 pixels

Blend mode

📍 Effects section under Background Blur

Changes how the blur effect blends with the background colors

Default: Normal

Common Mistakes

Applying background blur to an object without any background behind it

Background blur only affects what is behind the object, so no visible change occurs if background is empty

Place the object over a visible background layer or image before applying background blur

Setting blur amount too high

Excessive blur can make the design look fuzzy and reduce readability

Use moderate blur values and preview on different screen sizes

Summary

Background blur softens the area behind an object to highlight it.

Use it to improve focus and readability on busy dashboards or images.

Adjust blur amount carefully for best visual effect.