Adjust Nsvisualeffectview Blur Radius and Transparency

How to apply blur effect to nsview / nswindow?

I was searching for this exact thing myself and managed to find an answer which I'll post here although this is quite an old question now.

This method blurs a view and all its subviews:

- (void)blurView:(NSView *)view
{
    NSView *blurView = [[NSView alloc] initWithFrame:view.bounds];
    blurView.wantsLayer = YES;
    blurView.layer.backgroundColor = [NSColor clearColor].CGColor;
    blurView.layer.masksToBounds = YES;
    blurView.layerUsesCoreImageFilters = YES;
    blurView.layer.needsDisplayOnBoundsChange = YES;

    CIFilter *saturationFilter = [CIFilter filterWithName:@"CIColorControls"];
    [saturationFilter setDefaults];
    [saturationFilter setValue:@2.0 forKey:@"inputSaturation"];

    CIFilter *blurFilter = [CIFilter filterWithName:@"CIGaussianBlur"]; // Other blur types are available
    [blurFilter setDefaults];
    [blurFilter setValue:@2.0 forKey:@"inputRadius"];

    blurView.layer.backgroundFilters = @[saturationFilter, blurFilter];

    [view addSubview:blurView];

    [blurView.layer setNeedsDisplay];
}

Or in Swift:

private func blur(view: NSView!) {
        var blurView = NSView(frame: view.bounds)
        blurView.wantsLayer = true
        blurView.layer?.backgroundColor = NSColor.clearColor().CGColor
        blurView.layer?.masksToBounds = true
        blurView.layerUsesCoreImageFilters = true
        blurView.layer?.needsDisplayOnBoundsChange = true

        var satFilter = CIFilter(name: "CIColorControls")
        satFilter.setDefaults()
        satFilter.setValue(NSNumber(float: 2.0), forKey: "inputSaturation")

        var blurFilter = CIFilter(name: "CIGaussianBlur")
        blurFilter.setDefaults()
        blurFilter.setValue(NSNumber(float: 2.0), forKey: "inputRadius")

        blurView.layer?.backgroundFilters = [satFilter, blurFilter]

        view.addSubview(blurView)

        blurView.layer?.needsDisplay()
    }

This code is taken and adapted from an excellent tutorial found here.

Swift ui macos background transparent TextField

You need visual effect view in background (it is used by default for sidebar styled lists)

Demo prepared & tested with Xcode 11.4 / macOS 10.15.6

struct VisualEffectView: NSViewRepresentable {
    func makeNSView(context: Context) -> NSVisualEffectView {
        let view = NSVisualEffectView()

        view.blendingMode = .behindWindow    // << important !!
        view.isEmphasized = true
        view.material = .appearanceBased
        return view
    }

    func updateNSView(_ nsView: NSVisualEffectView, context: Context) {
    }
}

and put it to needed area, in this case below TextField

    TextField("Username", text: $username)
    .padding(.leading, 20)
    .padding(.trailing, 20)
    .background(
        RoundedRectangle(cornerRadius: 5)
            .fill(Color.white.opacity(0.3)
        )
        .padding(.leading, 20)
        .padding(.trailing, 20)
    )
    .padding(.top)
    .padding(.bottom)
    .background(VisualEffectView())

Related Topics