Forums | NoesisGUI

Posted: **31 Mar 2025, 14:32**

Hey,

I try to blur parts of my background in Noesis Studio. I would like the rectangle shown in the attached picture to blur the background image. I just can't figure out how to get this done in Noesis Studio. How is that to be done?

Thanks for the help.

Posted: **31 Mar 2025, 16:51**

Hi Danilo, Dorian here!

So the awesome thing, is that we support exactly what you're looking for within Studio!

This technique of blurring one Element with another can be achieved via a Behavior, and this is how you can do it:

Prep Work
1) Ensure that your background Element is named (either by double-clicking its name in the Navigator, or by selecting it in the Navigator and giving it a name at the top of its Properties panel). (We're doing this because we'll be targeting it by name in later steps.)

Creating a Behavior
2) Next, you're going to navigate to the Interactivity Panel [Ctrl+3], and jump to the 'Behaviors' Tab.

3) Now, we need to pick which Element we're going to use to blur the background Element. So, in the Navigator, select the rectangle that you want to use to do this.

4) With the rectangle Element still selected in the Navigator, press the '+' (Plus) icon at the top-right of the Interactivity/Behavior panel to add a new Behavior to the rectangle.

5) Select 'BackgroundEffectBehavior' from the ContextMenu that's popped out.
(This will add the rectangle to the Behaviors panel, and will populate the Properties for the Behavior on the right of the application window.)

Configuring the Behavior
6) You're then going to hover over the 'Source' field in the Behavior's Properties, and click on the little 3-Dot menu icon that appears, then click "Create Binding".

7) We are now going to select which Element we would like to target to be blurred. To achieve this, whilst remaining within the Binding section of the Behavior's Properties:
8) Select the "Name" tab, and then in the 'Element Name' dropdown list, find what you named your background Element in Step 1).
9) In the 'Path' field where by default it says "Not Set", simply delete that text from the field

Applying the Blur and Finishing Off
10) Still remaining within the Behavior's Properties, pick the BlurEffect from the 'Effect' section and set the strength of it in the 'Radius' field.
11) Save your Page
12) Close and re-open your Page's tab...and that should do it! (This step is normally not required, and we are investigating a fix to this bug at time of writing.)

Let us know if that did the trick, and would love to see the result too!

- Dorian

Posted: **01 Apr 2025, 15:06**

Hey Dorian,

This is genius. Thank you for this little Tutorial. I love how easy it is to create the blur effect.

For a quick prototype, I am pretty impressed with the results. I am curious how performant it is when used more often.

The only thing I would like additionally to that would be a more intense blurring, like the dynamic blur in iOS (like here):

: Screenshot 2025-04-01 150132.png (40.01 KiB) Viewed 3994 times

I played with the radius but higher than 20 makes no sense it doesn't get more blurry by that just darker. Maybe providing a harder blur algorithm is something for the back burner for you guys (if you want to).

Posted: **01 Apr 2025, 17:19**

The radius can be quite large, as shown in this example (click on the screen to see the blur), It can even be wider.

Are you sure going higher than 20 is not producing any change?

Posted: **03 Apr 2025, 15:27**

Mh, confusing. I see your xaml example goes to 80 and looks really blurry, that is kind of what I hoped for. Mine stops at a radius of 10 to have an effect. It just gets darker.

Here blur radius of 5:

Here blur radius of 20:

Here blur radius of 100:

And here a blur radius of 1000:

It has literally no effect on the big square box at some point. The Box has a Width and Height of 80 px and the background ist slightly transparent. I dunno if that has an effect on it.

Posted: **03 Apr 2025, 16:45**

Hey Danilo,

Quick favour, and just one last verification before we look at further diagnosis options --- would you be able to please confirm for me that in between each adjustment of the 'Radius' value, you:
1) Saved the file
2) Closed the file
3) Re-Opened the file.

Additionally, could you confirm for us the version number of the Studio app you're using? (the number in top-left corner of the application window)

Thank you!

- Dorian

