name thatuiuser interface

Vibrancy on

The wallpaper bleeds through the frosted material.

The frosted see-through effect is vibrancy — an NSVisualEffectView material

Visual Effect Material (Vibrancy)

/ NSVisualEffectView · NSVisualEffectView.Material /

also called visual effect material, frosted glass, translucent material, blur material

A visual effect material supplies the adaptive translucent background seen behind macOS sidebars, menus, and panels. NSVisualEffectView chooses the background effect through its Material and BlendingMode. Vibrancy is the related foreground treatment that increases contrast against that material; standard AppKit controls enable it where appropriate.

Anatomy — every part, named

  1. 1
    Material layerNSVisualEffectView.Material

    “The frosted glass background behind the panel” is the material layer.

  2. 2
    Vibrant foregroundNSVisualEffectView.allowsVibrancy

    “The text and icons that adapt against the glass” are the vibrant foreground.

Prompt — paste into your agent

Use an NSVisualEffectView for this Visual Effect Material background (SwiftUI: Material). Choose NSVisualEffectView.Material by semantic purpose and set the appropriate BlendingMode; let standard controls supply vibrancy automatically instead of recreating the effect with a fixed blur and opacity.

In code

The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).

AppKitNSVisualEffectView
AppKitNSVisualEffectView.Material
AppKitNSVisualEffectView.BlendingMode
SwiftUIMaterial

See also

Search

Describe the UI element you're thinking of