How to Blur in Figma: Add Depth to Your Design

Blur in Figma lives in one place: the Effects panel on the right side of the screen. No toolbar icon, no filter menu, nothing to rasterize before you start. That last part is the real departure from Photoshop, where a Gaussian blur wants a flattened layer before it will do anything at all.

And every blur here is just a number. Radius, typed or dragged. Not a preset labeled “soft” or “heavy”.

Figma’s own REST API documentation currently groups effects into drop shadow, inner shadow, blur, noise, texture, glass, and shader. Blur is the only one of those categories that forks into two type values, LAYER\_BLUR and BACKGROUND\_BLUR, each carrying a numeric radius field (Figma, 2026).

What Is the Figma Blur Effect?

Non-destructive, which is the part that matters day to day. Vectors stay vectors. Images keep their original pixels. Pull the radius back to zero and you have exactly what you started with, no history panel required.

It applies straight to shapes, text, images, and components through the same panel, with no prep step in between.

Layer blur and Background blur are the native types. Progressive Blur and the Glass effect sit on top of those, and both get their own section further down.

A couple of things blur is not. It isn’t a standalone tool with its own icon anywhere in the interface. It also isn’t a fix for a blurry export, which is a rendering issue that lives somewhere else entirely and has nothing to do with the Effects panel.

Layer Blur vs Background Blur vs Glass Effect: Which One Do You Need?

Ask what you actually want softened. The object, or whatever sits behind it.

Layer blur works on the object’s own pixels or vectors. Out-of-focus icons, de-emphasized background shapes, that kind of thing. Background blur ignores the object entirely and softens whatever sits behind a semi-transparent layer, which is what you want for a modal, a nav bar, or an overlay card sitting on top of a photo.

One thing that catches people out: a single layer can carry one Layer blur and one Background blur at the same time, but never two of the same type. Stacking a second Layer blur on top of the first does nothing. The panel lets you add it, the canvas ignores it.

Blur also does a lot of quiet work for visual hierarchy, pushing secondary content out of focus so the eye lands on what matters first.

How Do You Add Layer Blur or Background Blur to an Object?

The first few clicks are identical either way. Select the object, open Effects on the right, add a new effect, then pick the type from the dropdown.

Adding Layer Blur

Simpler of the two, since it doesn’t care what’s underneath it.

1. Select the shape, image, or text layer
2. Click the plus icon next to Effects in the right panel
3. Choose Layer blur from the effect type dropdown
4. Open the effect’s settings and drag the blur radius slider, or type a value directly

Push the radius high enough and the shape underneath stops being recognizable. Sometimes that’s the point. Usually it means you overshot.

Adding Background Blur

There’s an extra step here, and skipping it is the single most common reason background blur appears to be broken. Lower the fill opacity first. Otherwise the blur has nothing to show through.

1. Draw or select the object that should sit above the blurred area
2. Lower its fill opacity so light from behind can pass through
3. Add the Background blur effect from the same dropdown
4. Adjust the radius, then use the Saturation control to keep or mute the colors showing through

That Saturation control is exclusive to Background blur. Layer blur has no equivalent. It’s genuinely useful when a busy photo behind a card is bleeding too much color through and the whole panel starts looking dirty.

A plain frame tends to behave better than a loose shape here, since it keeps the blurred area contained to one clean boundary.

Why Isn’t Background Blur Showing Up?

Nine times out of ten, the layer sitting on top is simply too opaque. Background blur only renders through a fill that carries some transparency. At 100 percent opacity, there is nothing for the blur to show through, and Figma won’t warn you about it.

Two other causes come up often enough to check. An empty canvas area produces no visible blur, because there’s no content behind the layer to soften. And sibling layers inside one parent can misbehave: a rendering issue reported on Figma’s own community forum in January 2024 showed only the top layer keeping its blur and transparency correctly, with everything else in the group turning opaque.

Figma support said at the time it was not aware of the issue internally (Figma community forum, 2024), which suggests it can still catch designers off guard today.

