Skip to main content

How to apply a gradient tint over a background image?

Set the background image

The first step is to set the background image.  I wanted the image to cover the entire device, so scale aspect fill will be required.

self.backgroundImage = UIImageView(image: UIImage(named: "bgkMain"))
self.backgroundImage.contentMode = .scaleAspectFill
self.view.insertSubview(self.backgroundImage, at: 0)


Set the tint layer

With the background in place, next construct the tint layer.  To make the tint in you can use Cocoapods - UIGradient or by-pass that pod and go to the source and use CAGradientLayer().  In this example I'll use UIGradient, taking it that you already know how to add a pod to your app.

let bkgTint : UIView = UIView(frame: self.backgroundImage.frame)
bkgTint.backgroundColor = UIColor.fromGradientWithDirection(.topToBottom, frame: backgroundImage.frame, colors: [GRADIENT_BLACK_TOP, GRADIENT_ALPHA_NONE, GRADIENT_ALPHA_NONE])
bkgTint.layer.opacity = 1.0

You will see in the above code that the colours are defined as GRADIENT_BLACK_TOP and the like.  I use a separate file titled constants where common colours, fonts and images are defined.  In relation to the GRADIENT_BLACK_TOP, I defined it as

let GRADIENT_BLACK_TOP = UIColor.init(red: 37.0 / 255.0, green: 39.0 / 255.0, blue: 43.0 / 255.0, alpha: 1.0)

The aim here was to create a rich black rather than using the values 0.0 / 255.0 for red, green and blue.  The remaining two have been set to a alpha channel of zero (0.0).


Pulling it together as a function

There are several ways to set up your background as a function.  I'm going to focus on adding the new background function to a NSObject.  My set-up has a directory named Global.  In this directory there are several files, of which one is GlobalFunctions.

class GlobalFunctions: NSObject {

I have taken the code noted above as created the following function

var backgroundImage: UIImageView!

func setupBackground(vc: UIViewController, imageName: String)
  // set the background image
  self.backgroundImage = UIImageView(image: UIImage(named: imageName))
  self.backgroundImage.contentMode = .scaleAspectFill
  vc.view.insertSubview(self.backgroundImage, at: 0)

// manage the tint overlay
func setupTint(color1: UIColor, color2: UIColor, color3: UIColor)
  let bkgTint : UIView = UIView(frame: self.backgroundImage.frame)
  bkgTint.backgroundColor = UIColor.fromGradientWithDirection(.topToBottom, frame: backgroundImage.frame, colors: [color1, color2, color3])
  bkgTint.layer.opacity = 1.0

Finally calling the two functions is as the following:

// manage the background image

globalFunctions.setupBackground(vc: self, imageName: "bgkMain")
globalFunctions.setupTint(color1: GRADIENT_BLACK_TOP, color2: GRADIENT_ALPHA_NONE, color3: GRADIENT_ALPHA_NONE)
self.backgroundImage = globalFunctions.backgroundImage

Related articles

Andrew Fletcher29 Sep 2023
Setting up an ionic app
Recently a client handed me code that runs an app through iOS and Android.  No details about whether native or otherwise.  Once I had the opportunity to crawl through the code, definitely not native.  Typescript, Angular, Cordova... etc.Glancing at the modification dates, the last...
Andrew Fletcher02 Aug 2023
Android Studio error when running app through emulator
Only a month ago, running an app through the Android Studio emulator was running fine.  Now I'm warmly greeted byError Installation did not succeed. The application could not be installed: INSTALL_PARSE_FAILED_NO_CERTIFICATESThe complete error is Launching '{project}' on Pixel 5 API...
Andrew Fletcher22 Aug 2022
Android releasing app issues
Warning from Google Play Store when uploading an App You must complete the advertising ID declaration before you can release an app that targets Android 13 (API 33). We'll use this declaration to provide safeguards in Play Console to accommodate changes to advertising ID in Android 13. Apps...