Founding sponsorYour name here

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.

If you called it…

the frosted glass background behind a mac sidebartranslucent blurred panel that shows colors through itsee through material behind menus and hudsmac blur effect that adapts to the wallpaperglassy background behind the window controls

…you meant a visual effect material (vibrancy).

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.

Debug prompt — when it misbehaves

Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.

Debug my macOS vibrancy (NSVisualEffectView). Rule out: the wrong material for the surface (sidebar, menu, popover, hudWindow are distinct); blendingMode withinWindow when behindWindow was intended so nothing shows through; vibrant text/controls dead because they are not descendants of the effect view; everything going grey when the window deactivates via state followsWindowActiveState. The symptom:

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