2.1 iOS 7 — The Birth of Frosted Glass (2013)#

iOS 7 was Apple’s turning point from Skeuomorphism to Flat Design. The design team led by Jony Ive introduced the Gaussian blur overlaid with translucency frosted glass effect, with core characteristics including:

• Control Center/Notification Center: Background uses real-time Gaussian blur, with a blur radius of approximately 30-40px
• Color Bleeding: The blur layer performs color mixing from the background rather than simply overlaying a solid color
• Sense of Depth: Content hierarchy is distinguished through blur intensity—foreground content is sharp and clear, while the background is soft and recedes

Technically, iOS 7 used UIBlurEffect + UIVisualEffectView, with the underlying implementation based on Metal’s real-time framebuffer sampling, performing GPU-accelerated Gaussian blur processing on the current screen frame.

2.2 macOS — Subtle Glass Hierarchy#

macOS’s glass style is more restrained. Areas such as the Finder sidebar and Safari toolbar adopt a translucent panel design:

• Blur intensity is lower than iOS, avoiding interference with content recognition in desktop productivity scenarios
• Desktop wallpaper colors are lightly revealed, creating a sense of environmental integration
• Vibrancy effect: Foreground text brightness/color adaptively adjusts based on the background to ensure readability

This is a key shift of glass material from visual decoration to functional translucency—not for showing off, but for creating a sense of hierarchy within limited screen space.

2.3 visionOS — A Whole New Dimension for Spatial Glass (2024)#

visionOS pushed glass design into an entirely new spatial dimension. Its design documentation explicitly identifies three core functions of glass material in spatial computing:

Lightweight Presence

visionOS app windows use frosted glass as the standard container background. This isn’t for aesthetics but serves a clear functional purpose: allowing users to see the surrounding physical environment through the app, maintaining spatial awareness. Glass material lets digital content “float” above the real world rather than completely obscuring it.

Depth Cues

Glass’s light refraction, edge brightness, and ambient light reflection together constitute spatial depth cues. When users move through space, the interactive changes between glass material and real environmental lighting help the brain understand the positional relationships of windows in space.

Contrast Adaptation

visionOS uses glassBackgroundEffect material, and the system dynamically adjusts blur radius and tint based on the complexity of the content behind it, ensuring text is always readable—whether facing a solid color background or a cluttered living room scene.

3.1 Three-Layer Overlay Model#

Apple’s glass effect is essentially a three-layer overlay of visual information:

1
┌──────────────────┐
2
│  Foreground content layer (text/icons)  │ ← crisp and sharp
3
├──────────────────┤
4
│  Glass surface layer (semi-transparent + saturation) │ ← the material itself
5
├──────────────────┤
6
│  Blurred background layer         │ ← GPU sampling
7
└──────────────────┘

3.2 Core Visual Parameters#

3.3 Color Mixing Algorithm#

Apple’s glass material is not simply overlaying translucent white. Its core algorithm consists of three steps:

1. Gaussian Blur: Performing Gaussian kernel convolution on the background region, with kernel size determined by blur radius
2. Saturation Adjustment: Using a color matrix to enhance saturation of blurred pixels, compensating for color dilution caused by blurring
3. Alpha Blending: Alpha blending the adjusted background with the foreground glass color

Expressed mathematically:

1
result = α · glass_color + (1 - α) · saturate(blur(background), s)

Where α is glass opacity and s is the saturation enhancement coefficient.

4.1 CSS backdrop-filter Approach#

Modern browsers natively support frosted glass effects through backdrop-filter, which is the most direct implementation method:

1
.glass-panel {
2
  background: rgba(255, 255, 255, 0.25);
3
  backdrop-filter: blur(20px) saturate(180%);
4
  -webkit-backdrop-filter: blur(20px) saturate(180%);
5
  border-radius: 16px;
6
  border: 1px solid rgba(255, 255, 255, 0.3);
7
}

Advantages: GPU accelerated, excellent performance, minimal code. Limitations: Blur effects depend on browser implementation, with significant differences across browsers; not supported in some older versions of Safari.

