Blur View Over CAGradient Layer is Gray

Question

I am adding a UIVisualEffectView for a blur over on my view. the backgound of my view is a ca gradient layer and when I add the blur, it just goes gray.

This is the fade view:

    let fadeView = UIVisualEffectView(effect: UIBlurEffect(style: UIBlurEffect.Style.light))

This code is run when button is pressed:

    fadeView.frame = view.frame
    fadeView.center = view.center
    fadeView.alpha = 0.0
    fadeView.layer.zPosition = 1
    fadeView.isOpaque = true
    view.addSubview(fadeView)
    UIView.animate(withDuration: 0.3, animations: {self.fadeView.alpha = 1.0})

Any Help Making it blur over all the colours of the view instead of just this weird grey?

I want it to keep the gradient background but blur it instead of going to this gray? Just blur over the whole view, keep all the colours and everything. But Blurred @AbhishekJadhav — Peter Dutton, Jan 24 '19 at 08:19
Can u post the screen without applying blur effect? Bcos, here I have tried ur code with White background, I am facing this same issue. But, If tried with any Image as background, ur code is working fine. — McDonal_11, Jan 24 '19 at 11:58

score 1 · Answer 1 · answered Jan 24 '19 at 13:29

1

I have tried your same code in Xcode 10.1

Output:

Code:

func BlurScreen() {

    let fadeView = UIVisualEffectView(effect: UIBlurEffect(style: UIBlurEffect.Style.dark))
    fadeView.frame = view.frame
    fadeView.center = view.center
    fadeView.alpha = 0.0
    fadeView.layer.zPosition = 1
    fadeView.isOpaque = true
    view.addSubview(fadeView)
    UIView.animate(
        withDuration: 1.3,
        animations: {
            fadeView.alpha = 1.0
        }
    )
}

answered Jan 24 '19 at 13:29

McDonal_11

3,935
6
24
55

This is so weird. I tried your exact code and it still does the grey thing. Is it a setting I have enabled somewhere maybe? @McDonal_11 – Peter Dutton Jan 24 '19 at 23:31
Can u mail ur project ? – McDonal_11 Jan 25 '19 at 06:00
That you the all the help but I did get it to work using a very nice pod called Dynamic Blur View which solved everything. – Peter Dutton Jan 25 '19 at 07:57
Ok. Happy coding. – McDonal_11 Jan 25 '19 at 08:59

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Try to add your blurredView without fade transition. Indeed, the UIVisualEffectView does not work well with alpha so it could explain the problem. There is a paragraph in the documentation about that:

Setting the Correct Alpha Value

When using the UIVisualEffectView class, avoid alpha values that are less than 1. Creating views that are partially transparent causes the system to combine the view and all the associated subviews during an offscreen render pass. UIVisualEffectView objects need to be combined as part of the content they are layered on top of in order to look correct. Setting the alpha to less than 1 on the visual effect view or any of its superviews causes many effects to look incorrect or not show up at all.

I tried this and just had it added as a subview without the whole alpa thing but it still showed up as a grey screen. Although, I can see a bit through it but it doesn't keep my background gradient colours @JohanDrevet — Peter Dutton, Jan 24 '19 at 10:00

Blur View Over CAGradient Layer is Gray

2 Answers2