The Only CAGradientLayer Guide You Will Ever Need

An App to help you? Why not?

Photo by JD Chow on Unsplash



CAGradientLayer: A layer that draws a colour gradient over any background colour

The App

The images used in this article are form a little App that has been knocked up. You can download it from the repo, and essentially I’d recommend you do.

gradient.colors ={ $0.cgColor }
let animation = CABasicAnimation(keyPath: "endPoint")animation.fromValue = gradient.endPointanimation.toValue = endPoint.pointanimation.duration = 5.0self.gradient.endPoint = endPoint.pointself.gradient.add(animation, forKey:"animateendpoint")

location (which is linked to colour)

Location is a value between 0 and 1, and provide a separation between colour spaces (so the number of locations are tightly coupled to the colours).

startPoint and endPoint

The start point is where the gradient starts, within the bounds of the `layer` coordinate space.


Not captured in this App (apart from the default axial type), you can choose conic and radial are fairly self-explanatory.

Tips to recreate the App


Gradients are extremely important in iOS, and you might just have a live designer who goes all in on the style.

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