4.2 Advanced Glassmorphism#

A complete glassmorphism effect requires overlaying multiple layers of detail on top of basic frosted glass:

1
.glassmorphism-card {
2
  /* Base glass layer */
3
  background: rgba(255, 255, 255, 0.15);
4
  backdrop-filter: blur(40px) saturate(180%);
5
  -webkit-backdrop-filter: blur(40px) saturate(180%);
6

7
  /* Edge glow — simulates light refraction at the glass edge */
8
  border: 1px solid rgba(255, 255, 255, 0.4);
9
  border-radius: 24px;
10

11
  /* Inner glow — simulates the sense of glass thickness */
12
  box-shadow:
13
    0 8px 32px rgba(0, 0, 0, 0.1),
14
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
15

16
  /* Subtle gradient overlay — simulates the light source direction */
17
  background: linear-gradient(
18
    135deg,
19
    rgba(255, 255, 255, 0.25) 0%,
20
    rgba(255, 255, 255, 0.05) 100%
21
  );
22
}

4.3 visionOS Style Simulation#

visionOS’s glass material is more complex, requiring multiple layers of overlay:

1
.visionos-glass {
2
  position: relative;
3
  background: rgba(255, 255, 255, 0.18);
4
  backdrop-filter: blur(48px) saturate(200%) brightness(1.1);
5
  -webkit-backdrop-filter: blur(48px) saturate(200%) brightness(1.1);
6
  border-radius: 28px;
7

8
  /* Refracted light at the glass edge */
9
  border: 1px solid rgba(255, 255, 255, 0.35);
10

11
  /* Ambient light reflection simulation */
12
  box-shadow:
13
    0 4px 30px rgba(0, 0, 0, 0.12),
14
    0 1px 3px rgba(255, 255, 255, 0.3),
15
    inset 0 0 0 1px rgba(255, 255, 255, 0.15);
16

17
  /* Simulated light source gradient */
18
  &::before {
19
    content: '';
20
    position: absolute;
21
    inset: 0;
22
    border-radius: inherit;
23
    background: linear-gradient(
24
      160deg,
25
      rgba(255, 255, 255, 0.15) 0%,
26
      transparent 50%,
27
      rgba(255, 255, 255, 0.05) 100%
28
    );
29
    pointer-events: none;
30
  }
31
}

4.4 Performance Considerations#

The core performance bottleneck of glass effects lies in backdrop-filter:

• The larger the blur radius, the higher the GPU overhead. Blur above 40px may cause frame drops on low-end devices
• Nested glass layers: Avoid nesting blur layers within elements that already have backdrop-filter, as this triggers secondary sampling
• will-change hint: For glass elements in animations, add will-change: backdrop-filter to pre-allocate GPU resources
• Mobile degradation: Recommend providing a solid-color translucent fallback for low-performance devices

1
/* Performance degradation strategy */
2
@media (prefers-reduced-transparency: reduce) {
3
  .glass-panel {
4
    backdrop-filter: none;
5
    background: rgba(255, 255, 255, 0.85);
6
  }
7
}

5.1 From Decoration to Function#

The 11-year evolution of Apple’s glass material reveals a clear trend: translucent materials are gradually becoming functional interface elements from visual decoration. In the era of spatial computing, glass material is no longer just about “looking good”—it’s the answer to the fundamental question of “how to make digital interfaces coexist with physical space.”

5.2 Cross-Platform Unification#

As the design languages of visionOS, iOS, and macOS continue to converge, the behavior of glass materials across different devices is becoming more uniform. Glass Background universal materials have already appeared in Apple Design Resources, usable across platforms.

5.3 Implications for Web Design#

• Hierarchy over decoration: Translucent materials should serve content hierarchy, not mere visual effects
• Accessibility cannot be ignored: Always provide prefers-reduced-transparency fallback solutions
• GPU budget awareness: Glass effects are expensive; effects and performance must be balanced