Problem and Motivation
You may probably know about UIKit’s UIBlurEffect. But the problem is that sometimes design 👩🎨 requires a blur with intensity, opacity or color that is different from the only 3 non-customizable blur effects that Apple provides.
The motivation is to use the advantage of UIKit’s blur effect to implement a fairly “custom” blur effect of different colors and alpha values as you may see in the design below.
What UIKit provides
UIBlurEffect has only 3 styles: .extraLight, .light, .dark. Here are the examples of how they look:
They can be easily implemented using the code below:
The downside is that there is no official way of customizing it. Let’s say you need to implement a blur that is lighter than .dark but darker than .light. You may try to change the alpha property of the blurEffectView but this will just remove the blur effect at all. Why: Apple doesn’t recommend changing the alpha of blur effect.
Customize the blur effect
So how do we make a step further to accomplish a custom blur effect that is required by the design?
We can simply add the view under the blur effect and provide the alpha value to it which will eventually customize the blur effect to the way we want.
Customize it by playing around with 3 UIBlurEffects and the RGBa of the view on the back.
Note ☝️: there is almost no way to find the exact alpha values for corresponding Sketch/Zeplin blur alpha values. But we can strive at least to make it the best matching.
Tip ✌️: don’t forget to use the Digital Color Meter app on your Mac.
The code to customize the blur effect:
That’s it 💪!
In case you want to play around with blur effect values and colors, clone the source code from Github.
Please leave a comment if you have any thoughts about other solutions. I’ll appreciate your claps 👏 if it helped you or was useful 😊.
Find out more about iOS on my Twitter.
UPDATE: apparently there is another nice (maybe even nicer) way to implement the Blur using CIFilter(name: "CIGaussianBlur") .
It allows the make “opacity” and blur’s strengths much lower than UIBlurEffect.
