Drop Shadow in SwiftUI

Posted in SwiftUI

April 23rd, 2021

⏱ Reading Time: 4 mins

Shadows are quite often the missing ingredient in making a view look more appealing to users, eliminating the totally flat appearance and giving some sense of depth. Doing so in SwiftUI is easy; all it takes is to call a view modifier and pass a few arguments that configure the shadow.

A shadow can be shown on any view, and it can even be animated. Although in most cases applying a shadow has no side effects, buttons might need a bit of special care. That’s why I’m covering this case separately later in this post. First, let’s get a taste of shadows in SwiftUI.

The following lines define a Text in SwiftUI, with some padding around it and the title font:

To drop shadow on it, the shadow view modifier must be called like so:

Provided arguments in order of appearance are:

  • The shadow color
  • The shadow blur amount. The higher this value, the most blurry the shadow becomes.
  • Shadow offset on the X axis.
  • Shadow offset on the Y axis.

The result of the above is this:

Shadow on text

As said in the beginning, a shadow can be applied on any view. For instance, the following demonstrates how to drop shadow on a Shape:

Shadow on shape

We can drop shadow in Colors directly; don’t forget that a Color is a view in SwiftUI:

Shadow on color

Animating shadow

Shadow values can be animated as well. To see that, let’s suppose that we want to update with animation the shadow color, radius, and offset of the last example right above.

In order to achieve that, we need the following four properties marked with the @State property wrapper; they are going to update the view each time their value gets changed:

Next, we’ll use the values of the above properties instead of fixed values for the shadow arguments:

Finally, let’s apply the following animation when the view appears:

Here’s the outcome of the above animation:

Shadow animation

Buttons and shadow

Button is a kind of view in SwiftUI that might not give you the desired result when applying a shadow on it. The best way to make this point clear, is to demonstrate it with an example.

Let’s begin with the following button:

There is nothing difficult here; button’s label consists of a Text, and two view modifiers apply some padding and background color to the button.

Let’s set the following shadow now:

The result is this:

Shadow on buttons shape and label

See that the shadow is dropped not only on the button’s shape, but also on the button’s label; the Text view in this case. That effect may suits you, but sometimes may not.

There are two ways to prevent the shadow from being applied to the button’s label. The first is to round its corners:

The above will remove the shadow from the label:

Shadow on button shape only

However, be really careful here; the cornerRadius modifier must come before the shadow modifier! Order really matters! If you change that order, then you cut the shadow from the button’s shape and allow it in the label only:

Shadow on button label only

The second way to prevent shadow from being dropped to the button’s label is by avoiding to use a background color and rounded corners. Instead, use a shape with a fill color, and apply the shadow to the shape:

The result will be similar as above:

Shadow on button shape only

Summary

Dropping shadow on SwiftUI views is quite straightforward as you can see in this post, and if you want so, shadow can also be animated. Also, it seems that button and shadow is an interesting combination; keep the tricks I demonstrated right above under your sleeves, and use them when a shadow does not look right on your buttons. Thanks for being around!

Stay Up To Date

Subscribe to my newsletter and get notifiied instantly when I post something new on SerialCoder.dev.

    We respect your privacy. Unsubscribe at any time.