CODEWITHSUNDEEP
iosswift
Mochi
Mochi

Reputation: 1117

How do you design a gradient for a layer in iOS?

I have to follow through my designer's gradient layer as shown below and I'm running into a wall trying to replicate her design (below).

Designer Shadow

I have the following code to try to replicate the same shadow but it is too solid compared to her gradient. How do I reduce my layer to have a gradient look and feel?

backgroundView.layer.shadowColor = UIColor.Custom.darkBlue.cgColor
backgroundView.layer.shadowOpacity = 1.0
backgroundView.layer.shadowRadius = 10

Updated Screenshot

EDIT: I implemented what I needed using @Frankenstein's solution below.

backgroundView.backgroundColor = UIColor.Custom.darkBlue
let gradient: CAGradientLayer = CAGradientLayer()
gradient.colors = [UIColor.black.cgColor, UIColor.Custom.darkBlue.cgColor]
gradient.frame = CGRect(x: backgroundView.frame.origin.x, y: backgroundView.frame.origin.y - 39, width: view.bounds.width, height: 40)
view.layer.addSublayer(gradient)

With the expected result below. Thank you! enter image description here

Upvotes: 0

Views: 199

Answers (2)

Jawad Ali
Jawad Ali

Reputation: 14427

Here is how you can achieve that

  let gradient: CAGradientLayer = CAGradientLayer()

        gradient.colors = [UIColor.black.cgColor, UIColor.blue.cgColor]
        gradient.locations = [0.0 , 1.0]
        gradient.startPoint = CGPoint(x : 0.0, y : 0)
        gradient.endPoint = CGPoint(x :0.0, y: 0.15) // you need to play with 0.15 to adjust gradient vertically
        gradient.frame = view.bounds
        view.layer.addSublayer(gradient)

enter image description here

With 0.15 to 0.5 you get

enter image description here

Upvotes: 1

Frankenstein
Frankenstein

Reputation: 16381

You need to add a new CAGradientLayer and not set the shadow, here is an example:

let gradient: CAGradientLayer = CAGradientLayer()

gradient.colors = [UIColor.black.cgColor, UIColor.Custom.darkBlue.cgColor]
gradient.locations = [0.0 , 1.0]
gradient.startPoint = CGPoint(x: 0.0, y: 1.0)
gradient.endPoint = CGPoint(x: 1.0, y: 1.0)
gradient.frame = view.bounds
view.layer.addSublayer(gradient)

Upvotes: 1

Related Questions