How to Blur in Figma: Add Depth to Your Design

Blur effects can make or break a UI design. Knowing how to blur in Figma gives you control over depth, focus, and visual hierarchy in ways that flat designs simply can’t match.

Figma offers two primary blur types: Layer Blur and Background Blur. Each serves different purposes, from creating glassmorphism cards to obscuring sensitive data in wireframes.

This guide walks you through both methods step by step.

You’ll learn how to access the Effects panel, adjust blur intensity, configure progressive blur gradients, and troubleshoot common issues.

Takes about 5 minutes. No plugins required.

How to Blur in Figma

Blurring in Figma is the process of applying visual softening effects to layers, frames, or backgrounds using the Effects panel.

Users need this when creating depth in user interface designs, obscuring sensitive information, building glassmorphism interfaces, or drawing attention to specific elements.

This guide covers 2 primary blur methods: Layer Blur and Background Blur.

Requires 2 to 5 minutes and basic Figma knowledge.

Prerequisites

Before applying blur effects in Figma, confirm you have these ready:

• Figma account (Free, Professional, or Enterprise plan)
• Figma desktop app or browser access
• A design file with at least one layer, frame, or image
• Basic understanding of the Figma interface (right sidebar, Layers panel)

No plugins needed. Blur effects are built into Figma’s core toolset.

Step 1: How Do You Select the Layer You Want to Blur?

Click directly on the layer in the canvas or locate it in the Layers panel on the left sidebar.

A blue bounding box appears around your selection, confirming the layer is active and ready for effect application.

Action

1. Layers panel location: Left sidebar > Layers tab
2. Selection method: Click directly on layer or press V for the Move tool
3. Result: Blue bounding box appears around selected element

Purpose

Correct layer selection determines which element receives the blur effect.

Selecting the wrong layer applies blur to unintended objects. Always verify your selection before proceeding.

Step 2: How Do You Access the Effects Panel?

The Effects section lives in the right sidebar under the Design tab.

With your layer selected, scroll down until you see “Effects” with a plus icon beside it.

Action

1. Right sidebar location: Design tab > Effects section
2. Default state: Shows “No effects” or lists existing effects
3. Result: Effects section becomes visible for modification

Purpose

The Effects panel controls all blur settings, shadows, and visual effects for the selected layer.

This is also where you’ll find gradient options and other design properties.

Step 3: How Do You Add a Layer Blur Effect?

Click the plus icon in the Effects section to add a new effect.

The dropdown defaults to Drop shadow. Click it and select Layer Blur from the menu.

Layer Blur softens the entire selected element, blurring its pixels uniformly.

Action

1. Add effect: Click the + icon in Effects section
2. Dropdown selection: Click “Drop shadow” default > Select “Layer Blur”
3. Result: Layer Blur appears in Effects list with default blur value

Purpose

Layer Blur applies softening directly to the selected element’s pixels.

Works on images, shapes, frames, groups, and components.

Perfect for creating depth of field effects or anonymizing content in mockups.

Step 4: How Do You Adjust the Layer Blur Intensity?

Click the sun-like Effect settings icon next to Layer Blur.

A slider appears. Drag it right to increase blur intensity, left to decrease.

The canvas updates in real-time, showing exactly how your blur looks.

Action

1. Settings access: Click the Effect settings icon (looks like a sun)
2. Blur adjustment: Drag slider or enter value (0 to 250 range)
3. Result: Canvas updates in real-time showing blur intensity

Purpose

Blur intensity determines how soft or subtle the effect appears.

Low values (5-15) create subtle softening. Higher values (50+) produce dramatic, abstract blurs.

I typically start around 8-12 for background images in UI designs. Adjust based on your visual hierarchy needs.

Step 5: How Do You Apply a Background Blur Effect?

Background Blur works differently. It blurs everything behind the selected layer, not the layer itself.

Select your layer, add an effect, then choose Background Blur from the dropdown.

Critical: Your layer needs a fill with opacity between 1% and 99% for the blur to show.

Action

1. Effect selection: Effects dropdown > Background Blur
2. Fill requirement: Set layer fill opacity between 1% and 99%
3. Result: Content behind the selected layer becomes blurred

Purpose

Background Blur creates the frosted glass effect common in iOS interfaces and glassmorphism designs.

The layer acts as a window. Everything visible through it gets softened.

Use a CSS glassmorphism generator to preview similar effects for web implementation.

This technique improves user experience by maintaining context while focusing attention on foreground elements.

Step 6: How Do You Configure Progressive Blur?

Progressive blur creates a gradual transition from sharp to blurred areas.

In the Effect settings, switch from Uniform to Progressive. Handles appear on the canvas letting you control direction and intensity endpoints.

Action

1. Blur type toggle: Switch from Uniform to Progressive in settings
2. Direction control: Drag handles to adjust angle and blur gradient
3. Result: Blur transitions gradually across the layer

