What’s the deal with scroll edges?

Scroll edge effects are a visual feature introduced to enhance the separation between UI elements and content, especially in dynamically scrolling environments. They work in concert with the Liquid Glass design to maintain legibility and clarity. These effects are inherently adaptive, meaning they adjust automatically as content scrolls beneath floating UI elements.

There are two main styles of scroll edge effects:

1. Soft Edge Style: This style progressively fades and blurs the content, providing a subtle transition. It is the default style and is commonly used on iOS and iPadOS, especially for interactive elements like buttons or inputs.

2. Hard Edge Style: This style uses a more opaque backing to create a stronger boundary, ideal for interactive text controls without backgrounds or pinned table headers that need extra clarity. It is mostly used on macOS.

Scroll edge effects are automatically applied in areas where UI elements overlap with scrolling content, such as underneath toolbar items or title bar accessories. They ensure that floating elements like titles remain clear and legible as content scrolls beneath them.

For more detailed information, you can refer to the session Build an AppKit app with the new design (09:27) where the scroll edge effect is introduced.