BlurView below a button with fading edges

Question

I created a button on top of my mapView. In order to make that Button more visible I added a blur view below that button. I don't like the sharp edges of my blur view. How do I make the blur fade out slowly transitioning into the mapView?

EDIT: To be more specific. I mean a fading blurred gradient with round corners.

Answer 1

I think this can help you, first you need subclass your button and add this code in drawRect and replace UIColor.blueColor().CGColor by yourColor.CGColor

class UICustomBackgroundButton: UIButton {

    override func draw(_ rect: CGRect) {
        // Drawing code
        super.draw(rect)
        let ctx = UIGraphicsGetCurrentContext();

        let path = CGPath(roundedRect: rect.insetBy(dx: self.frame.size.height/4, dy: self.frame.size.height/4) , cornerWidth: self.frame.size.height/8, cornerHeight: self.frame.size.height/8, transform: nil)

        ctx?.setShadow(offset: CGSize.zero, blur: self.frame.size.height/4, color: UIColor.blue.cgColor);
        ctx?.setFillColor(UIColor.blue.cgColor);

        //if number of cicles is our glow is darker
        for _ in 0..<6
        {
        ctx?.addPath(path);
        ctx?.fillPath();
        }
    }

}

I Hope this helps you.

and this is how it look

Answer 2

Have you tried the cornerRadius property? That should remove the sharp edges