Adding blur effect to background in swift

Question

I am setting a background image to view controller. But also i want to add blur effect to this background. How can I do this?

I am setting background with following code:

self.view.backgroundColor = UIColor(patternImage: UIImage(named: "testBg")!)

I found on internet for blur imageview how can i implement this to my background?

var darkBlur = UIBlurEffect(style: UIBlurEffectStyle.Dark)
// 2
var blurView = UIVisualEffectView(effect: darkBlur)
blurView.frame = imageView.bounds
// 3
imageView.addSubview(blurView)

Please see here for custom blur scale https://stackoverflow.com/a/51406290/7576100 — Jack, Jul 18 '18 at 15:55

score 399 · Accepted Answer · edited May 07 '19 at 05:20

399

I have tested this code and it's working fine:

let blurEffect = UIBlurEffect(style: UIBlurEffect.Style.dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(blurEffectView)

For Swift 3.0:

let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(blurEffectView)

For Swift 4.0:

let blurEffect = UIBlurEffect(style: UIBlurEffect.Style.dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(blurEffectView)

Here you can see result:

blurred view

Or you can use this lib for that:

https://github.com/FlexMonkey/Blurable

edited May 07 '19 at 05:20

Wendy Liga

634
5
12

answered Jun 20 '15 at 11:30

Dharmesh Kheni

71,228
33
160
165

7

Is there a way to change blur scale? It is too blurry. – Tolgay Toklar Jun 20 '15 at 11:38
3

just change `UIBlurEffectStyle.Light` – Dharmesh Kheni Jun 20 '15 at 11:40
11

Or you can set the alpha on the UIVisualEffectView to less than 1.0. Try 0.8 or 0.7. – Duncan C Jun 20 '15 at 12:47
38

Apple doesn't recommend changing alpha of visualEffectVİew – Tolgay Toklar Mar 08 '16 at 12:20
@DharmeshKheni how to remove the blur effect to get back the original screen on a button click? – Khadija Daruwala Aug 10 '16 at 10:02
Just remove `blurEffectView` But didn't tested. – Dharmesh Kheni Aug 10 '16 at 10:05
Where do I place it? I tried to place it in its own UIView class but it just makes a big gray box. What function do I put it in? AwakeFromNib, LayoutSubviews? Neither worked. – Hedylove Jan 22 '17 at 17:23
@TolgayToklar could you provide a reference for that? I'd like to read more about it EDIT - Console output: ` is being asked to animate its opacity. This will cause the effect to appear broken until opacity returns to 1.` – Sasa Blagojevic Aug 19 '17 at 16:55
It is not blur just a transparent shade. – rubai Aug 31 '17 at 19:48
7

all controls are hidden under this blur. Instead addSubview - use self.view.insertSubview(blurEffectView, at: 0) – Leonif May 01 '18 at 15:05
Thanks, the answer is very clear. But How can I make the image not clear but at the same time I can recognize what the image describes? – Mohamed Ezzat Jun 26 '18 at 12:00
Please see here for custom blur scale https://stackoverflow.com/a/51406290/7576100 – Jack Jul 18 '18 at 15:55
1

@TolgayToklar " Apple doesn't recommend changing alpha of visualEffectVİew" source? – J. Doe Aug 12 '18 at 11:25
view.insertSubview(blurEffectView, at: 0) for making only the background blur. – vikas chandra Sep 16 '19 at 07:49
@J.Doe the "Apple doesn't recommend changing the alpha" is here https://developer.apple.com/documentation/uikit/uivisualeffectview specifically `avoid alpha values that are less than 1` ... `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.` – Lance Samaria Mar 06 '22 at 20:33
when you change it to `light` style you will see an extra shadow you didn't mention – Gargo Jul 21 '23 at 06:46

score 58 · Answer 2 · edited Jan 27 '21 at 05:48

You can make an extension of UIImageView.

Swift 2.0

import Foundation
import UIKit

extension UIImageView
{
    func makeBlurImage(targetImageView:UIImageView?)
    {
        let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
        let blurEffectView = UIVisualEffectView(effect: blurEffect)
        blurEffectView.frame = targetImageView!.bounds

        blurEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight] // for supporting device rotation
        targetImageView?.addSubview(blurEffectView)
    }
}

Usage:

override func viewDidLoad()
{
    super.viewDidLoad()

    let sampleImageView = UIImageView(frame: CGRectMake(0, 200, 300, 325))
    let sampleImage:UIImage = UIImage(named: "ic_120x120")!
    sampleImageView.image =  sampleImage

    //Convert To Blur Image Here
    sampleImageView.makeBlurImage(sampleImageView)

    self.view.addSubview(sampleImageView)
}

Swift 3 Extension

import Foundation
import UIKit

extension UIImageView
{
    func addBlurEffect()
    {
        let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.light)
        let blurEffectView = UIVisualEffectView(effect: blurEffect)
        blurEffectView.frame = self.bounds

        blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight] // for supporting device rotation
        self.addSubview(blurEffectView)
    }
}

