Bird
Raised Fist0
Figmabi_tool~10 mins

Background blur in Figma - Interactive Code Practice

Choose your learning style10 modes available
LearnWhyDeepSheetTryChallengeScenarioRecallDash

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Practice - 5 Tasks
Answer the questions below
1fill in blank
easy

Complete the code to apply a background blur effect in Figma.

Figma
const blurEffect = { type: '[1]', radius: 10 };
Drag options to blanks, or click blank then click option'
ABACKGROUND_BLUR
BDROP_SHADOW
CLAYER_BLUR
DINNER_SHADOW
Attempts:
3 left
💡 Hint
Common Mistakes
Using LAYER_BLUR instead of BACKGROUND_BLUR.
Confusing shadow effects with blur effects.
2fill in blank
medium

Complete the code to add the blur effect to a Figma node's effects array.

Figma
node.effects = [[1]];
Drag options to blanks, or click blank then click option'
A{ type: 'DROP_SHADOW', radius: 5 }
B{ type: 'INNER_SHADOW', radius: 10 }
C{ type: 'LAYER_BLUR', radius: 20 }
D{ type: 'BACKGROUND_BLUR', radius: 15 }
Attempts:
3 left
💡 Hint
Common Mistakes
Using the wrong effect type.
Not wrapping the effect object in an array.
3fill in blank
hard

Fix the error in the code to correctly set a background blur effect with radius 8.

Figma
node.effects = [{ type: '[1]', radius: 8 }];
Drag options to blanks, or click blank then click option'
ADROP_SHADOW
BBACKGROUND_BLUR
CLAYER_BLUR
DINNER_SHADOW
Attempts:
3 left
💡 Hint
Common Mistakes
Using LAYER_BLUR instead of BACKGROUND_BLUR.
Misspelling the effect type.
4fill in blank
hard

Fill both blanks to create a background blur effect with radius 12 and visible property set to true.

Figma
const effect = { type: [1], radius: [2], visible: true };
Drag options to blanks, or click blank then click option'
A'BACKGROUND_BLUR'
B'DROP_SHADOW'
C12
D8
Attempts:
3 left
💡 Hint
Common Mistakes
Using the wrong effect type string.
Using the wrong radius value.
5fill in blank
hard

Fill all three blanks to define a background blur effect with radius 20, visible set to false, and blend mode set to 'PASS_THROUGH'.

Figma
const effect = { type: [1], radius: [2], visible: [3], blendMode: 'PASS_THROUGH' };
Drag options to blanks, or click blank then click option'
A'BACKGROUND_BLUR'
B20
Cfalse
Dtrue
Attempts:
3 left
💡 Hint
Common Mistakes
Using incorrect quotes or missing them for strings.
Confusing boolean values with strings.

Practice

(1/5)
1. What is the main purpose of using Background blur in Figma designs?
easy
A. To change the color of the background behind an object
B. To soften the area behind an object and improve focus on the foreground
C. To make the entire background completely invisible
D. To add a shadow effect to the object

Solution

  1. Step 1: Understand the effect of background blur

    Background blur softens the area behind an object, making the foreground stand out.

  2. Step 2: Compare options with the purpose

    Only To soften the area behind an object and improve focus on the foreground describes softening the background to improve focus, which matches the purpose.

  3. Final Answer:

    To soften the area behind an object and improve focus on the foreground -> Option B

  4. Quick Check:

    Background blur = soften background for focus [OK]
Hint: Background blur softens behind, not changes color [OK]
Common Mistakes:
  • Confusing blur with color change
  • Thinking blur hides the background completely
  • Mixing blur with shadow effects
2. Which of the following is the correct way to apply background blur to a layer in Figma?
easy
A. Use the Text tool to type 'blur' on the layer
B. Right-click the layer and choose 'Add Shadow' to create blur
C. Change the layer's fill color to a lighter shade
D. Select the layer, go to Effects, add 'Background Blur', then adjust the blur amount

Solution

  1. Step 1: Recall how to add background blur in Figma

    You add background blur by selecting the layer, going to Effects, and adding 'Background Blur'.

  2. Step 2: Evaluate each option

    Only Select the layer, go to Effects, add 'Background Blur', then adjust the blur amount correctly describes this process. Others describe unrelated actions.

  3. Final Answer:

    Select the layer, go to Effects, add 'Background Blur', then adjust the blur amount -> Option D

  4. Quick Check:

    Background blur added via Effects panel [OK]
Hint: Background blur is an Effect, not a fill or shadow [OK]
Common Mistakes:
  • Confusing blur with shadow effect
  • Trying to change fill color for blur
  • Using text tool instead of Effects
3. Given a popup with background blur set to 20px, what visual effect will the user see behind the popup?
medium
A. The background behind the popup will appear softened and slightly out of focus
B. The background behind the popup will be sharply visible with no change
C. The popup itself will become blurry and hard to read
D. The background will turn completely black behind the popup

Solution

  1. Step 1: Understand the effect of 20px background blur

    A 20px blur softens the background behind the popup, making it look out of focus but still visible.

  2. Step 2: Match the visual effect to options

    The background behind the popup will appear softened and slightly out of focus correctly describes the softened, slightly out-of-focus background. Others are incorrect effects.

  3. Final Answer:

    The background behind the popup will appear softened and slightly out of focus -> Option A

  4. Quick Check:

    20px blur = softened background behind popup [OK]
Hint: Higher blur means softer background, not blurry popup [OK]
Common Mistakes:
  • Thinking blur affects the popup itself
  • Expecting no change in background
  • Assuming background turns black
4. You applied background blur but the area behind your object remains sharp. What is the most likely reason?
medium
A. Background blur effect was added but blur amount is set to 0
B. The object is not on a layer above the background
C. The background layer is hidden or locked
D. The object has a fill color with 100% opacity

Solution

  1. Step 1: Check the blur amount setting

    If blur amount is 0, no blur effect is visible even if background blur is applied.

  2. Step 2: Evaluate other options

    Layer order, hidden background, or fill opacity do not prevent blur effect from showing if blur amount is >0.

  3. Final Answer:

    Background blur effect was added but blur amount is set to 0 -> Option A

  4. Quick Check:

    Blur amount 0 means no visible blur [OK]
Hint: Check blur amount slider, not just effect presence [OK]
Common Mistakes:
  • Ignoring blur amount value
  • Assuming layer order always blocks blur
  • Confusing fill opacity with blur effect
5. You want to create a dashboard popup that stands out over a busy background image. Which combination best uses background blur for clarity and design balance?
hard
A. Do not use background blur; instead, use a solid color fill with 50% opacity
B. Apply background blur of 5px and set popup fill opacity to 100%
C. Apply background blur of 30px to the popup background and set popup fill opacity to 70%
D. Apply background blur of 50px and set popup fill opacity to 10%

Solution

  1. Step 1: Understand design goals for popup clarity

    Background blur softens busy background, and 70% opacity keeps popup visible but not fully opaque.

  2. Step 2: Evaluate options for balance

    Apply background blur of 30px to the popup background and set popup fill opacity to 70% balances blur strength and opacity for clarity and design. Others either blur too little, too much, or lack blur.

  3. Final Answer:

    Apply background blur of 30px to the popup background and set popup fill opacity to 70% -> Option C

  4. Quick Check:

    Moderate blur + partial opacity = clear popup [OK]
Hint: Balance blur and opacity for best popup clarity [OK]
Common Mistakes:
  • Using too little or too much blur
  • Setting opacity too low or too high
  • Skipping background blur entirely