Why This Matters
This innovative technique allows logos and text to appear brighter on HDR screens by leveraging HDR image backgrounds, overcoming current CSS limitations. It enhances visual impact and readability on high-dynamic-range displays, offering a new way for designers and developers to optimize user interfaces. As HDR technology becomes more widespread, such methods will be crucial for creating more vibrant and engaging digital content.
Key Takeaways
- Enables brighter-than-white text on HDR screens using background-clip: text.
- Works by turning text into a window for HDR images, bypassing CSS color limitations.
- Prepares the industry for future design standards as HDR support in CSS evolves.
Also works on text
Text can be brighter than white , too.
CSS has no way to write a color brighter than #FFFFFF yet — the HDR color spaces in CSS Color HDR are still a draft. But you can paint real text through an HDR image: background-clip: text turns the glyphs into a window onto a gain-map JPEG. The headline at the top of this page is exactly that — select it, it's text.
Brighter than white SDR text
color: #fff Brighter than white HDR text
background-clip: text over the swatch Live HDR Simulated Checking your display and browser…
GoKawiil