title: Swift - Blur UICollectionView Cell background
body: <p>So I am trying to blur the background view of the <code>UICollectionView</code> cell. This is what I am trying to accomplish:</p>
  <p><a href="https://i.stack.imgur.com/urGmpl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/urGmpl.png" alt="enter image description here" /></a></p>
  <p>I tried using this extension:</p>
  <pre><code>extension UIView {
      func applyBlurEffect(_ style: UIBlurEffect.Style = .dark) {
          let blurEffect = UIBlurEffect(style: style)
          let blurEffectView = UIVisualEffectView(effect: blurEffect)
          blurEffectView.frame = bounds
          blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
          addSubview(blurEffectView)
      }
  }
  </code></pre>
  <p>And use it like this:</p>
  <pre><code>cell.backgroundColor = .clear
  cell.backgroundView?.applyBlurEffect()
  </code></pre>
  <p>But this is the result I get:</p>
  <p><a href="https://i.stack.imgur.com/uLCajl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uLCajl.png" alt="enter image description here" /></a></p>
  <p>Also tried changing from <code>dark</code> to <code>light</code>, but no changes.. What am I doing wrong here?</p>
  <p>EDIT: Added <code>UICollectionViewCell</code> class:</p>
  <pre><code>import UIKit
  
  class MenuCollectionViewCell: UICollectionViewCell {
      
      @IBOutlet weak var categoryEmoji: UILabel!
      @IBOutlet weak var categoryLabel: UILabel!
      @IBOutlet weak var lineView: UIView!
      
      override init(frame: CGRect) {
              super.init(frame: frame)
              commonInit()
          }
          required init?(coder: NSCoder) {
              super.init(coder: coder)
              commonInit()
          }
          private func commonInit() {
  
              contentView.backgroundColor = .clear
              
              let blurEffect = UIBlurEffect(style: .light)
              let blurEffectView = UIVisualEffectView(effect: blurEffect)
              blurEffectView.translatesAutoresizingMaskIntoConstraints = false
              contentView.addSubview(blurEffectView)
              
              blurEffectView.layer.cornerRadius = 20
              blurEffectView.clipsToBounds = true
              
              let g = contentView.layoutMarginsGuide
              NSLayoutConstraint.activate([
                  // constrain blur view to all 4 sides of contentView
                  blurEffectView.topAnchor.constraint(equalTo: g.topAnchor, constant: 0.0),
                  blurEffectView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 0.0),
                  blurEffectView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: 0.0),
                  blurEffectView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: 0.0),
              ])
              
          }
  }
  </code></pre>
  <p>And this is the result I have now. The label's are also blurred now.:</p>
  <p><a href="https://i.stack.imgur.com/SvkSwl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SvkSwl.png" alt="enter image description here" /></a></p>