How to add shadow on UITextField with round Corners?

Question

I want to achieve a shadow on UITextField with round corners like below image:

My Code as below:

    override func viewDidLoad() {
       super.viewDidLoad()
       textField.layer.cornerRadius =             textField.frame.size.height / 2
       textField.layer.borderWidth = 1.0
       textField.layer.borderColor = UIColor(white: 0.5, alpha: 0.3).cgColor
       textField.layer.shadowOpacity = 1
       textField.layer.shadowRadius = 4.0
       textField.layer.shadowColor = UIColor.black.cgColor
    }

but, I think something is missing...

Output:

thanks in advance!

Possible duplicate of [Drop Shadow on UITextField text](https://stackoverflow.com/questions/1274168/drop-shadow-on-uitextfield-text) — cpt. Sparrow, Oct 04 '17 at 10:54
@UdayBabariya add this line self.textfiledDemo.borderStyle = .none — Dixit Akabari, Oct 04 '17 at 11:26

Joe · Accepted Answer · 2017-10-04T15:01:41.490

Try below code to achieve shadow effect on roundRect textfield.

    //Basic texfield Setup 
    textField.borderStyle = .none
    textField.backgroundColor = UIColor.groupTableViewBackground // Use anycolor that give you a 2d look.

    //To apply corner radius
    textField.layer.cornerRadius = textField.frame.size.height / 2

    //To apply border
    textField.layer.borderWidth = 0.25
    textField.layer.borderColor = UIColor.white.cgColor

    //To apply Shadow
    textField.layer.shadowOpacity = 1
    textField.layer.shadowRadius = 3.0
    textField.layer.shadowOffset = CGSize.zero // Use any CGSize
    textField.layer.shadowColor = UIColor.gray.cgColor

    //To apply padding
    let paddingView : UIView = UIView(frame: CGRect(x: 0, y: 0, width: 20, height: textField.frame.height))
    textField.leftView = paddingView
    textField.leftViewMode = UITextFieldViewMode.always

Note: For some reason textField.borderStyle = .none not taking effect even setting the code in viewWillLayoutSubviews() or viewDidLayoutSubviews().So, I recommend you to set borderStyle through storyBoard textfield Attributes inspector.

Output from real device:

To achieve a drop shadow effect:(like other SO posts)

   textField.layer.borderColor = UIColor.black.withAlphaComponent(0.25).cgColor
   textField.layer.shadowOffset = CGSize(width: 0, height: 3)
   textField.layer.shadowColor = UIColor.black.cgColor //Any dark color

Output:

Siyavash · Answer 2 · 2017-10-04T11:00:01.813

You can add this extension and then use the method "addShadow" to add shadow to you Textfield, label, textview and etc...

extension UIView {    
func addShadow(shadowColor: CGColor = UIColor.black.cgColor,
                   shadowOffset: CGSize = CGSize(width: 1.0, height: 2.0),
                   shadowOpacity: Float = 0.4,
                   shadowRadius: CGFloat = 3.0) {
        layer.shadowColor = shadowColor
        layer.shadowOffset = shadowOffset
        layer.shadowOpacity = shadowOpacity
        layer.shadowRadius = shadowRadius
        layer.masksToBounds = false
    }
}

score 3 · Answer 3 · answered Oct 04 '17 at 10:58

3

Use this below code

    textfield.layer.cornerRadius = textfield.frame.size.height/2
    textfield.clipsToBounds = false
    textfield.layer.shadowOpacity=0.4
    textfield.layer.shadowOffset = CGSize(width: 0, height: 0)

OutPut:

answered Oct 04 '17 at 10:58

dahiya_boy

9,298
1
30
51

its showing outer line of textfield...check my output. – Uday Babariya Oct 04 '17 at 11:10
@UdayBabariya remove border width and color and use textfield white and view behind the textfield is white so that you can examine clearly. – dahiya_boy Oct 04 '17 at 11:16

Dixit Akabari · Answer 4 · 2017-10-04T10:55:34.850

1

Try this :

textField.layer.masksToBounds = false
textField.layer.shadowRadius = 4.0
textField.layer.shadowColor = UIColor.black.cgColor
textField.layer.shadowOffset = CGSize(width: 1.0, height: 1.0)
textField.layer.shadowOpacity = 1.0

edited Oct 04 '17 at 10:55

answered Oct 04 '17 at 10:42

Dixit Akabari

2,419
13
26

How to add shadow on UITextField with round Corners?

4 Answers4