How To Use Blur Effect In UI Design

Blur effect can be a little hard to apply sometimes. But using it correctly can enhance your UI design a lot, that’s also a reason we see blur effect in UI designs all the time. There are a lot of ways to apply blur in your UI design. And you don’t have to be scared of it at all.

Today, Dan Romero, an expert UI/UX designer and an amazing educator on the topic talks about how to use blur effect in UI design. He also talks about the advantages of using the blur effect in some particular cases, and where to use it correctly. Let’s have a look and learn how we can effectively use blur effect in UI design.

Using Blur In UI Design

Dear Blur

1. Global Backgrounds

Ideal for scenarios with not a lot of elements, so you can play with the visual weigh. Ideally over photographs. In onboarding screens, and also in login and signup interfaces.

2. Overlaid Sections

Secondary overlaid sections are a smart place to use blur effect as well. Bottom sheets and sidebar panels, for example. Note that those are always attached to some edge, they are floating at all.

3. Buttons & Inputs

Yeah, we’re talking about CTAs here. “What is sexier than a blurry “play” button? You got this!

Using well (taking care of contrast) you can use it in inputs and regular buttons as well (think Apple).

4. Modal And Dialog Backgrounds

It is all about directing user attention to a specific point and do it smartly. Blurry backgrounds help to increase the contrast between the content behind and the main action the user needs to take.

5. Tooltips And Flyout Panels

So, you want to give quick advice or hint in your UI? Or even condense quick filters without popping up on entire panel with an enormous shadow? A small blurry floating panel could be the smart solution sometimes!

6. Realistic Shadows

There’s not a lot to say. With a blur effect, we can accomplish better results regarding shadows and make them more “custom” depending on the scenario and photograph, the result is simply magic.