The fix is usually quick. Drop the fill opacity to somewhere around 10 to 40 percent, confirm there is real content behind the layer, and separate it into its own frame if the siblings keep acting up.

How Do You Build a Frosted Glass Card Using Blur?

Stack the right effects in the right order and the whole thing takes about ninety seconds.

1. Draw the shape and fill it with a light solid color
2. Drop the fill opacity to roughly 15 to 20 percent
3. Add Background blur with a radius around 20
4. Add a thin, low-opacity stroke so the edge reads as glass instead of a flat rectangle
5. Layer a soft drop shadow underneath for separation

That stroke is doing more work than it looks like. Skip it and the panel just reads as washed out.

The look traces back to real glassmorphism design work, the same visual language behind macOS’s frosted panels and, further back, Windows Vista’s Aero interface from 2007.

Scales down to a single card or up to a full navigation bar without changing anything about the steps. And for anyone prototyping in code first, that same fill, blur, and border combination translates almost directly into CSS.

What Is Progressive Blur, and How Do You Create a Gradient Blur?

Fading a blur across a layer used to require duplicating, masking, and a fair amount of swearing. Progressive Blur handles it natively.

Rather than one flat radius, the effect ramps up or down across the layer, closer to the soft edge fade you see in iOS interfaces. Direction and falloff get set by dragging handles directly on the layer. No angle field to type into, which I actually prefer.

The ceiling is a radius of 100, and designers have hit it on layers as large as 1000 by 1000 pixels (Figma community forum, May 2025). On a wide hero fade, 100 can feel thin.

It shipped as part of Figma Draw at Config 2025 in May 2025, alongside enhanced booleans and noise and texture fills (Figma, 2025). Figma Draw sits inside standard Figma Design and toggles on or off, so it isn’t a separate paid tier. Under the hood, Figma’s own REST API documents Progressive Blur as its own blur style, with fields for a start radius, an end radius, a start offset, and an end offset (Figma REST API documentation, 2025).

When you need to blur only part of an image and 100 isn’t enough, duplicating the layer and applying a mask over the blurred copy still gets the job done manually.

What Is the Glass Effect, and How Is It Different From Background Blur?

Blur, tint, and edge light arrive as one material property instead of three hand-stacked layers. That’s the whole pitch.

The visual reference point is decades old. Windows Vista’s Aero shell in 2007 and Apple’s frosted panels in macOS Big Sur both leaned on the same idea of translucent, light-catching surfaces.

Figma took Glass out of beta on January 27, 2026, rolling out four capabilities at once (Figma product updates, 2026).

The native effect gives you one property controlling blur, tint, and edge light together, and it now applies to shapes and text rather than frames alone. What you give up is granularity. Older files built the manual way also don’t convert on their own, so a legacy library stays legacy until someone rebuilds it.

Building it by hand with Background blur still has a case. Every fill, stroke, and shadow value is yours to set, and it works in older files with no update needed. The cost is layer count, plus the fact that a style change means touching every card individually.

Corner Rounding, Splay, and Variables

Some of the new controls change how much a glass panel can be art directed rather than just applied.

• Each corner of a glass frame can now be rounded independently, instead of one radius for all four
• A new Splay property adjusts how light appears to bend around the object’s edges
• Glass properties can now read from Figma variables, so one shared value updates every glass panel that references it

That last one is the quiet win. A design system with a dozen glass cards needs one variable changed, not a dozen manual edits.

Does Blur Work the Same on Text as It Does on Shapes and Images?

Not quite, and the gap shows up the moment Layer blur touches a text layer.

Figma converts text into its outline path before applying Layer blur, rather than blurring the character glyphs directly. That conversion step is documented in Figma-to-code tooling as the reason a blurred text layer in Figma can render heavier or darker than the same radius applied to a plain shape (Grida design-to-code documentation).

Close to how SVG text gets treated once it’s converted to a path for styling. The glyph stops being live text and becomes geometry.

