Glassmorphism Visual Effects with SwiftUI

What is Glassmorphism?

Glassmorphism is a UI design trend that emerged around 2020, combining the aesthetic qualities of glass with skeuomorphic design principles — commonly known as the frosted glass effect.

This design language is defined by four key characteristics:

1. Transparent blur — frosted, matte background blur that creates a glass-like texture
2. Multi-layer depth — elements appear to float in space through layered stacking
3. Vivid colours — emphasis on colours that subtly bleed through the blurred layer
4. Luminous borders — fine glowing strokes along translucent edges, simulating light refraction

At the experience level, Glassmorphism delivers two core effects:

• Focus guidance — depth perception naturally draws the user’s attention to foreground elements
• Enhanced readability — keeps layouts lightweight while making content stand out

SwiftUI Material Implementation

Starting with iOS 15, SwiftUI introduced Material — a backdrop blur styling effect that lets developers achieve native frosted glass aesthetics with minimal code.

Material offers five blur intensity levels:

Level	Effect
.ultraThinMaterial	Lightest blur
.thinMaterial	Light blur
.regularMaterial	Standard blur
.thickMaterial	Stronger blur
.ultraThickMaterial	Maximum blur

Five Steps to Build a Glassmorphism Component

Here are the five fundamental steps to construct a CardView with a Glassmorphism effect:

Step 1: Create a Rounded Rectangle

Use RoundedRectangle as the card’s base shape with an appropriate corner radius.

Step 2: Apply a Gradient Surface

Add a linear gradient from semi-transparent white to clear as the foreground, creating the light variation seen on glass surfaces.

Step 3: Apply Material Backdrop Blur

Use .background(.ultraThinMaterial) to add backdrop blur — this is the core of Glassmorphism.

Step 4: Overlay a Gradient Border

Add a thin stroke via .overlay with a gradient that simulates light refraction along the glass edge.

Step 5: Add Shadow for Depth

Finally, apply .shadow to create the floating-in-space effect.

Complete Implementation

let gradientSurface = LinearGradient(
    colors: [.white.opacity(0.1), .clear],
    startPoint: .topLeading,
    endPoint: .bottomTrailing
)

let gradientBorder = LinearGradient(
    colors: [.white.opacity(0.6), .white.opacity(0.1)],
    startPoint: .topLeading,
    endPoint: .bottomTrailing
)

RoundedRectangle(cornerRadius: 15, style: .continuous)
    .foregroundStyle(gradientSurface)
    .background(.ultraThinMaterial)
    .overlay(
        RoundedRectangle(cornerRadius: 15, style: .circular)
            .stroke(lineWidth: 1.5)
            .foregroundStyle(gradientBorder)
            .opacity(0.8)
    )
    .shadow(color: .black.opacity(0.25), radius: 5, x: 0, y: 8)
    .frame(width: 300, height: 180)

This code brings together all five steps: a rounded rectangle base, gradient foreground for surface gloss, ultraThinMaterial for backdrop blur, gradient stroke for refraction, and shadow for the floating effect.

Design in Practice: oThings

In oThings’ colour theme menu, we use Material.ultraThinMaterial as the fill effect. When users browse different colour themes, they can preview changes in real time through the semi-transparent background, while the frosted glass effect ensures that menu text and icons remain legible.

This is an excellent example of how Glassmorphism balances functionality and aesthetics — transparency provides instant feedback (functional), while the frosted texture maintains interface refinement (aesthetic).

Conclusion

Applying Glassmorphism in practice does not mean wrapping an entire app in frosted glass. The technique works best as a localised treatment — on specific interface elements such as pop-over menus, toolbars, or any scenario where information must be presented without fully obscuring the background.

The key lies in calibrating transparency: users should sense spatial depth and layering without background visuals interfering with foreground readability.

This embodies the spirit of hybrid experience design — not merely chasing visual trends, but deeply integrating design language with native system capabilities to create interfaces that genuinely elevate the user experience.