Posted: **30 Oct 2025, 12:31**

Hi,

I am simply trying to do what the OP explained, and I have been following the steps listed in the first reply of this post by dstewart.

However, as you can see below, I have no way of expanding the effect settings to adjust the blur strength - If I click the arrow nothing happens, what am I doing wrong?

I followed the steps where you add the source binding and assign element by name - should the yellow around the source go away - makes it feel like its a warning?

Using Noesis Studio v0.1243-beta

Posted: **30 Oct 2025, 13:51**

Hi Gavmacca, Dorian here,

Thanks for writing to us to flag this, I've just looked into your situation, this appears to be a newly-introduced bug that appeared some time after 0.1.238.

I've just created a ticket, and we'll get on this immediately: #4468.
This will be fixed in our very next 0.1.244 release.

Thanks again for bringing this up, we really appreciate it!

- Dorian

Posted: **30 Oct 2025, 13:58**

Thanks Dorian! So I wasn't going mad! Happy to have helped, looking forward to the fix!

Posted: **07 Nov 2025, 21:13**

Hi, I've just downloaded the latest release v 0.1.251 - and I still can't seem to follow these steps

Specifically on step 4 + 5 on the quoted post below - when you add the behaviour the whole shape vanishes (it changes to a visual brush that is invisible) - I assume this is a newly introduced bug or am I doing something wrong?

If i change it from a visual brush back to a fill with some transparency, I still cannot see the intended effect.

Thanks! I'm really eager to get my hands on this with it working!

Hi Danilo, Dorian here!

So the awesome thing, is that we support exactly what you're looking for within Studio!

This technique of blurring one Element with another can be achieved via a Behavior, and this is how you can do it:

Prep Work
1) Ensure that your background Element is named (either by double-clicking its name in the Navigator, or by selecting it in the Navigator and giving it a name at the top of its Properties panel). (We're doing this because we'll be targeting it by name in later steps.)

Creating a Behavior
2) Next, you're going to navigate to the Interactivity Panel [Ctrl+3], and jump to the 'Behaviors' Tab.

3) Now, we need to pick which Element we're going to use to blur the background Element. So, in the Navigator, select the rectangle that you want to use to do this.

4) With the rectangle Element still selected in the Navigator, press the '+' (Plus) icon at the top-right of the Interactivity/Behavior panel to add a new Behavior to the rectangle.

5) Select 'BackgroundEffectBehavior' from the ContextMenu that's popped out.
(This will add the rectangle to the Behaviors panel, and will populate the Properties for the Behavior on the right of the application window.)

Configuring the Behavior
6) You're then going to hover over the 'Source' field in the Behavior's Properties, and click on the little 3-Dot menu icon that appears, then click "Create Binding".

7) We are now going to select which Element we would like to target to be blurred. To achieve this, whilst remaining within the Binding section of the Behavior's Properties:
8) Select the "Name" tab, and then in the 'Element Name' dropdown list, find what you named your background Element in Step 1).
9) In the 'Path' field where by default it says "Not Set", simply delete that text from the field

Applying the Blur and Finishing Off
10) Still remaining within the Behavior's Properties, pick the BlurEffect from the 'Effect' section and set the strength of it in the 'Radius' field.
11) Save your Page
12) Close and re-open your Page's tab...and that should do it! (This step is normally not required, and we are investigating a fix to this bug at time of writing.)

BlurEffect.jpg

Let us know if that did the trick, and would love to see the result too!

- Dorian

Forums | NoesisGUI

BackgroundEffects in Noesis Studio

BackgroundEffects in Noesis Studio

Re: BackgroundEffects in Noesis Studio

Re: BackgroundEffects in Noesis Studio

Re: BackgroundEffects in Noesis Studio

Re: BackgroundEffects in Noesis Studio

Re: BackgroundEffects in Noesis Studio

Re: BackgroundEffects in Noesis Studio

Re: BackgroundEffects in Noesis Studio

Re: BackgroundEffects in Noesis Studio

Re: BackgroundEffects in Noesis Studio