Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here


Apply a Gaussian Blur to any UIView with Swift Protocol Extensions

Subscribe to updates I use Blurable

Statistics on Blurable

Number of watchers on Github 841
Number of open issues 4
Average time to close an issue 2 days
Main language Swift
Average time to merge a PR about 5 hours
Open pull requests 2+
Closed pull requests 1+
Last commit about 3 years ago
Repo Created about 4 years ago
Repo Last Updated over 1 year ago
Size 63 KB
Organization / Authorflexmonkey
Page Updated
Do you use Blurable? Leave a review!
View open issues (4)
View Blurable activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating Blurable for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)


Apply a Gaussian Blur to any UIView with Swift Protocol Extensions

Adds blur() and unBlur() methods to UIView components which applies a Core Image Gaussian blur filter to the contents.
Companion project to this blog post:


Here's a fun little experiment showing the power of Swift's Protocol Extensions to apply a CIGaussianBlur Core Image filter to any UIView with no developer overhead. Blurable components can be simple labels or buttons or more complex composite components such as UISegmentedControls and they can reside as subviews of other UIViews including UIStackViews. The code could be extended to apply any Core Image filter such as a half tone screen or colour adjustment.

Blurable is a simple protocol that borrows some of the methods and variables from a UIView:

    var layer: CALayer { get }
    var subviews: [UIView] { get }
    var frame: CGRect { get }
    var superview: UIView? { get }

    func addSubview(view: UIView)

    func bringSubviewToFront(view: UIView)

...and adds a few of its own:

    func blur(blurRadius blurRadius: CGFloat)
    func unBlur()

    var isBlurred: Bool { get }

Obviously, just being a protocol, it doesn't do much on its own. However, by adding an extension, I can introduce default functionality. Furthermore, by extending UIView to implement Blurable, every component from a label to a segmented control to a horizontal slider can be blurred:

    extension UIView: Blurable




  1. Download and drop FMBlurable.swift in your project.
  2. Congratulations!

The Mechanics of Blurable

Getting a blurred representation of a UIView is pretty simple: I need to begin an image context, use the view's layer's renderInContext method to render into the context and then get a UIImage from the context:

    UIGraphicsBeginImageContextWithOptions(CGSize(width: frame.width, height: frame.height), false, 1)


    let image = UIGraphicsGetImageFromCurrentImageContext()


Once I have the image populated, it's a fairly standard workflow to apply a Gaussian blur to it:

    guard let blur = CIFilter(name: "CIGaussianBlur") else

    blur.setValue(CIImage(image: image), forKey: kCIInputImageKey)
    blur.setValue(blurRadius, forKey: kCIInputRadiusKey)

    let ciContext  = CIContext(options: nil)

    let result = blur.valueForKey(kCIOutputImageKey) as! CIImage!

    let boundingRect = CGRect(x: 0,
        y: 0,
        width: frame.width,
        height: frame.height)

    let cgImage = ciContext.createCGImage(result, fromRect: boundingRect)

    let filteredImage = UIImage(CGImage: cgImage)

A blurred image will be larger than its input image, so I need to be explicit about the size I require in createCGImage.

The next step is to swap out the blurred component from its superview for a UIImageView containing the blurred image. The technique for doing this differs depending on whether the superview is a UIStackView and the blurred component is an arranged subview or not. I've already created a constant named this that is a non-optional, strongly typed reference to self as a UIView, so I can go ahead and check its superview and, if it's a UIStackView insert the blurred view as an arranged subview:

    if let superview = superview as? UIStackView,
        index = (superview as UIStackView).arrangedSubviews.indexOf(this)
        superview.insertArrangedSubview(blurOverlay, atIndex: index)

However, if the blurred component isn't an arranged subview, we can use a nice animation to cross fade between the original and the blurred view:

        blurOverlay.frame.origin = frame.origin

            toView: blurOverlay,
            duration: 0.2,
            options: UIViewAnimationOptions.CurveEaseIn,
            completion: nil)

Finally, we need to create a reference between the original blurred component and its blur overlay. Since protocol extensions don't allow for stored properties, I use objc_setAssociatedObject to effectively add a blurOverlay property to the component:


When it comes to unblurring in unBlur(), it's essentally the same process but in reverse. First I create the same this constant and ensure the component has an associated blur overlay:

    guard let this = self as? UIView,
        blurOverlay = objc_getAssociatedObject(self as? UIView, &BlurableKey.blurable) as? BlurOverlay else

Then do the same checks to see if blurOverlay's superview is a UIStackView and either insert self as an arranged subview if it is or do the same transitionFromView animation as above, but backwards, if it isn't:

    if let superview = blurOverlay.superview as? UIStackView,
        index = (blurOverlay.superview as! UIStackView).arrangedSubviews.indexOf(blurOverlay)
        superview.insertArrangedSubview(this, atIndex: index)
        this.frame.origin = blurOverlay.frame.origin

            toView: this,
            duration: 0.2,
            options: UIViewAnimationOptions.CurveEaseIn,
            completion: nil)

The last step of unBlur() is to remove the association between the original blurred component and its blur overlay:


Finally, to see if a UIView is currently blurred, I created isBlurred() which just needs to check if it has an associated blur overlay:

    var isBlurred: Bool
        return objc_getAssociatedObject(self as? UIView, &BlurableKey.blurable) is BlurOverlay

Blurring a UIView

To blur and de-blur, just invoke blur() and unBlur() on an UIView:

    segmentedControl.blur(blurRadius: 2)

Source Code

As always, the source code for this project is available at my GitHub repository here. Enjoy!

Blurable open issues Ask a question     (View All Issues)
  • about 3 years CocoaPods
Blurable open pull requests (View All Pulls)
  • Added a block to handle ios9
  • Fix broken headings in Markdown files
Blurable list of languages used
Other projects in Swift