Usage:

yourImageView.addBlurEffect()

Addendum:

extension UIView {
  
  /// Remove UIBlurEffect from UIView
  func removeBlurEffect() {
    let blurredEffectViews = self.subviews.filter{$0 is UIVisualEffectView}
    blurredEffectViews.forEach{ blurView in
      blurView.removeFromSuperview()
    }
  }

Swift 5.0:

import UIKit


extension UIImageView {
    func applyBlurEffect() {
        let blurEffect = UIBlurEffect(style: .light)
        let blurEffectView = UIVisualEffectView(effect: blurEffect)
        blurEffectView.frame = bounds
        blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        addSubview(blurEffectView)
    }
}

Nice idea! Couldn't it be just makeBlurImage() and then use self instead of targetImageView ? — Emanuele Fumagalli, Apr 25 '16 at 15:56
I'm not sure but this code may crash if no argument are passed right ? This should have a " if let tmpTargetImageView = targetImageView { }" statement — RomOne, May 26 '16 at 02:39
@RomOne You would simply get a compile error/failed build if you do not provide an argument. Also, it would work without an image so no need to unwrap that; and testing would show you if you forgot to add an image or not. — Josh, Aug 25 '16 at 21:37
Point is it would crash if a nil ImageView is passed. The ideal is @EmanueleFumagalli 's idea of using self instead of targetImageView, but it is also possible to use a guard statement and return in case of a nil argument. — Uzaak, Oct 14 '16 at 11:56
its better to give images description too with blurred. well thanks. — MRizwan33, Feb 27 '18 at 10:31

score 15 · Answer 3 · edited May 30 '16 at 18:28

@AlvinGeorge should just use:

extension UIImageView{        
    func blurImage()
    {
        let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
        let blurEffectView = UIVisualEffectView(effect: blurEffect)
        blurEffectView.frame = self.bounds

        blurEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight] // for supporting device rotation
        self.addSubview(blurEffectView)
    }
}

usage:

 blurredBackground.frame = self.view.bounds
 blurredBackground.blurImage()
 self.view.addSubview(self.blurredBackground)

score 14 · Answer 4 · answered Sep 20 '16 at 08:23

U can also use CoreImage to create blurred image with dark effect

Make snapshot for image

func snapShotImage() -> UIImage {
    UIGraphicsBeginImageContext(self.frame.size)
    if let context = UIGraphicsGetCurrentContext() {
        self.layer.renderInContext(context)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }

    return UIImage()
}

Apply CoreImage Filters as u wish with

