Swift Gradient in 4 lines of code

Swift Gradient in 4 lines of code!

Gradients are pretty

I’m a fan of writing a little bit of code to accomplish a lot of things. The other day I started a new Xcode project and wanted to create a simple gradient using two colors on my app’s landing screen. I knew Swift had a relatively easy to use gradient system since I had read plenty of articles where people explained the ins and outs of Swift gradients. The only issue is, everyone’s implementation of Swift gradients was sooo much more complicated than I needed it to be. Therefore, after a couple google searches and 30 minutes of trying to figure out an annoying bug I finally got my two color gradient landing screen working in 4 lines of code.

Here is how I did it.

<strong>let</strong> gradientLayer = CAGradientLayer()

gradientLayer.frame = <strong>self</strong>.view.bounds

gradientLayer.colors = [UIColor.yellow.cgColor, UIColor.white.cgColor]

<strong>self</strong>.view.layer.insertSublayer(gradientLayer, at: 0)

So, as far as complex code goes this is not high up on the list but nonetheless lets go through line by line.

Line 1initializes your gradientLayer variable. This is the variable that you will set all of your gradient options on and eventually add it to your view.

Line 2sets the frame size of your gradientLayer to match the size of the view you are adding the gradient to.

Line 3is the fun line (It was for me anyway). gradientLayer.colors takes an array of colors that will make up the gradient. You can add as many colors to your gradient as you wish just make sure to follow the array syntax when adding more.

Line 4is where the magic actually happens. Here, all we are doing is adding a sublayer to the current view and setting that sublayer to the gradientLayer we have been setting up in lines 1–3.

That’s it! Now just compile and run the code in your Xcode project and your screen should have a sexy yellow gradient on it.

Bug Alert!

When I first started trying to add a gradient to my landing screen I was coming across a weird bug where my gradient was showing up but it was hiding all of my labels and buttons that I had on the screen. I figured it had to do with the position of the gradient. Turns out, my gradientLayer was being added on top of all the content I had on that app screen and the fix was in line 4.

<strong>self</strong>.view.layer.insertSublayer(gradientLayer, at: 0)

Adding the at: 0 to the insertSublayer function tells Swift to set that sublayer at index 0 of the view. This pushed the gradient behind all of my screen content and allowed me to see everything that was previously hidden by the gradient. This took me longer to figure out than I would like to admit but hopefully I can save you 30 minutes of google searching if you come across the same issue.

Outcome!

The above four lines of code produced the following screen in my app (Minus the labels, I added those in via storyboard).

Final Sexy Yellow Gradient

Although there are many more ways gradients can be used and customized I will leave that up to you to research and figure out. For anyone that requires a simple gradient for a screen/label/button etc. I hope this article will be useful to you and thanks for reading!