Figma에서 배경 흐리게 만들기 – 배경 효과 빠른 가이드

In this guide, you will learn how to apply a blur effect to a frame in Figma using the design menu.
Follow the detailed steps to achieve the desired blurring of an element in your design project.

A background blur effect in Figma gives your design a frosted glass appearance, commonly used in modals, cards, and overlays.

Step 1: Prepare the Blurring Layer

1. Create a Shape
   Use a rectangle or any shape/frame where you want the blur effect to appear.

2. Add a Fill
   Fill it with a solid color (e.g., white or gray).

3. Lower the Opacity
   Reduce the layer’s opacity (typically around 10–40%). This step is essential blur won’t show without transparency.

Step 2: Apply the Background Blur

1. Select the Layer
   Click the shape you just created.

2. Go to Effects Panel
   On the right sidebar, click the "+" next to Effects, then choose Background Blur from the dropdown.

3. Adjust the Blur Value
   Click the settings icon next to the effect and use the slider to control how blurry the background appears.

Optional: Fine-Tuning

• You can combine background blur with drop shadows for added depth.

• Adjust opacity and blur together to create either a soft frosted look or a strong, glassy one.

Step-by-Step Guide: How To Blur Background in Figma

Step 1

To begin applying a blur effect in Figma, first select the frame you wish to blur.

Navigate to the design menu located on the right side of the interface. Within this menu, find the effects section and click on it.

In the effects section, click on 'Add a new effect' by clicking the '+' symbol within it.

Step 2

Once the new effect is added, a drop-down menu will appear. Click on this menu and select 'Layer Blur.' The blur effect has now been successfully applied to your chosen frame.