private func bluredImage(view:UIView, radius:CGFloat = 1) -> UIImage {
let image = view.snapShotImage()

if let source = image.CGImage {
    let context = CIContext(options: nil)
    let inputImage = CIImage(CGImage: source)

    let clampFilter = CIFilter(name: "CIAffineClamp")
    clampFilter?.setDefaults()
    clampFilter?.setValue(inputImage, forKey: kCIInputImageKey)

    if let clampedImage = clampFilter?.valueForKey(kCIOutputImageKey) as? CIImage {
        let explosureFilter = CIFilter(name: "CIExposureAdjust")
        explosureFilter?.setValue(clampedImage, forKey: kCIInputImageKey)
        explosureFilter?.setValue(-1.0, forKey: kCIInputEVKey)

        if let explosureImage = explosureFilter?.valueForKey(kCIOutputImageKey) as? CIImage {
            let filter = CIFilter(name: "CIGaussianBlur")
            filter?.setValue(explosureImage, forKey: kCIInputImageKey)
            filter?.setValue("\(radius)", forKey:kCIInputRadiusKey)

            if let result = filter?.valueForKey(kCIOutputImageKey) as? CIImage {
                let bounds = UIScreen.mainScreen().bounds
                let cgImage = context.createCGImage(result, fromRect: bounds)
                let returnImage = UIImage(CGImage: cgImage)
                return returnImage
            }
        }
    }
}
return UIImage()
}

score 12 · Answer 5 · answered Oct 06 '16 at 04:26

For Swift 3 (iOS 10.0 and 8.0)

var darkBlur:UIBlurEffect = UIBlurEffect()

if #available(iOS 10.0, *) { //iOS 10.0 and above
    darkBlur = UIBlurEffect(style: UIBlurEffectStyle.prominent)//prominent,regular,extraLight, light, dark
} else { //iOS 8.0 and above
  darkBlur = UIBlurEffect(style: UIBlurEffectStyle.dark) //extraLight, light, dark
}
let blurView = UIVisualEffectView(effect: darkBlur)
blurView.frame = self.view.frame //your view that have any objects
blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(blurView)

Maruta · Answer 6 · 2019-05-28T03:19:28.243

12

This worked for me on Swift 5

let blurredView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
blurredView.frame = self.view.bounds
backgroundimage.addSubview(blurredView)

edited May 28 '19 at 03:19

answered May 28 '19 at 02:27

Maruta

1,063
11
24

1

Hi @Marta, Do you know how to reduce the capacity of the blurredView? – Sky Dec 31 '19 at 06:18

score 7 · Answer 7 · edited Aug 24 '19 at 08:02

This one always keeps the right frame:

public extension UIView {

    @discardableResult
    public func addBlur(style: UIBlurEffect.Style = .extraLight) -> UIVisualEffectView {
        let blurEffect = UIBlurEffect(style: style)
        let blurBackground = UIVisualEffectView(effect: blurEffect)
        addSubview(blurBackground)
        blurBackground.translatesAutoresizingMaskIntoConstraints = false
        blurBackground.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
        blurBackground.topAnchor.constraint(equalTo: topAnchor).isActive = true
        blurBackground.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
        blurBackground.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
        return blurBackground
    }
}

score 3 · Answer 8 · answered Sep 19 '19 at 16:22

3

You should always use .dark for style and add the following code to make it look cool

    blurEffectView.backgroundColor = .black
    blurEffectView.alpha = 0.4

answered Sep 19 '19 at 16:22

Donovan Marsh

279
2
9

score 2 · Answer 9 · answered Dec 16 '18 at 16:57

This Code is Working Fine For me! its for Swift 4.x

let blurEffect = UIBlurEffect(style: .ExtraLight)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = self.view.frame
self.view.insertSubview(blurEffectView, atIndex: 0)

score 2 · Answer 10 · answered Jul 06 '20 at 10:19

In a UIView extension:

func addBlurredBackground(style: UIBlurEffect.Style) {
    let blurEffect = UIBlurEffect(style: style)
    let blurView = UIVisualEffectView(effect: blurEffect)
    blurView.frame = self.frame
    blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    self.addSubview(blurView)
    self.sendSubviewToBack(blurView)
}

score 0 · Answer 11 · answered Sep 22 '16 at 18:08

