Member-only story
SwiftUI Materials Tutorial: Build a Glassmorphism Login Screen
Flat, convex, and concave glass views
In iOS 15, we have materials for the background and foreground style modifiers in SwiftUI.
Materials work by blurring the views behind them while keeping the edges sharp (not blurred). This creates a glass-like effect that we see in iOS notifications, macOS dock and menu bar background, and other places.
To obtain the glass-like look, we can solely use the materials provided to us in iOS 15. We have 5 materials that we can use; ultraThinMaterial, thinMaterial, regularMaterial, thickMaterial, and ultraThickMaterial.
In this article, we will go show how to achieve flat, convex/protruding, and concave glass views. We are going to use a sign-up view with a colorful background provided by an artist juicebox to show the glassmorphic UI design in SwiftUI.
