CSS Gradient Rendering on MacBook Pro M4

CSS Gradient Rendering on MacBook Pro M4

The MacBook Pro M4 ships with a 14.2-inch Liquid Retina XDR display covering 100% of the DCI-P3 color space.¹ This wide-gamut panel renders colors that sRGB displays cannot reproduce, including vivid blues, greens, and reds outside the sRGB triangle. CSS gradients defined with standard HEX or rgb() values stay within sRGB and appear identically on both P3 and sRGB displays. To use the full P3 gamut in a gradient, the color stops must specify colors outside sRGB using color(display-p3 r g b) syntax or oklch() values with high chroma.

Safari on macOS supports OKLCH color interpolation natively for gradient functions.² The 120 Hz ProMotion display allows CSS animations to render at up to 120 fps, which makes OKLCH-interpolated gradient animations smoother and reduces perceived banding between animation frames.³ CapyToolkit's gradient builder outputs HEX by default; pasting those values into a stylesheet will constrain the gradient to sRGB on this display.

Specifications¹

sRGB vs P3 gradient colors in Safari on macOS

Safari on macOS color-manages all rendered content to match the display's ICC profile. When a CSS gradient uses sRGB colors such as HEX values, Safari maps those colors to the corresponding points inside the P3 gamut, which is a faithful reproduction of the original sRGB intent. The gradient looks correct but does not use the extra gamut the P3 display provides.

To step outside sRGB and use the full P3 range, write color stops using color(display-p3 r g b) values. For example, color(display-p3 1 0 0) specifies a red significantly more saturated than the sRGB equivalent rgb(255 0 0). Building on this, oklch() values with chroma above 0.37 typically land outside the sRGB gamut and inside P3, though the exact boundary depends on the hue angle. Safari 18 renders both syntaxes on this display without a polyfill.

Detecting P3 capability with CSS media queries

The @media (color-gamut: p3) query detects whether the current display supports the P3 color space.⁴ On the MacBook Pro M4, this query matches in Safari and Chrome. Use it to serve wider-gamut gradient stops only to displays that can render them, keeping sRGB defaults for everyone else. This approach ensures that the gradient degrades gracefully on standard monitors without any visual artifacts from out-of-gamut clipping. The query evaluates the display hardware capability rather than the browser version, so it works reliably across all browsers running on a P3-capable machine.

Because the query keys off the display hardware rather than the browser, a single color-gamut block works whether the visitor runs Safari, Chrome, or Firefox on the Mac. You write the P3 stop overrides once and every capable browser on the machine applies them, so there is no need for a per-engine fallback. CapyToolkit's gradient builder exports sRGB HEX, so copy those stops as the base rule and reserve the P3 values for inside the media query.

OKLCH gradient interpolation on WebKit

Safari supports the CSS Color Level 4 in oklch interpolation mode for gradient functions. A gradient written as linear-gradient(in oklch, blue, orange) routes the blend through the OKLCH perceptual color space rather than sRGB.² The visible effect on the MacBook Pro M4 display is a vivid midpoint that stays saturated rather than collapsing to grey, which is the artifact sRGB interpolation produces between complementary hues.

The ProMotion display refreshes at up to 120 Hz adaptively. On Apple's 120Hz devices, accelerated CSS animations render at 120Hz through Core Animation's built-in ProMotion support, halving the time between frames compared to a standard 60 Hz panel and reducing the stepped appearance of slow color transitions.³ Consequently, OKLCH-interpolated gradient animations appear noticeably smoother on this hardware.

ProMotion and gradient animation frame pacing

At 120 Hz, the display refreshes every 8.3 milliseconds compared to 16.7 milliseconds at 60 Hz. For a gradient animation lasting one second, ProMotion renders roughly 120 distinct color steps instead of 60, which reduces visible banding in slow transitions. The benefit is most noticeable in gradients that span a wide color range, such as a rainbow or a dark-to-bright transition, where each frame step covers a smaller color distance. Shorter animations (under 300ms) benefit less from the higher refresh rate since the total number of frames is small at either rate.

Practical tips for P3-wide gradients on this display

Three practices improve gradient quality on the MacBook Pro M4. First, verify gradient output in Safari rather than Chrome on macOS: Chrome uses Blink and applies slightly different color management behavior on P3 displays, so a gradient that looks identical in both browsers in sRGB may differ subtly when P3 colors are involved.

Second, avoid testing gradients only on this display. A color outside the sRGB gamut renders vividly on P3 but gets clipped to the nearest sRGB boundary on monitors without P3 coverage, which may significantly change the appearance. Furthermore, users on sRGB displays make up the majority of the audience for most products in 2026, so design for sRGB and treat P3 as an enhancement rather than a baseline.

Third, the gradient builder on this page exports HEX values, which are sRGB. To export P3 values, write the gradient in CSS directly using color(display-p3 ...) stops after copying the geometry from the builder. The practical order is to lock the gradient geometry before you swap in P3 stops, fixing the angle and stop positions first, then manually replacing each HEX color with a color(display-p3 r g b) value that takes full advantage of the wider gamut available on this display.

Using color-gamut media queries to serve P3 gradient stops conditionally

CSS media queries detect display color gamut capabilities with @media (color-gamut: p3). Safari 10+ and Chrome 58+ support this query. Browsers on P3-capable displays such as the MacBook Pro M4, iPhone 17 Pro, and Samsung Galaxy S25 match the p3 query. Browsers on sRGB displays do not match and fall through to the base rule. Structuring a gradient to serve sRGB stops by default and P3 stops inside the color-gamut query delivers the widest-gamut experience to capable displays without affecting sRGB users.⁴

A minimal implementation defines the gradient with sRGB stops in the base rule and overrides the stop colors inside the query: @media (color-gamut: p3) { .hero { background: linear-gradient(135deg, color(display-p3 0.15 0.05 0.85), color(display-p3 0.85 0.1 0.5)); } }. Safari on the MacBook Pro M4 matches the query and renders the P3 stops; Chrome on Windows renders the sRGB base rule. The <color-interpolation-method> value in oklch can be used with linear-gradient() to route interpolation through OKLCH.⁵

Combining color-gamut with prefers-color-scheme

Layering color-gamut detection inside a prefers-color-scheme block produces gradient variants covering all four combination states: light sRGB, dark sRGB, light P3, and dark P3. Write the base gradient for light sRGB, add a prefers-color-scheme: dark block for dark sRGB, then add a nested color-gamut: p3 check inside each for the wide-gamut variants. CSS custom properties reduce duplication: define the start and end color variables in each query block and reference them in a single gradient declaration outside the media queries.