Make a Cool Background Blur effect to your iOS or Android application in Sketch

Background Blur?

I’m sure that you know what I’m talking about: Background Blur was added to Sketch after Apple introduced iOS7 so give designers an easy way to reproduce this effect. Since I’ve been using Sketch for a while (switched 2 years ago), I had chance to apply it on several applications.

Background Blur can help you some different ways:

  • emphasize by giving focus to certain elements
  • crafting a fancy splash screen
  • in cool animations, etc.
  • How would you use it?

This is what we’re going to do

Cool enough, huh?

Let’s see how

We need only three layers, take care of the layers’ order

  • the image itself
  • an Alpha Mask layer
  • a Background Blur layer

Alpha mask

Alpha Mask is necessary for applying the Background Blur to a specified area, in our case to the half of the picture.

Make a layer with a height of half of the picture. This layer should be above the image layer.
Then add a gradient fill with the same color at the both ends (I used #000000) and set 0% alpha on an end point, and 100% on the other.

One important thing that we should do with this layer: we have to set it as an alpha mask.

Use a shortcut (ctrl+⌘+M) to apply the Mask tool, and then go to the Layer -> Mask Mode menu and click on the Alpha Mask mode. That’s it.

Background Blur Layer

This is an empty layer which has only one thing to do: to add the fancy blur effect. At the layer details panel on the right side, select the Background Blur at the Blur drop down menu. Feel free to set the Blur amount to your needs (I used 10px).

One thing we should care about is, as you can see above, this layer is the masked one by the alpha blur layer. Make sure you do it the right way.

Giveaway

Well, this is not a rocket science, but can be handy and eye-catching at the same time:

  • I’ve already used this cool effect as a splash screen, on a contact details page, on a settings layout as well, possibilities are endless.
  • Remember the (ctrl+⌘+M) shortcut which trigger you the Mask mode.
  • Proper order of the layers is necessary.

I like to use the amazing Sketch and I hope you like the thoughts above. I’d love your comments so please share your experiences, use cases. I’m running a startup (@grabready), and working on a huge update which adds Material design.

Written by

maker of @wearemakery, product owner @HPSTRapp, lover of Abelton and Sketch

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