Background blur behind text behaves normally, since it’s blurring the layer underneath and never touches the type. Images and plain shapes blur evenly at any radius with no path conversion involved.

If a blurred text look has to match a coded equivalent exactly, duplicate the text as an image or vector outline first, then blur the copy. Avoids the mismatch entirely.

Why Does Blur Break Smart Animate or Slow Down Large Prototypes?

This one is an acknowledged bug, not user error. Figma’s engineering team confirmed in June 2025 that layers using Background blur break Smart Animate interpolation, because the blur’s internally generated noise regenerates randomly with every render (Figma community forum, June 2025).

Affected components either jump instantly between states or refuse to animate at all.

No fix timeline came with the confirmation. Just a workaround: duplicate the frame so blurred layers stay pixel-identical rather than regenerating their noise on every frame.

You’ll notice it first in everyday micro-interactions. A blurred toast notification, a frosted modal sliding in, exactly the small moments where a stutter is most obvious.

Separately from all that, large frames carrying a heavy blur radius cost rendering time on their own. It shows up as lag while panning or scrubbing through a dense prototype, with Smart Animate nowhere in the picture.

Keep blurred layers small and few in interactive prototypes. Test every Smart Animate transition before calling a file final.

How Do You Save a Blur Setting as a Reusable Effect Style?

Once a blur value looks right, save it as an Effect Style so nobody has to eyeball that radius again.

• Set the blur type and radius the way it should look on the current layer
• Click the style icon next to Effects and save it as a new Effect Style
• Name it something specific, because “Card blur 20” reads better than “Effect 1” six months from now
• Publish the library so teammates can pick it up in their own files

Update the source style later and every instance follows, which keeps a whole set of frosted cards or overlays consistent without touching each one by hand.

An Effect Style can bundle a Drop shadow alongside the blur too. Handy when the two always travel as a pair.

Same logic behind design system components, really. One source of truth that many screens pull from, instead of every screen carrying its own copy. Teams building a broader library often lean on established Figma components best practices to decide what deserves its own style versus what stays a one-off.

How Does a Blurred Design Translate to Code in Dev Mode?

Dev Mode is where a blurred layer stops being a design decision and becomes a value someone has to match in code. It reads the blur effect off the layer and offers a snippet close to what the browser or app will render, inside the same Dev Mode panel used for every other property.

The numbers don’t always map one to one. That’s where most handoff mistakes come from.

CSS Handoff

Layer blur maps to filter: blur(), Background blur maps to backdrop-filter: blur(), and the radius value carries across in both cases. Both are standard CSS, so a browser-based prototype can preview the effect without anyone opening Figma.

Here’s the catch nobody tells you about. Figma’s blur radius renders roughly twice as strong as the equivalent CSS blur, so accurate handoff tooling halves the radius before writing it into filter or backdrop-filter (Figma-Context-MCP changelog, 2026). If your frosted card looks weaker in the browser than in the file, this is usually why.

backdrop-filter also needs browser support and a transparent background on the element, mirroring Figma’s own transparency rule for Background blur.

Flutter Handoff

Flutter, Google’s UI toolkit, doesn’t use a radius value at all. It works in sigma.

Layer blur becomes ImageFiltered wrapping an ImageFilter.blur(sigmaX, sigmaY). Background blur becomes a BackdropFilter using the same filter type underneath.

Exported PNG or JPG assets skip all of this and bake the blur into pixels permanently, so any later radius change means re-exporting rather than editing a value in code.

When Should You Not Use Blur in Figma?

Blur is a visual effect, not a content control. Treating it like one causes real problems.

Start with accessibility, because a blurred semi-transparent panel sitting behind body text can quietly drop contrast below what’s readable. WCAG 2.2 sets a minimum color contrast ratio of 4.5 to 1 for normal text at Level AA (W3C, WCAG 2.2, Success Criterion 1.4.3), and a frosted panel behind small type can fall short of that fast. For a fuller pass beyond this one effect, a general web accessibility checklist covers contrast alongside everything else worth checking before a frosted panel ships.

