Progressive Layer Blur in Figma: A Step-by-Step Glass Effect Tutorial

Post by @uiux.amina

---

The progressive layer blur is one of those Figma techniques that separates intermediate designers from advanced ones. It is the effect that makes glassmorphism feel real, gives depth to flat interfaces, and creates visual hierarchy without relying on color alone. This tutorial from @uiux.amina walks through the entire process, and we are going to break it down step by step.

The concept is simple but the execution matters. Instead of applying a single uniform blur to an element, you layer multiple blur values across different surfaces to simulate how light passes through transparent materials in the real world. The result is a glass effect that feels physical rather than synthetic.

Understanding Why Progressive Blur Works

Before jumping into the steps, it helps to understand the principle behind the effect. In the real world, when you look through frosted glass, the blur is not uniform. Objects closer to the glass are sharper, while objects farther away are more diffused. This gradient of focus is what makes glass feel real.

In Figma, you simulate this by stacking layers with different blur values. The key insight is that you are not just making things blurry. You are creating a depth map. Each layer represents a different distance from the viewer, and the blur amount corresponds to that distance.

Here is what you need to understand about the layer structure:

• Background layer. This is the content behind the glass. It stays sharp or minimally blurred.
• Mid blur layer. A duplicate of the background with a moderate blur applied. This represents the content as seen through the first layer of glass.
• Heavy blur layer. Another duplicate with a stronger blur. This sits behind the glass surface itself and creates the deepest level of diffusion.
• Glass surface. The top layer with a semi-transparent fill, subtle border, and sometimes a light noise texture to sell the material.

Step 1: Set Up Your Background

Start with the content that will sit behind your glass surface. This could be an image, a gradient, or a complex composition of shapes. The important thing is that this background has enough visual variety for the blur to be noticeable. A flat color background will not show off the progressive blur effect because there is nothing to blur.

Place this background in a frame and make sure you know its dimensions. You will be duplicating parts of it.

Step 2: Create the Blur Layers

This is where the progressive part comes in. You need at least two blur layers between the background and the glass surface:

1. Duplicate the background. Copy the entire background frame and paste it on top. Apply a layer blur of 4 to 8 pixels. This is your light blur layer.

2. Duplicate again. Paste another copy on top and apply a layer blur of 12 to 20 pixels. This is your heavy blur layer.

3. Mask to the glass area. Use a mask or clip the blur layers so they only appear within the bounds of your glass surface. Outside the glass, the original sharp background should remain visible.

The exact blur values depend on your design scale. Larger artboards need heavier blur values to achieve the same visual effect. Start with the values above and adjust by eye.

Step 3: Build the Glass Surface

Now add the glass layer on top of your blur stack. This is the layer the user actually sees and interacts with. Set it up with these properties:

• Fill. White with 5 to 15% opacity. This gives the glass its translucent quality.
• Border. 1 pixel, white, 20 to 30% opacity. This simulates the edge of the glass where light catches.
• Inner shadow. A subtle white inner shadow at 30% opacity adds a frosted quality.
• Drop shadow. A soft, low-opacity drop shadow separates the glass from the background and adds depth.

The combination of these effects is what sells the material. Each one alone looks unconvincing. Together, they create the impression of a physical surface.

Step 4: Refine and Add Detail

The final step is refinement. Look at the result and ask:

• Does the blur feel natural, or does it look like a filter was slapped on? If it looks forced, reduce the blur values.
• Does the glass surface sit convincingly in the space? Adjust the drop shadow opacity and blur until it feels grounded.
• Is there enough contrast between the glass and the background? If everything blends together, increase the glass fill opacity slightly.

A few pro tips from the tutorial:

• Add a gradient overlay to the glass fill instead of a flat color. This simulates how light hits the glass surface unevenly.
• Use noise sparingly. A 1 to 2% noise texture on the glass fill can sell the frosted quality, but too much makes it look dirty.
• Consider adding a subtle highlight stroke on the top edge of the glass. Light catches the top edge of transparent surfaces in the real world, and replicating that detail adds realism.

When to Use Progressive Blur

This technique is not for every interface. Use it when:

• You need to create visual hierarchy between content layers
• A glassmorphism aesthetic fits the brand and product
• You want to show background context behind a foreground element without losing readability
• You are designing for an interface that benefits from depth cues, like music players, photo editors, or media apps

Avoid it when:

• The interface is already complex and adding blur will increase cognitive load
• Performance matters more than visual polish, since multiple blur layers can be expensive to render
• The brand calls for a flat, minimal aesthetic

This tutorial from @uiux.amina is a great reference to keep bookmarked. The progressive layer blur is a technique you will use repeatedly once you master it.

If you want to put these Figma techniques into practice and build working app prototypes, try Base44 to spin up functional web apps in minutes. Or if you want to showcase your Figma designs in premium mockup environments, head to the Newform Studio.

---

Original Instagram post by @uiux.amina. View the original carousel on Instagram.