Implementing Blurs and Shadows in iOS Apps

Add some additional style to your app with blurs and shadows

Alex Nekrasov
Nov 20 · 3 min read
Shadows on a wall
Shadows on a wall
Photo by Agata Create on Unsplash.

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.

Blurs and shadows in iOS app
Blurs and shadows in iOS app
Blurs and shadows

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:

Two rectangles with different backgrounds
Two rectangles with different backgrounds
Storyboard for effects

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 5:

If you know the sizes of your objects in advance, you can call these functions right from viewDidLoad. Otherwise, you should wait until viewDidLayoutSubviews or viewDidAppear.

Rectangles with shadow and blur
Rectangles with shadow and blur
Rectangles with shadow and blur

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.

Creating Subviews

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:

App featuring alternative tab bar with blurry background and shadows
App featuring alternative tab bar with blurry background and shadows
Example of layout with blur and shadows

This layout can be done using two extensions and two classes provided above with minimal additional code.

Storyboard for example above
Storyboard for example above
Storyboard for example above

The 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.

Conclusion

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!

Advice for programmers.

Thanks to Zack Shapiro

Alex Nekrasov

Written by

Game and software developer with more than 15 years experience. Founder and CEO at Mariposa Studios, freelancer.

Better Programming

Advice for programmers.

Alex Nekrasov

Written by

Game and software developer with more than 15 years experience. Founder and CEO at Mariposa Studios, freelancer.

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store