Purpose

Progressive blur creates more natural depth-of-field effects than uniform blur.

Great for simulating camera focus in prototypes or drawing attention to specific regions of an image.

Verification

How do you confirm your blur effect applied correctly?

• The blurred layer displays softened edges or obscured content on the canvas
• The Effects section shows the active blur effect with its value
• Zoom in (Z + click) to confirm blur is rendering correctly
• Export the frame (Ctrl/Cmd + Shift + E) to verify blur appears in PNG or JPG output

If the blur looks right on canvas but wrong in exports, check your export settings. SVG format does not support blur effects.

Troubleshooting

Background Blur Not Visible

Issue: You applied background blur but nothing changed.

Solution: Check fill opacity. Must be between 1% and 99%. Set to 50% or lower for more visible blur effect.

100% opacity blocks the blur entirely. 0% makes the layer invisible.

Blur Effect Slowing Down Figma

Issue: File becomes laggy after adding blur effects.

Solution: Toggle blur visibility using the eye icon in the Effects section while editing other elements.

Background blur is the most performance-intensive effect. Reduce blur value or limit the number of blurred layers in complex files.

Blur Not Appearing on Exported Image

Issue: Canvas shows blur but export doesn’t include it.

Solution: Export as PNG or JPG format. SVG does not support blur rendering.

Confirm layer visibility is enabled before export. Check the export settings panel for any conflicts.

Blur Extends Beyond Layer Bounds

Issue: Layer blur creates a halo effect outside the shape.

Solution: Mask the layer or place it inside a frame with “Clip content” enabled.

This contains the blur effect within defined boundaries.

Related Processes

Once you’ve mastered blur effects, explore these related Figma techniques:

• How to round corners in Figma for softer UI elements
• How to make a frame in Figma to contain blur effects
• How to crop in Figma for precise image editing
• How to create a design system in Figma with reusable blur styles

Blur effects translate to CSS backdrop-filter property when building for web.

Use the CSS box shadow generator to create similar depth effects in code.

For complete website designs, learn how to design a website in Figma using these blur techniques alongside other visual effects.

FAQ on How To Blur In Figma

What is the difference between Layer Blur and Background Blur in Figma?

Layer Blur softens the selected element’s pixels directly. Background Blur affects everything behind the layer while keeping the layer itself sharp.

Use Layer Blur for images. Use Background Blur for frosted glass effects.

Why is my background blur not showing in Figma?

Your layer’s fill opacity is likely set to 100%. Background blur requires fill opacity between 1% and 99% to be visible.

Lower the opacity to 50% or less for best results.

Can you blur text in Figma?

Yes. Select the text layer, open the Effects panel, and add Layer Blur. Adjust the blur intensity slider to your preference.

Works the same as blurring any other layer type.

What is the maximum blur value in Figma?

Figma allows blur values from 0 to 250. Most UI designs use values between 8 and 30.

Higher values create abstract, heavily softened effects suitable for artistic backgrounds.

How do I blur only part of an image in Figma?

Duplicate the image. Apply Layer Blur to one copy. Use a shape to cut or mask the blurred version over the sharp original.

This creates selective blur on specific areas.

Does Figma support Gaussian blur?

Figma’s Layer Blur functions as a Gaussian blur. It applies uniform softening across the entire layer using the same algorithm.

The effect is identical to Gaussian blur in Photoshop.

Why does blur slow down my Figma file?

Blur effects are render-intensive, especially Background Blur. Multiple blurred layers compound the performance impact.

Toggle blur visibility off while editing. Reduce blur values or limit blurred layers in complex files.

Can I save blur settings as a style in Figma?

Yes. Create an Effect Style from the Effects panel. Click the four-dot icon, then “Create style.”

Reuse this style across your design file for consistent blur effects.

How do I export a blurred image from Figma?

Select the frame containing your blur effect. Press Ctrl/Cmd + Shift + E to open export settings. Choose PNG or JPG format.

SVG does not support blur rendering.

What is progressive blur in Figma?

Progressive blur creates a gradual transition from sharp to blurred. Switch from Uniform to Progressive in Effect settings.

Drag the canvas handles to control direction and intensity gradient. Perfect for depth-of-field simulation.

Conclusion

Learning how to blur in Figma opens up new possibilities for your UI designs. You now have the tools to create depth, direct attention, and build modern glassmorphism interfaces.

The process is straightforward. Select your layer, open the Effects panel, choose your blur type, and adjust the intensity slider.

Layer Blur works directly on elements. Background Blur creates that frosted glass look behind semi-transparent layers.

Progressive blur adds natural depth-of-field transitions when uniform softening feels too flat.

Remember to export as PNG or JPG. Keep blur values reasonable for better file performance.

Start experimenting with blur effects in your next app design or landing page project. Small touches of blur can transform a good design into something that feels polished and professional.