demo · v136
dynamic-range-limit
On HDR-capable displays an HDR image can dazzle the viewer. dynamic-range-limit lets a page cap how bright HDR content can go — useful when one bright element hijacks attention from a quieter design.
Probing
dynamic-range-limit support…three limits side-by-side
On an SDR display these look almost identical — the property only takes effect when the panel can actually exceed 1.0 brightness.
standard
dynamic-range-limit: standard (no HDR)
constrained-high
dynamic-range-limit: constrained-high
high
dynamic-range-limit: high (full HDR)
interactive
Open chrome://gpu and grep for "HDR Enabled" to confirm your panel reports HDR.
the code
.hero { dynamic-range-limit: high; } /* full HDR */
.gallery { dynamic-range-limit: constrained-high; } /* cap */
.body-text { dynamic-range-limit: standard; } /* SDR only */
see also
- CSS dynamic-range-limit property — feature index
- ChromeStatus entry
- CSS Color HDR spec