Implementing Blurs and Shadows in iOS Apps
Add some additional style to your app with blurs and shadows
For most of my projects, I get the app designs from my clients. And if I need to say what the most used design elements have been in 2020, I’d say that they’ve been flat elements, blurs, and shadows. There’s no problem with flat elements, as the native iOS design is pretty flat. So let’s see how to add blurry backgrounds and shadows to your iOS apps.
First, let’s create a blurry rectangle and a rectangle with a shadow in your iOS app. I’ll go through the whole process step by step and you can copy the final result to your code.
Creating From Code
For this example, we need a background (e.g. a picture). On top of the picture, let’s add two rectangles. One rectangle with a white background (note that shadows can’t be applied to transparent or semi-transparent views because it simply won’t look good) and another rectangle with a transparent background for the blur effect. If we use a non-transparent color, the blur will be applied to this color and it will have no effect.
If you use Storyboard, it will look like the picture below:
In the code, we’ll have this:
@IBOutlet weak var vShadowContainer: UIView!@IBOutlet weak var vBlurContainer: UIView!
Creating shadows and blur from code is a rather simple trick. To make it look nicer, I added a corner radius of
If you know the sizes of your objects in advance, you can call these functions right from
viewDidLoad. Otherwise, you should wait until
iOS doesn’t have many adjustments for
UIBlurEffect. You can only choose the blur type (dark, light, etc.). You can’t make it more or less “blurry,” but you can change the alpha value, which will have a similar effect. In the picture above, the alpha is 0.8.
If you have a significant amount of blur and shady views, it’s not comfortable to set them all from the code. Let’s create a couple of
UIView subclasses that allow us to add effects with the necessary parameters on the fly:
As an example, let’s make an alternative tab bar with a blurry background and feed based on
UITableView with shadows:
This layout can be done using two extensions and two classes provided above with minimal additional code.
ViewController.swift is as simple as it gets:
Of course, it’s only a layout. The tab bar doesn’t work and the feed only has ten elements without any dynamic content. But as we’re talking about adding blur and shadows — not dynamic content — this example should do the trick.
Flat icons, blurry backgrounds, and shady panels are the most used elements in modern designs. iOS has native ways to implement them, but not ready components (
UIViews) to add to Storyboards. In this article, we found a way to add such views without any headaches.
Happy coding and see you next time!