Then there’s redaction. Blur is not a redaction tool, whatever the visual result looks like. The pixel data underneath a blurred layer is still sitting in the file. Blur only changes how it renders on screen.

A 2016 study from UC San Diego researchers found Gaussian-blurred text still recoverable to a legible standard using statistical modeling at blur radii up to roughly 45 pixels in their tests, only dropping below that recognition threshold beyond that point (Hill, Zhou, Saul, Shacham, Proceedings on Privacy Enhancing Technologies, 2016).

A 2022 follow-up study went further, building an automated neural-network system that recovers text from pixelated images without the manual, per-image parameter tuning that earlier statistical approaches required (Garske and Noack, Gesellschaft für Informatik, 2022). Security firm Bishop Fox demonstrated a related weakness publicly with an open-source tool called Unredacter, built to reverse pixelated text redactions on real screenshots.

Mask it or delete it when the goal is actually hiding information. No radius makes blur safe for that.

Three smaller cases where blur causes friction rather than danger:

• Heavy blur radius values can shift measured edges enough to throw off automated design-to-code tools reading exact boundaries
• Progressive Blur’s radius ceiling of 100 can fall short on a slow, wide fade across a very large hero layer, forcing a manual layered workaround
• Many sibling layers in one parent hit that documented Background blur rendering inconsistency covered earlier

None of which makes blur a bad effect. It just has edges of its own, worth knowing about before it ships.

FAQ on How To Blur In Figma

Is There a Keyboard Shortcut to Add Blur in Figma?

No dedicated shortcut adds Layer blur or Background blur directly. Both still require opening the Effects panel and picking the type from the dropdown. Figma’s keyboard shortcuts settings can map a key to open Effects, not one blur type specifically.

Is Figma’s Blur Effect the Same Thing as a Gaussian Blur?

Effectively yes. Both Layer blur and Background blur apply a Gaussian-style weighted average across nearby pixels, the same bell-curve method most design and photo tools use. The real difference from Photoshop is when that math runs, not what it computes.

Do You Need a Plugin for a Glassmorphism Look in Figma?

No longer, for most cases. Figma’s native Glass effect and Background blur cover fill, tint, and edge light without a plugin. Figma Community plugins still help for pre-built card templates or generating multiple glass variants at once.

Does Blur Work the Same in the Figma Mobile App as on Desktop?

Layer blur and Background blur render the same on mobile as on desktop, both reading the same file data. Editing the radius or adding a new blur effect from a phone stays far more limited than the desktop Effects panel.

Can a Component Instance Override the Blur Set on Its Main Component?

Yes. Blur is an effect property, and instances can override it independently of the main component, the same way they override fill or corner radius. Heavy overrides across many instances just make the design system harder to track.

What Blur Radius Works Best, a Subtle Look Versus a Strong Frosted Look?

A subtle depth effect sits in the low single digits. A readable frosted panel behind text needs the teens to twenties. Large hero fades push toward Progressive Blur’s own ceiling, with the visual result mattering more than the number itself.

Does Adding Blur Increase a Figma File’s Size?

Barely. Blur stores as a small effect property, a type and a radius value, not rendered pixels. A file grows from images, components, and plugin data far more than from any number of blur effects across its layers.

Where Blur in Figma Breaks Down

The awkward part is that blur breaks down at exactly its most flattering setting. A Background blur radius in the high teens to twenty is where frosted panels look best, and it sits well inside the range privacy researchers have documented as recoverable.

So a panel tuned to look good offers no real privacy margin. The aesthetic setting and the setting security researchers flag as recoverable are sitting on top of each other.

Figma’s January 2026 release note described a staged rollout for the Glass effect, and by September 2026, when this was checked, that spread had reached every file. A project still missing Glass controls is running on the older Background blur path, not some Glass exception.

Radius choices, transparency, and Dev Mode all sit downstream of that one decision, and the fuller Figma developer handoff process picks up right where a single blurred layer stops being the whole story.