Swift add a transparent and blur view on top of another view

Question

design is here:

So the button stackview is having a blur & transparent view on top of another ImageView. How can I make this work? I've tried the blur effectview and visual effectview but all failed on fulfill this design. I also try to usign the CIFilter to blur the background image of the StackView but still not the same one.

Answer for the comment, code for blur effectveiw and visual view. see below image for the real result.

let test: UIView = {
    let test = UIView()
    test.backgroundColor = .clear
    return test
}()
let blurEffect = UIBlurEffect(style: .extraLight)
    let blurView = UIVisualEffectView(effect: blurEffect)
    blurView.translatesAutoresizingMaskIntoConstraints = false
    pictureImageView.insertSubview(blurView, at: 0)
    blurView.snp.makeConstraints { (make) in
        make.centerX.equalTo(view)
        make.top.equalTo(view).offset(450)
        make.width.equalTo(169)
        make.height.equalTo(48)
    }
    let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)
    let vibrancyView = UIVisualEffectView(effect: vibrancyEffect)
    vibrancyView.translatesAutoresizingMaskIntoConstraints = false
    vibrancyView.contentView.addSubview(test)
    blurView.contentView.addSubview(vibrancyView)
    vibrancyView.snp.makeConstraints { (make) in
        make.centerX.equalTo(view)
        make.top.equalTo(view).offset(450)
        make.width.equalTo(169)
        make.height.equalTo(48)
    }

Update, after add the alpha @Narjes mentioned below, the only code added is the blurView.alpha = 0.3, and the result is here, seems missing the blur effect.

Answer 1

your mistake is not setting the alpha here

update: set the UIBlurEffect to .regular .

• keep alpha in 1.0 , because decreasing it also decreases blur.

updated: here is what are you looking for:

        let blurView = UIVisualEffectView(effect: UIBlurEffect(style: .regular))
        blurView.translatesAutoresizingMaskIntoConstraints = false
        blurView.alpha = 1.0
        blurView.frame = CGRect(x: 0, y: 0, width: 200, height: 50)
        pictureImageView.insertSubview(blurView, at: 0)
        blurView.center.x = self.view.center.x
        blurView.center.y = self.view.center.y * 1.7
        
        blurView.layer.cornerRadius = 10.0
        blurView.clipsToBounds = true
        blurView.layer.borderWidth = 2
        blurView.layer.borderColor = #colorLiteral(red: 0.1356498897, green: 0.3658460379, blue: 1, alpha: 1)

updated: and the result will be like this :updated image

• tip: make sure for UI problems you use Xcode UI Debugger, it will help you see the layers in run time