Neumorphic Button in iOS 16 and SwiftUI

DevTechie
DevTechie
Published in
3 min readOct 11, 2022

--

SwiftUI 4 introduced ShadowStyle which is used to style shadows. It provides two static functions for custom shadow styles.

.drop(color:radius:x:y) creates a custom drop shadow style. Drop shadow draw behind the source content by blurring, tinting and offsetting its per-pixel alpha values.

.inner(color:radius:x:y) creates a custom inner shadow style. Inner shadows draw on top of the source content by blurring, tinting, inverting and offsetting its per-pixel alpha values.

In this article, we will use these two ShadowStyles to create a Neumorphic button.

Let’s start by defining the view.

struct DevTechieNeumorphicButtonExample: View { }

We will add two color properties, one for off white color and another for shadow color.

let offWhiteColor = Color(red: 236/255, green: 234/255, blue: 235/255)let shadowColor = Color(red: 197/255, green: 197/255, blue: 197/255)

For view’s body, we will ZStack which will host off white color to act as a background for our view. We also want to ignore safe area so Color view can expand to cover the entire screen.

struct DevTechieNeumorphicButtonExample: View {
let offWhiteColor = Color(red: 236/255, green: 234/255…

--

--