Getting Started
SwiftUI is easy to customize, so you can experiment with different UI designs. So in this article, I'll show you how to create a Glassmorphism-style UI.
Glassmorphism?
To put it simply, it is a frosted glass style UI. This site is for CSS, but I think you can get the general idea if you look at it.
CSS-Glassmorphism-Generator
Preview
First of all, please take a look at the finished product. I'm not a professional designer! I'm not a professional designer, so there are some things that are not quite right, but this is what I can do with just SwiftUI.
Code
Semi-transparent background
import SwiftUI
struct GlassBackGround: View {
let width: CGFloat
let height: CGFloat
let color: Color
var body: some View {
ZStack{
RadialGradient(colors: [.clear, color],
center: .center,
startRadius: 1,
endRadius: 100)
.opacity(0.6)
Rectangle().foregroundColor(color)
}
.opacity(0.2)
.blur(radius: 2)
.cornerRadius(10)
.frame(width: width, height: height)
}
}
The RadialGradient
and Rectangle
are stacked on top of each other, and the transparency is shifted a bit. I feel like there are smarter solutions, but after a lot of trial and error, this is the closest I could get to the look of the site above.
Usage
import SwiftUI
struct GlassView: View {
var body: some View {
VStack {
Image(systemName: "person.circle")
.font(.largeTitle)
Text("Glass")
}.foregroundColor(.white)
.background(
GlassBackground(width: 100, height: 100, color: .black)
.shadow(color: .black, radius: 2, x: 2, y: 2)
)
}
}
If you use a gradient background or a patterned background, you can see how transparent it is. Shadows are not added to the objects displayed on top of the GlassPlaceHolder
, but this is based on a sample from the above site.
Summary
This is a much cooler design than the SwiftUI as-is. Depending on the background of your app and the placement of the UI, you may need to change some minor settings, but for the most part, the code above seems to work.
Glassmorphism is a great way to create a three-dimensional screen, and I personally like it a lot. I hope you'll give it a try.
If you'd like to know more about this, please visit here ☺️.
Announcements: Twitter
My app : RebootFilter🔥
Top comments (0)