Blurring “behind” a source, like shown below or here, is one of the most requested tutorials so far. It’s been requested so much that I even started recording a few video tutorials, but that’s beside the point. So how exactly did I create the effect shown below?
The first thing I have to say is: What you see is not what’s actually happening here. In fact it’s the complete opposite when you consider how you’d normally do layering of image effects. With that in mind, let’s get started.
This was also posted on Patreon, read it here.
Setting up the Overlay
For this effect to work you will need two scenes: A scene that holds your transparent overlay, and a scene that holds your actual content. These important scene however is the overlay, as it will be used as an input to the Blur.
Create (or re-use) a Scene to hold the Overlay, and add your Camera to it. Ensure that it is transparent in some way, either by Greenscreening or Depth Masking, and set the Transform option to “Fit to Screen”. Next add a Color Source to the same Scene and add a Color Correction filter to the Color Source, and set the Opacity to 1 and the Color to black (#ff000000) in the filter. This time set the Transform option to “Stretch to Screen”.
With those two set up, all that’s left to do is put them in a group. Select both and create a new Group out of them, lock the original two sources, and place the Group in the right position in your overlay.
Achieving the Blur
And now comes the even simpler part of achieving the actual blur effect. If you haven’t noticed until now, my background sources that are blurred always cover the entire screen. This isn’t just an artistic choice, it’s a straight up limitation of how this technique works, and it’s also a limitation of how OBS actually renders the scene you see. Let’s continue with this in mind.
Create (or re-use) a Scene to hold our streamed content, and add your overlay scene to it. Below the Overlay Scene Source, add a Display Capture (or whatever other Source you wish to apply the blur to) and set the Transform to “Fit to Screen”. Now let’s make the magic happen.
Add a Blur filter to that new source, set the preferred blur method and size (I use Dual Filtering Area blur of size 4), and check the Apply a Mask option. Set the “Mask Type” to “Source” and select the Overlay Scene as the “Source Mask”. All that’s left now is to set the “Mask Alpha Filter” to 100 and “Mask Multiplier to the highest value.
And now you should have a blur behind your overlay. Repeat the Blur filter steps for each Scene where you have a full screen source, and add the Overlay Scene to each of them, and you’ll have the effect this tutorial was for. Yeah, that’s it – it really was this simple.
One of the problems with this setup is that no matter what you do, it won’t work for Sources that don’t cover the entire screen with the same aspect ratio. The blur will be offset and squished, or be in the wrong position, or all three together. Fixing this with Crop/Pad and Scaling/Aspect Ratio filters doesn’t work well if the resolution and aspect ratio can change – like with a video capture from a capture card. This could be worked around with a Source Mirror, but it’s likely a complex setup if you want to do it with sources in the middle of the screen.
Then there is the fact that blurring a full size source is very expensive, at least with Gaussian blur. Unfortunately this is not something that can be easily fixed, so it is best to use Dual Filtering blur which uses around 5% of the GPU usage of Gaussian Blur if not less.
That’s all there is to the effect. It’s nothing more than a simple but effective trick that looks complex, due to the limitations of the OBS layering system. And I hope that learning how to do this will drive your creativity to do even cooler stuff than this.
If you liked this or anything else that I create, consider clicking the “Become a patron” button if you aren’t a Patron yet, or sharing any of content on Twitter and Facebook! I try to release content regularily, and Patrons get 30 days early access to most releases.