hot to apply blur in figma

A Step-by-Step Guide to Applying Blur in Figma

Daniel Scott

@dan

Hi, everyone!

In this post, we will discover how blur effects can improve user interface (UI) design and overall user experience (UX) and learn how to apply them to backgrounds and images in Figma!

I’ll guide you through a quick and easy step-by-step guide and give you some tips and tricks to help you master these awesome skills!

This post is based on one of the classes from my Figma Essentials course. When you become a BYOL member, you gain access to this course as well as my 30+ additional courses on After Effects, Photoshop,Illustrator, Lightroom, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up!

Ready for more? Become a BYOL member!

Explore 30+ Essentials and Advanced courses in Figma, Photoshop, Illustrator, Lightroom, Premiere Pro, Webflow, and more. Enjoy personalized support, earn certificates, connect with other creators and tackle exciting community challenges.

START YOUR LEARNING JOURNEY
icon all courses benefit

Unlimited access to ALL content

Instant access to all of our courses and exclusive content while you're a member.

icon support benefit

Priority advice and support

Ask us anything! Our amazing Teaching Assistants are here to support you

icon certificate benefit svg

Certificates of achievement!

Celebrate and share the milestones in your learning journey

Why should we use blur effects in UI?

Blur effects create a sense of depth in a layout. For better results, it’s important that we don’t have too many elements in our design. We can find blur effects applied to abstract backgrounds to screens or specific interfaces, like login or signup frames.

We can also apply blur effects to overlapping elements, like top navigation or sidebar menus, keeping our designs clean and easy to read and flow through.

Blur effects can also enhance buttons in modern and elegant design interfaces. These will lead users into taking specific action without overwhelming their experience with too many elements to observe.

If used wisely, blurred backgrounds are also great for hierarchy, contrast, and accessibility. Adding a blur effect to the background of key information panels or decisive call-to-action interfaces will make them stand out and capture a user’s attention.

Mastering these skills takes time. Too many blurred elements can cause distraction and reduce readability, heavy pain points for user experience. Look for UI case studies online, check out how top brands handle blur effects on their websites, and experiment to become more familiar with when to apply a blur. 

 

1.      Layer Blur in Figma

Layer Blur is easy. As an example, I’ll use this photo from this Product Details page. First, we select the image by clicking on it with the Move tool, which you can find on the top toolbar or use the shortcut key “V” to activate. Next, we move to the right sidebar and, under Effects, click on the Add button, the one with the “+” sign.  

adding a new effect to an object in figma

We can add effects like blur or drop shadow to our prototype’s elements.

Finally, we click on Layer Blur and that’s it! Our image is now blurred. We can adjust blur effect settings, we’ll have a look at that a bit down the road.

blurred image of a girl with headphones in figma

Blur is great for directing user attention, adding depth and motion to a static layout.

Another use case for the Layer Blur effect: we can apply it to multiple images, arrange them together and assign them different values to set hierarchy and depth. Let’s use the three images as seen below. After adding the Layer Blur effect, we’ll click on the effect settings button and give each one a value.

layer blur applied to multiple images in figma

Layer blur works great on a multi image layout and points out what is priority to the user.

As we can see, there is a depth of field look to this composition. The top image is fully focused, and has our full attention. The second is a bit blurred, and the last is pretty much out of focus, making them less distracting while keeping the user aware of their presence. It’s a great trick.

image hierarchy in figma

Different blur intensities create a depth of field effect that defines visual hierarchy.

Timeout #1

Check out this article to learn more on Blur and Shadow effects in modern UI design.   

2.      Background Blur in Figma

Let’s move on to Background Blur and how to best apply it to our prototype. We’ll use the background from this Confirmation page and an overlaid element that will be blurred to allow users to comfortably observe them both. We’ll start by creating a frame over the map background, using the Rectangle tool, select it and fill it with white.

creating a new shape with the rectangle tool in figma

Use the Rectangle tool to add new elements to your project.

Then, keeping our frame selected, we move to the Effects panel on the right sidebar and add the Background blur effect.

applying background blur to a square frame in figma

The Background Blur tool will affect the selected object’s background.

Nothing seems to change, huh? For us to see the effect, our frame’s Fill needs to be a bit transparent. To do this, we move up to the Fill panel and change the Opacity value next to the Hex code. Let’s try 50%.

adjusting object transparency from the fill panel in figma

Don’t forget to adjust the object’s Fill opacity to make your Background Blur effect visible.

It worked! We’ve changed the frame’s background. We can see the part of the map below the frame but it is a bit blurred. Let’s click on Effect settings and adjust the value until we are happy with the effect’s intensity.

adjusting background blur intensity in figma

We can adjust the blur effect’s intensity from the Effect settings panel.

Timeout#2

Get inspired with this article on 10 of the best UI case studies in 2024. See if any of them could be improved by adding or removing blur effects.

  

3.      Creating an Effect Style in Figma

Let’s say we need to add this background effect to many different elements along the design process, throughout multiple pages. Things like buttons, overlaying panels, and pop-up information cards. Do we need to take all these steps again for each one of them?

No! We can create an Effects Style from the settings we’ve set a few paragraphs above! How can we do this?

Easy!

Let’s go back to our Confirmation page and select the frame we’ve been working on. I’ve added a drop shadow effect for extra depth and visibility. Let’s save all these settings as a Style. We move to the Effects panel, click on the Styles button and then on the Add button, inside the Effect Styles dialog box.

creating an effect style in figma

Creating an Effect Style saves time and makes it easy to share effect settings with other team members.

Next, we give our new style a name – it should be easy to remember or easily identifiable to any other member on your team. When you’re done, click on Create Style and it’s done!

naming an effect style in figma

Choose a name that anyone can understand and relate to the effect you’re working on.

How do we apply this Style to a new frame? Let’s have a look!

I’ve created a new frame on the homepage. Nothing much, just a rectangle with a gray solid fill. Let’s change it in a flash. We move back to the Effects panel, click on Styles, and finally on the style we’ve just set up.

selecting a background blur effect style in figma

Go to the Effect Styles panel to select the Blur Model Style and replicate the Background Blur on your new object.

Nothing happened! What are we missing…? You’re right, we have to change the frame’s Fill Opacity to less than 100% to make it transparent. Let’s go for 50% once again and…

adjusting object transparency from the fill panel in figma

Always remember to check the object’s Fill transparency before hitting any panic button!

Success! Our new frame’s background is now blurred and transparent, allowing us to catch a glimpse of what is below it without overwhelming our senses! Isn’t this great?

 

And there we have it!

We’ve covered Layer and Background Blur effects in Figma, and have a clear idea of how blur effects can transform our designs, making them smarter and more accessible to your end users. This is a valuable skill for modern UI, so take your time and practice.  

What 's Next?

To learn more about UI and Figma, join BYOL and you will gain access to my Figma Essentials and Advanced courses as well as my 30+ additional courses on Photoshop, Illustrator, Lightroom, Premiere Pro, Webflow, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Get started here.  

See you in class! – Dan

Ready for more? Become a BYOL member!

Explore 30+ Essentials and Advanced courses in Figma, Photoshop, Illustrator, Lightroom, Premiere Pro, Webflow, and more. Enjoy personalized support, earn certificates, connect with other creators and tackle exciting community challenges.

START YOUR LEARNING JOURNEY
icon all courses benefit

Unlimited access to ALL content

Instant access to all of our courses and exclusive content while you're a member.

icon support benefit

Priority advice and support

Ask us anything! Our amazing Teaching Assistants are here to support you

icon certificate benefit svg

Certificates of achievement!

Celebrate and share the milestones in your learning journey