What it does
CSS HDR Gradients at gradient.style is an editor for linear, radial and conic gradients. It exposes colour components, transparency, angle and layer controls, with an HD comparison toggle and a panel for copying CSS.
Choose a gradient type and adjust its colours and angle. Lightness, colour intensity, hue and alpha are exposed as separate components; New layer adds another gradient to the composition. A colour-space selector lets you explore how colours blend between stops.
Open Get the CSS code to view the result. The displayed example defines a modern gradient using OKLCH colours and OKLab blending, plus a separate classic gradient using hex colours. It names them --hdr-gradient and --sdr-gradient; the example background selects the HDR variable.
Colour spaces describe how colour values are arranged, while a display’s gamut is the range it can show. A wider colour range therefore depends on the viewing display as well as the CSS. The linked colour guide explains that distinction.
Strengths
- Linear, radial and conic gradients share one editor.
- The CSS panel makes modern and classic colour forms visible.
Watch out for
- Colours beyond a display’s gamut cannot be shown in their full range.
Best for
- Web designers comparing colour-space blending in CSS backgrounds.
Sources
- CSS HDR Gradients (Oct 28, 2026)
- High definition CSS color guide | CSS and UI | Chrome for Developers (Oct 28, 2026)
- GitHub - argyleink/gradient-style: A CSS4 and CSS5 full features gradient generator. Join the Discord https://discord.gg/nm4mkWxF · GitHub (Oct 28, 2026)
- gradient-style/package.json at main · argyleink/gradient-style · GitHub (Oct 28, 2026)