How to add Different Kinds of Shadows to a UICollectionViewCell (Swift)

UICollectionViews are one of the most commonly used user interface elements when developing iOS apps. Shadows are also key when designing a clean, modern interface. Navigating around how to use both of these in unison is sometimes difficult so I wanted to share with you an extension I made to make this process super easy.

If you’re here to just take the extension, by all means, do so. Here it is. I’ll go into more detail on how to use it and some best practices, though, so I recommend sticking around to learn more.

The Extension

Key:

Corner: The corner radius of the cell and the shadow

Color: The color of the shadow

Radius: The blur radius, in points (or the size of the shadow)

Offset: The offset, in point, of the shadow as a CGSize (width is x offset and height is y offset)

Opacity: The opacity of the shadow

How To Use It

For new developers, that extension may be a little confusing so let’s take a look at a quick example. I also highly recommend looking at the key listed above.

First, I’m going to create a really simple UICollectionView and UICollectionViewCell via the Main.storyboard

I set the delegate and data source of the UICollectionView to my UIViewController’s class ViewController.swift. I also populated the UICollectionView with some cells via the delegate functions.

Now we can use the extension. In the cellForItemAt delegate function, we can simply call addShadow() on our cell.

func collectionView(_ collectionView: UICollectionView, 
                   cellForItemAt indexPath: IndexPath) -> 
                   UICollectionViewCell {
   let cell = collectionView.dequeueReusableCel(withReuseIdentifier:
              "cell", for: indexPath)
   cell.addShadow()
   
   return cell
}

This will cause us to use the default values for the corner, color, radius, opacity, and everything else resulting in a good looking cell.

That’s great, and we can leave it like that. But, if you’re looking for some customization (or A LOT of customization), you can do so. All elements of the shadow are 100% customizable; the corner, color, radius, offset, and opacity. You can set your own values for all of them, or even just one.

Some customization examples include

cell.addShadow(corner: 5)
cell.addShadow(corner: 10, color: .blue)
cell.addShadow(opacity: 0.5)
cell.addShadow(corner: 15, color: .red, radius: 15, offset: CGSize(width: 0, height: 5), opacity: 0.3)

Best Practices

If you’re looking for inspiration for different shadows, here are some best practices.

As shown before, a simple black shadow with a very low opacity always looks very clean and modern. Apple uses this look a lot, notably in its Apple Store app.

If you’re looking to use some color, having a gradient background with a color-matched shadow always looks great. To add some even more flair, try adjusting the offset, specifically along the y axis (height when using CGSize)

Most importantly, use shadows when they make sense. Don’t overuse them, and don’t make them super bold. You’ll normally want to keep your opacity from 0.1 to 0.4. Shadows are supposed to compliment a view, when they overtake it, bad things can happen.

Also remember that as of iOS 13, users can enable dark mode. Make sure your views and shadows look good on dark and light mode devices. Specifically, in dark mode, make sure context isn’t lost when using black shadows.