Glassmorphism in SwiftUI

Kabuki — Mon, 25 Oct 2021 07:54:40 +0000

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🔥

DEV Community: Kabuki