0

Found another way.. I use apple's UIImage+ImageEffects.

 UIImage *effectImage = [image applyExtraLightEffect];                        
 self.imageView.image = effectImage;

answered Sep 22 '16 at 18:08

Jenel Ejercito Myers

2,553
2
16
24

score 0 · Answer 12 · answered Dec 23 '20 at 12:31

let blurEffect = UIBlurEffect(style: UIBlurEffect.Style.dark)
                    let blurEffectView = UIVisualEffectView(effect: blurEffect)
                    blurEffectView.backgroundColor = .black
                    blurEffectView.alpha = 0.5
                    blurEffectView.frame = topView.bounds
                    if !self.presenting {
                        blurEffectView.frame.origin.x = 0
                    } else {
                        blurEffectView.frame.origin.x = -topView.frame.width
                    }
                    blurEffectView.frame.origin.x = -topView.frame.width
                    blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
                    UIView.animate(withDuration: 0.2, delay: 0.0, options: [.curveEaseIn]) {
                        if !self.presenting {
                            blurEffectView.frame.origin.x = -topView.frame.width
                        } else {
                            blurEffectView.frame.origin.x = 0
                        }
                        view.addSubview(blurEffectView)
                    } completion: { (status) in
                        
                    }

score 0 · Answer 13 · answered May 03 '22 at 16:26

Thanks to @Maruta https://stackoverflow.com/a/56334283/16457129 for the answer If anyone else asks, you can reduce the blur effect with the background color of the view.

    func drawBackgroundBlur() {
        backgroundView.layer.cornerRadius = 27
        // Here, you can increase the alpha value to increase the blur effect
        backgroundView.backgroundColor = UIColor.white.withAlphaComponent(0.05)
        
        let blurredView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
        blurredView.frame = backgroundRewardsView.bounds
        blurredView.layer.cornerRadius = 27
        backgroundView.addSubview(blurredView)
    }

score 0 · Answer 14 · answered Feb 10 '23 at 17:06

Swift 5.7 - blur with custom radius

Usage example:

let view = UIImageView(image: bluredImage(view: superview!, radius: 1.5))

Extension:

extension UIView { 
func bluredImage(view: UIView, radius: CGFloat = 1) -> UIImage {
    let image = view.snapShotImage()
    
    if let source = image.cgImage {
        let context = CIContext(options: nil)
        let inputImage = CIImage(cgImage: source)
        
        let clampFilter = CIFilter(name: "CIAffineClamp")
        clampFilter?.setDefaults()
        clampFilter?.setValue(inputImage, forKey: kCIInputImageKey)
        
        if let clampedImage = clampFilter?.value(forKey: kCIOutputImageKey) as? CIImage {
            let explosureFilter = CIFilter(name: "CIExposureAdjust")
            explosureFilter?.setValue(clampedImage, forKey: kCIInputImageKey)
            explosureFilter?.setValue(-1.0, forKey: kCIInputEVKey)
            
            if let explosureImage = explosureFilter?.value(forKey: kCIOutputImageKey) as? CIImage {
                let filter = CIFilter(name: "CIGaussianBlur")
                filter?.setValue(explosureImage, forKey: kCIInputImageKey)
                filter?.setValue("\(radius)", forKey:kCIInputRadiusKey)
                
                if let result = filter?.value(forKey: kCIOutputImageKey) as? CIImage {
                    let bounds = UIScreen.main.bounds
                    let cgImage = context.createCGImage(result, from: bounds)
                    let returnImage = UIImage(cgImage: cgImage!)
                    return returnImage
                }
            }
        }
    }
    return UIImage()
}

private func snapShotImage() -> UIImage {
    UIGraphicsBeginImageContext(self.frame.size)
    if let context = UIGraphicsGetCurrentContext() {
        self.layer.render(in: context)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image!
    }
    
    return UIImage()
}

}

Adding blur effect to background in swift

14 Answers14

Linked