Tool enables HDR glow effects for logos and text on compatible displays

Enabling HDR Glow for Web Graphics

A new tool has been introduced that allows web content, specifically logos and text, to display with an enhanced "glow" effect on HDR-compatible screens. This is achieved by converting original artwork into a format that leverages the extended brightness capabilities of HDR displays.

Technical Implementation

For web use, the tool adds an ISO 21496-1 gain map to a standard JPEG, which is a small grayscale image instructing HDR software on pixel brightness. For platforms like LinkedIn, it writes pixels in BT.2100 PQ with an ICC profile, which LinkedIn preserves. This ensures the HDR effect is applied correctly where supported.

Optimal Conditions for HDR Effects

The best results for the glow effect are observed with light, near-white elements on dark backgrounds, with a measured real-world sweet spot of +2.9 stops (approximately 1,500 nits). Dark colors do not glow effectively and can appear as washed-out neon when boosted.

Browser and Platform Compatibility

The HDR effect is currently visible on HDR displays in software that honors gain maps or PQ profiles, including Chrome, Safari 26, Apple Photos, and LinkedIn's applications. On most other platforms, the HDR data is stripped or normalized, causing the file to appear as a normal image without the glow.

Applying HDR to Text

While CSS does not yet have native HDR color space support, the tool enables HDR effects on text by painting real text through an HDR image using the `background-clip: text` CSS property. This method ensures that only HDR screens display the image route, while SDR visitors see a standard color, avoiding extra fetches or clipping risks.