Navigating CSS Gradient Syntax: From confusion to unofficial syntax

In the process of understanding the syntax logic for linear-gradient, I encountered a series of challenges and confusions related to gradient syntax and color interpolation methods. This journey led me to develop an unofficial syntax that better aligns with modern CSS practices. Here’s an account of my exploration and the eventual creation of this unofficial syntax.

The Struggle with Existing Syntax

The official CSS syntax for linear-gradient is well-documented:

• MDN Documentation
• MDN Data
• W3C Specification
• CSS Tricks

linear-gradient([ <angle> | to <side-or-corner> ]? , <color-stop-list>)

linear-gradient(in hsl longer hue, blue, red)

This in hsl syntax was puzzling and did not conform to the formal syntax outlined by documentation sources. For reference:

These sources clearly outline the expected syntax, but the in hsl syntax did not align with their definitions. My attempts to parse this syntax using tools like css-tree resulted in errors, highlighting the discrepancy between official specifications and actual usage.

Browsers vs. Specifications

Despite the official documentation, browsers seemed to handle this unconventional syntax without issue. This led me to question whether such syntax was a legacy feature or an experimental addition. Browsers’ leniency in handling these cases created confusion about their validity. This divergence between browser behavior and formal documentation underscored the need for a more flexible approach to CSS gradients.

The 2023 Specification and the Unofficial Syntax

In 2023, CSS introduced <color-interpolation-method> mdn, allowing more precise control over color interpolation in gradients.

syntax

<color-interpolation-method> =
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]

Where <color-interpolation-method> could be srgb, hsl, lab, lch, oklab, or oklch. However, the notation in hsl, in oklab, etc.

Developing the Unofficial Syntax for linear-gradient

To address the gap between official specifications and practical usage, I kept together an unofficial syntax that incorporates color interpolation methods directly into the linear-gradient function. This unofficial syntax is:

linear-gradient([ <color-interpolation-method> ]? [ <angle> | to <side-or-corner> ]? , <color-stop-list>)

Now it's time to test this unofficial syntax with some examples.

Examples of the Unofficial Syntax

1. Using LCH Interpolation

linear-gradient(in lch 45deg, red, blue);

• Colors transition from red to blue using the LCH color space with a 45deg angle.

2. Applying LAB Interpolation

linear-gradient(in lab to right, yellow, purple);

• Gradient from yellow to purple using the LAB color space, flowing to the right.

3. Default Interpolation (sRGB)

linear-gradient(to bottom, orange, green);

• Standard gradient from orange to green, using the default sRGB interpolation.

4. Using OKLCH with Color Stops

linear-gradient(in oklch 90deg, pink 30%, black 70%);

• Transition from pink to black using OKLCH color space with specific color stops and a 90deg angle.

Official Syntax

Soon after i played around with this unofficial syntax, After some little more research, i came across the actual syntax that is specified in the CSS Images Module Level 4.

From the official syntax we can understand that

• <angle> | to <side-or-corner> : This part indicates that you can use either an angle or a side/corner for the gradient direction. For example, you might use 45deg or to right.

• || <color-interpolation-method> : The || signifies that <color-interpolation-method> is another independent option that can be used in conjunction with or instead of the angle/side-or-corner specification.

Examples:

linear-gradient(45deg, red, blue)

linear-gradient(in lab, red, blue)

linear-gradient(to right in lch, red, blue)

Conclusion

The journey from dealing with non-standard syntax to creating an unofficial syntax that incorporates <color-interpolation-method> has been both challenging and enlightening. By integrating these modern color interpolation methods into the linear-gradient function, I’ve developed a more versatile approach to handling gradients. This unofficial syntax not only aligns with the latest CSS practices but also addresses gaps in existing documentation and real-world usage.

Through this process, I’ve learned the importance of adaptability in web development and the need to bridge the gap between evolving standards and practical implementation challenges.