The easiest way to create Neumorphic Style UI with SwiftUI

import Neumorphic

Create Rounded Rectangle with Outer Shadow

RoundedRectangle(cornerRadius: 20)
.fill(Neumorphic.shared.mainColor())
.softOuterShadow()

Create Rounded Rectangle with Inner Shadow

RoundedRectangle(cornerRadius: 20)
.fill(Neumorphic.shared.mainColor())
.softInnerShadow(RoundedRectangle(cornerRadius: 20))
HStack {
Circle().softOuterShadow()
Circle().softInnerShadow(Circle())
}
Button(action: {}) {
Text("Soft Button").fontWeight(.bold)
}
.softButtonStyle(RoundedRectangle(cornerRadius: 20))
HStack {
Button(action: {}) {
Image(systemName: "heart.fill")
}.softButtonStyle(Circle())
Button(action: {}) {
Image(systemName: "heart.fill")
}.softButtonStyle(Circle(), mainColor: Color.red, textColor: Color.white, darkShadowColor: Color(rgb: 0x993333, alpha: 1), lightShadowColor:Color("redButtonLightShadow"))
}

Customization

softInnerShadow<S : Shape>(_ content: S, darkShadow: Color, lightShadow: Color, spread: CGFloat, radius: CGFloat)
softOuterShadow(darkShadow: Color, lightShadow: Color, offset: CGFloat, radius:CGFloat)
VStack {
HStack {
Image(systemName:"magnifyingglass")
.foregroundColor(secondaryColor)
.font(Font.body.weight(.bold))

TextField("Search ...", text: $name)
.foregroundColor(secondaryColor)
}
.padding()
.background(
RoundedRectangle(cornerRadius: 30)
.fill(mainColor)
.softInnerShadow(RoundedRectangle(cornerRadius: 30), darkShadow: darkShadowColor, lightShadow: lightShadowColor, spread: 0.05, radius: 2)
)
}
.padding()
ZStack(alignment: .bottom){
RoundedRectangle(cornerRadius: 20)
.fill(mainColor)
.softInnerShadow(RoundedRectangle(cornerRadius: 20), darkShadow: darkShadow, lightShadow: lightShadow, spread: 0.3, radius: 2)
.frame(width: 30, height:150)

RoundedRectangle(cornerRadius: 20)
.fill(barColor)
.frame(width: 30, height:100)
}

Example Project

Soft Button Style Customization

softButtonStyle<S : Shape>(_ content: S, padding: CGFloat, mainColor: Color, textColor: Color, darkShadowColor: Color, lightShadowColor: Color, pressedEffect: SoftButtonPressedEffect)

Soft Button — Pressed Effects

HStack {
Spacer()
Button(action: {}) {
Text(".none").fontWeight(.bold)
}.softButtonStyle(Capsule(), pressedEffect: .none)
Spacer()
Button(action: {}) {
Text(".flat").fontWeight(.bold)
}.softButtonStyle(Capsule(), pressedEffect: .flat)
Spacer()
Button(action: {}) {
Text(".hard").fontWeight(.bold)
}.softButtonStyle(Capsule(), pressedEffect: .hard)
Spacer()
}

Contacts

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store