Safari Color Tinting: Demo

Safari 15.0 or above required

Body Background

Fixed Position Background

↻ reload

Meta Theme Color

Example Code

learn more: andesco/safari-color-tinting

Prevent Sampling Fixed Position Elements

Apply a neutral backdrop-filter to a fixed position element to prevent Safari from sampling its background color.

saturate(100%) blur(0px)

↻ reload

Hidden Tinting Element

A fixed element with bottom: -8px and min-height: 12px is sampled by Safari for toolbar tinting but is invisible to the user. Adjust the bottom offset to see when Safari stops sampling.

Enable hidden tinting element

bottom: -8px

↻ reload

Bypass with Transparent Parent

A fixed element with background-color: transparent is invisible to Safari's algorithm. An position: absolute child carries the visual styling, but Safari skips absolute children — so the toolbar tint falls through to the body background.

Direct background on fixed element Transparent parent + absolute child

↻ reload

Visibility Methods

Which CSS visibility methods prevent Safari from sampling a fixed element? Only display: none is reliable. The others still get sampled.

display: none prevents opacity: 0 still sampled visibility: hidden still sampled pointer-events: none still sampled backdrop-filter: opacity(1) prevents

↻ reload

Pseudo-Element Exclusion

::before and ::after pseudo-elements on fixed-position elements are NOT sampled by Safari's tinting algorithm. The background color from a pseudo-element is ignored.

Direct background on fixed element Background via ::before pseudo-element Background via ::after pseudo-element

↻ reload

Users can enable or disable browser UI color tinting in Safari 26:

macOS: Safari › Setting › Tabs › Appearance: ✓ Show color in tab bar

iOS: Setting › Apps › Safari › Tabs: Allow Website Tinting ✓