How to add Inner Shadows to Text in Swift UI 4.0

Just watched the awesome tutorial from Paul Hudson on inner shadows, a new feature coming with iOS 16. His youtube tutorial is excellent, please check it out: https://www.youtube.com/watch?v=ZIs3Gco-lrw

I really wanted to add inner shadows to my app Kanji Aid. I researched for hours but found nothing a few weeks ago. But the impossible is now possible in iOS. Here’s how to do it:

TLDR

Use the .foregroundStyle / Color.shadow / .inner method.

Try it out here: https://github.com/liyicky/iOS-16-Inner-Shadow-Viewer

For the people procrastinating, please continue reading

I want the kanji to look embossed into the background, like a business card in American Psycho.

“Look at that subtle colouring. The tasteful thickness. Oh my God. It even has inner shadow”

Here is my simple text class that animates the text when it appears on the screen for a second.

Inner Shadow

Now to add some shadows. Here is the new method in the documentation.

So you apply the shadow by first:

Adding a .foregroundStyle()

Inside that adding a Color and modifying it’s shadow property: Color.black.shadow

Inside that add your inner modifier.

It doesn’t look very good. Can I make it look better? I made a quick spike app for testing the font just to see.

After playing around with the settings, it look like if I change the foreground to white and make the shadows black it could look good.

Copy the properties right from the app

Does it look good?

So there we go. Finally got inner shadows in my app. Unfortunately it doesn’t look quite like the masterpiece I was hoping for.

Try it out

Here: https://github.com/liyicky/iOS-16-Inner-Shadow-Viewer if you wanna play around with it yourself.

Thank you for reading. あざす